A clear and simple log of our latest tweaks and fixes. From performance boosts to refined visuals, each update is crafted to make Sonnenglas more intuitive, responsive, and enjoyable for everyday use.

Changelog SourceCodebase

Fix | React component error resolution

  • Removed hardcoded sunset block functionality for cleaner code architecture
  • Fixed invalid DOM props being passed to Mux video components
  • Resolved React map key errors for product variations to ensure unique identifiers
  • Prevented DOM errors by filtering review content props correctly

Feature | Enhanced component styling and sunset product management

  • Added CMS-controlled background color support for grid, slider, and awards components
  • Implemented sunset product blocking with API integration and hardcoded SKU fallbacks
  • Enhanced typography styling consistency across FX product components
  • Ensured initial variant selection defaults to in-stock items with preorder fallback logic

Feature | Bundle variation dropdown interface

  • Created dropdown selection interface for bundle variations as alternative to card layout
  • Added bundleDisplayMode to product fragments with automatic image height adaptation
  • Implemented paginated CMS product fetching for better cacheability
  • Reduced exponential backoff retries to optimize API performance
  • Added minimum height to product descriptions to prevent layout jumps during variant switching

Feature | Google Merchant Center feed generation

  • Implemented comprehensive Google Merchant Center feed generation for multiple locales
  • Added proper URL handling for single and bundle products without virtual parents
  • Ensured correct product categorization and attribute mapping
  • Added country-specific shipping data integration for accurate merchant listings

Technical | Caching and revalidation strategy overhaul

  • Removed unused raw rich text queries to reduce API overhead
  • Implemented comprehensive caching strategy for getAllCMSProducts function
  • Added fallback mechanisms for product URL segment generation
  • Enhanced revalidation system with backoff and retry logic for improved reliability

Technical | Performance and rendering improvements

  • Re-enabled metadata generation after performance optimizations
  • Enhanced locale switcher to stop loading states on successful switches
  • Added comprehensive revalidation info logging for debugging
  • Implemented backoff and retry logic for revalidation routes
  • Enhanced virtual product revalidation with proper data fetching

Technical | Rich text reference system

  • Adapted reference slug and path construction for rich text elements
  • Enhanced link reference handling for better content interconnectivity

Feature | Relative link references system

  • Implemented comprehensive relative link references for blog posts and rich text content
  • Added GraphQL queries for post type references and conditional access handling
  • Fixed rich text data access and ensured complete rich text content passed to components
  • Enhanced YouTube video component rendering with proper aspect ratio and responsive styling
  • Enabled proper linking between different content types through CMS references

Fix | User experience improvements

  • Improved locale switcher by preventing loading state when switching to identical paths
  • Fixed event propagation issues for cart item removal to prevent unwanted page reloads
  • Enhanced product path handling for various product types with complete GraphQL queries
  • Optimized description text length validation to prevent empty tags overriding content

SEO | Enhanced structured data

  • Fixed duplicate brand identifiers in product schema with consistent @id references
  • Added specific IDs to potentially duplicate schema entities for better SEO
  • Stabilized aggregateRatings with consistent identifiers across pages
  • Improved order confirmation summary by re-adding product titles for clarity

Feature | Complete product variant URL structure

  • Resolved variant page conflicts and ensured proper product URL construction
  • Fixed linking for product sliders with availability filtering
  • Enabled proper variant switch rendering for adventure mount product pages
  • Debugged 404 errors for certain products and Hygraph asset content API delivery issues

Feature | Enhanced product navigation and referencing

  • Enabled swiper product referencing with navigation titles and sublines
  • Added combineVariantParentImages mechanism for better image handling
  • Adapted GraphQL query structures to allow product references in swiper components

Feature | Advanced variant page architecture

  • Implemented conditional product variant data usage
  • Fixed path and slug creation for products across navigation
  • Completed structural changes for variant pages without direct CMS page entries
  • Adapted page metadata mechanisms for variant support
  • Modified cart implementation to use CMS product data instead of product detail pages

Feature | Product variant URL structure implementation

  • Transitioned to new Hygraph content API for better CMS integration
  • Implemented product variant-based descriptions and alternative content approaches
  • Enabled virtual product variants with proper add to cart functionality
  • Adapted CMS structures to support default variant settings and page creation
  • Modified page generation and fetching mechanisms to support variant-specific URLs
  • Ensured correct slug generation for variant pages

Feature | Advanced CMS integration for product variants

  • Adapted CMS structures and codebase linking for product variants
  • Implemented variant-specific page generation with proper slug handling
  • Enhanced communication workflows with content team to reduce duplication workload

Fix | Locale switcher desktop improvements

  • Improved size and spacing of locale switcher modal on desktop devices
  • Added UTM parameter approach for dynamic image control based on URL parameters
  • Enhanced desktop testing across multiple devices and operating systems

Feature | Advanced product variant structure

  • Recreated development environment for testing structural changes
  • Implemented conditional usage of development data for safer testing
  • Refactored product component to remove redundant data transformation and dead logic
  • Added first iteration of variant data fetching and processing
  • Fixed desktop centering issues for locale switcher

Fix | Locale selector mobile experience

  • Fixed locale switcher compatibility issues on iOS devices
  • Changed from dropdown to filtered list approach for better mobile UX
  • Improved modal height handling when on-screen keyboard appears
  • Enhanced scroll behavior to prevent UI breakage on devices with limited screen height

Performance | LCP optimization investigation

  • Debugged Largest Contentful Paint (LCP) performance issues
  • Investigated hydration boundary and prefetching impacts on page performance
  • Tested component reduction strategies to identify performance bottlenecks
  • Optimized Termly consent integration for better loading performance

Feature | Add localized blog date formatting

  • Added formatDate function for proper date localization in blog posts
  • Implemented locale-aware date rendering throughout blog overview and post pages
  • Improved user experience with dates displayed in their preferred language format

Fix | Improve navigation menu experience

  • Fixed top menu hover behavior to prevent unexpected closures when moving between items
  • Adapted mobile menu to use accordion-style single collapsible sections for better usability
  • Optimized menu loading approach for smoother transitions and reduced layout shifts
  • Added proper text truncation for long titles in mobile menu

Feature | Add review section enhancements

  • Implemented "scroll to reviews" functionality when clicking on product rating stars
  • Added proper container padding around review components for better visual presentation

Feature | Enable CMS-defined navigation paths

  • Replaced hardcoded path construction with CMS-based approach
  • Added constructFullSlug helper for consistent URL generation
  • Ensured proper localization and path handling for product pages
  • Adapted sitemap generation to use CMS paths instead of complex helper functions
  • Improved revalidation process for content updates with proper path handling

Fix | Improve cart country handling

  • Fixed delivery cost calculation when changing countries in cart
  • Added country data to empty cart returns for consistent handling
  • Ensured cart is properly invalidated when switching regions

Feature | Migrate from NextUI to HeroUI

  • Migrated UI component library from NextUI to HeroUI for improved performance and features
  • Updated Yarn from v1.2 to v4 for better dependency management
  • Updated Stripe API version to ensure continued payment processing functionality

Feature | Improve product detail page structure

  • Removed hero components from product pages for cleaner design
  • Implemented mechanism to determine proper header mode based on CMS data
  • Added dynamic spacing adjustment for product detail components
  • Added localization support for product pages with proper pagination

Fix | Proactive locale dialog improvements

  • Refined best locale selector to take geo information into account
  • Added additional steps to best locale selection on base path including region fallback
  • Improved locale function naming in middleware for better maintainability

Fix | Remove objectPosition from Next Image

  • Removed objectPosition prop from Next Image components as it is no longer a valid prop
  • Fixed console warnings caused by outdated prop usage

Feature | Add newsletter signup to footer

  • Added newsletter signup form in footer with proper email validation
  • Implemented error handling for Brevo API responses
  • Added internationalization support with dictionary approach for newsletter elements

Fix | Cart prevent default

  • Removed preventDefault calls from shopping cart form and checkout button
  • Fixed issues with form submission

Fix | Further localize sitemap

  • Split functions/route handlers for index sitemap generation and locale-specific sitemap generation
  • Added gzip compression for final sitemap to handle ISR limit
  • Improved sitemap structure with proper hreflang tags for better SEO
  • Added links with alternates and their hreflang attributes

Fix | Change email delivery wording

  • Adapted wording of availability and delivery status for email
  • Improved clarity of delivery information for digital products

Fix | Add shipping banner for Switzerland

  • Added shipping message to banner specifically for Switzerland
  • Changed displaying logic to show banner when message for locale exists
  • Improved user awareness of shipping conditions

Feature | Enable gift card balance check

  • Added endpoint for checking gift card balances and UI changes to render the response
  • Improved handling of data access and status code responses
  • Enhanced user experience for gift card holders

Fix | Disable Christmas shipping banner

  • Temporarily disabled the Christmas shipping banner
  • Will be reactivated for next holiday season

Fix | Checkout metadata hotfix

  • Fixed checkout metadata handling by transferring items to render on thank you page via URL instead of Stripe metadata
  • Readded interface StripeMetadataProduct for backward compatibility
  • Ensured tracking data and rendering data is properly retrieved from verify endpoint

Feature | Add new hardcoded carousel subheadings

  • Added new subheadings for carousel component
  • Improved user understanding of product collections

Fix | Improve cart invalidation on locale switch

  • Adapted dependency array of useEffect to check currentRegion-cartData currency mismatch
  • Triggers cart invalidation when needed for region changes
  • Prevents incorrect pricing display

Fix | Remove market selector forced full client

  • Removed on-mount useEffect and setState for market-selector
  • Improved performance by removing unnecessary client-side operations

Fix | Locale switcher after NextUI upgrade

  • Fixed locale switcher UI breakage after NextUI 2.6 upgrade
  • Force disabled NextUI autocomplete virtualization to maintain proper functionality

Feature | Add shipping cutoff information components

  • Added top banner with shipping information and animations
  • Improved display of time-sensitive shipping information
  • Shows with delay but hides immediately for better UX

Fix | Change delivery wording

  • Modified wording of delivery section in cart
  • Improved clarity of delivery status for users

Feature | Sort items based on availability

  • Implemented sorting of carousel products by availability
  • Added ability to hide carousel products based on SKU list
  • Improved user experience by showing available products first

Fix | Enable anchor link in link construction

  • Fixed ability to add anchor links via LinkWrapper
  • Improved navigation to specific sections within pages

Feature | Gift card rendering and link adaptations

  • Added special rendering of availability for items delivered by email
  • Created special display case for digital-only products in cart
  • Adapted categoryPath creation to handle gift cards properly
  • Hide currency-specific gift cards based on current region (e.g., hiding CHF cards on EUR pages)

Feature | Add schema data for SEO

  • Extended product schema to include hasMerchantReturnPolicy and shippingDetails
  • Added GTIN to product schema for better product identification
  • Fixed product schema price formatting to use dot-based decimal notation
  • Used shortProductDescription text for schema description to prevent suboptimal content

Feature | Add proper modal handling

  • Implemented proper modal functionality with scroll blocking
  • Fixed header position on modal open to prevent layout shifts
  • Ensured navbar compensation for modal with blocked scrolling only happens on desktop devices

Fix | Special link resolution for mailto and tel links

  • Fixed handling of special links like mailto: and tel: in rich text content
  • Changed order of conditional blocks to prevent mailto domains being caught incorrectly
  • Ensured proper formatting of special links within blog rich text

Fix | Review label improvements

  • Added new translations via dictionary for reviews
  • Improved labels for better user understanding

Fix | Remove "yet" from add to cart button

  • Simplified add to cart button text by removing unnecessary word
  • Improved clarity of call to action

Fix | Ensure proper button currency formatting

  • Fixed issue with price formatting in buttons
  • Removed invisible white cart icon that caused text offset
  • Ensured price is only formatted if it's actually a price value

Feature | Add currency formatting to navigation

  • Added dynamic currency formatting to navigation elements
  • Ensured consistent price display throughout the site

Fix | YouTube button styling

  • Fixed styling issues with YouTube play buttons
  • Improved visual consistency of video elements

Fix | Change add-to-cart button casing

  • Updated the casing of "Add to Cart" text
  • Improved visual consistency of call-to-action elements

Fix | Refactor product info component

  • Removed old product view component files
  • Hidden bundle preview images for cleaner design
  • Fixed spacing issues in Embla carousel initial items
  • Removed white shadow effect from product carousel for more consistent appearance
  • Added US-specific privacy options in footer only for US region routes

Fix | Add redirects for user manual links

  • Added proper redirects for user manual pages
  • Ensured users are directed to current documentation

Feature | Add product page availability indicators

  • Added shipping origin country information to ItemAvailability component
  • Adapted countries list to include US for proper availability display
  • Changed position of availability indicators for better visibility
  • Enhanced dictionary with shipping origin translations

Fix | Hide review components on Christmas-themed pages

  • Special product pages with Christmas themes needed customized display
  • Reviews didn't fit with the seasonal page design and were hidden

Fix | Application locale redirection error

  • Fixed localeIdFromLocalePath access issue causing errors
  • Adapted redirects to be explicitly temporary for non-native language versions
  • Added temporary redirects for /fr, /ca, and /nl paths until native language versions are available
  • Improved handling of locale paths throughout the application

Fix | Currency formatting and tracking improvements

  • Corrected currency formatting for consistent display across all pages
  • Added URL tracking to Axiom logs for better analytics
  • Enhanced debugging capabilities for purchase tracking

Fix | Cart initial state handling

  • Fixed cart empty state display issues
  • Improved loading state logic to only show when cart has items
  • Cleaned up conditional structure for better reliability

Feature | Consent banner and navigation improvements

  • Adapted banner styling for better user experience
  • Set language correctly based on user's locale
  • Corrected category paths for top navigation and Beadwork edition

Feature | Image loading optimization

  • Changed from priority loading to eager loading for critical images
  • Improved initial page load performance

Fix | Checkout language handling

  • Passed locale object correctly to checkout route
  • Ensured language is properly set during checkout session creation
  • Fixed internationalization issues during checkout flow

Improvement | Extended Axiom logging

  • Added pathname to analytics logging
  • Improved tracking of user journeys through the site
  • Enhanced error detection capabilities

Feature | Added Apple Touch Icons

  • Added proper Apple-specific icons for iOS devices
  • Improved home screen appearance when users add the site to their device

Fix | Environment variable configuration

  • Switched to NEXT_PUBLIC_SITE_URL instead of VERCEL_URL for consistent values
  • Corrected last instances of environment variable usage
  • Ensured proper URL construction in all environments

Fix | Locale handling and redirects

  • Fixed initialization of bundle selection
  • Added GTM to order confirmation pages for improved purchase tracking
  • Excluded shipping from purchase total value calculations
  • Adapted handling of static vs dynamic page generation
  • Implemented buildDynamically setting to LocaleConfig for improved build times

Feature | Hide hardcoded modules on special edition pages

  • Removed review and award modules from special edition product pages
  • Created consistent display across all special product variants

Improvement | API call optimizations and error handling

  • Implemented exponential backoff with jitter for API calls
  • Added proper retry handling for Hygraph and backend fetches
  • Added full types and market config for production and test deployment

Feature | Enhanced image handling and cart improvements

  • Added Mux as remote source for image optimization
  • Improved background video loading with proper poster prefetching
  • Implemented sitemap generation for all regions
  • Enhanced unavailable cart item styling and behavior
  • Added ability to handle unavailable items in cart when changing regions

Improvement | SEO enhancements

  • Added hreflang and other important SEO metadata
  • Improved locale switcher to be SEO-friendly with proper link generation
  • Added Hygraph OG image URL generation
  • Added lang attribute to language switcher links
  • Improved link structure handling in rich text content

Hotfix | Minimal checkout fix to prevent it from breaking

Before

  • Broken feeling
  • Navigation back and forth not possible without checkout breaking

After

  • Much faster loading by corrected loading approach
  • Back to cart and into checkout again without checkout breaking
  • Feels much more like part of page than external script
  • Much sold

Fix | Remove forced revalidation & prevent 429 errors

Before

  • Were with 26 Million API Calls already 230% over yearly Hygraph allowance
  • Many requests to the API therefore failed with 429s "too many requests"

After

  • The fix of dynamic revalidation via the endpoint allows us to remove the forced revalidation in the page creation code
  • Significantly reduced API call volume to remain within limits

Feature | Add awards & product reviews with pagination, search, and sorting to product pages

Context

  • Although one of the strongest assets of the brand to trigger conversions, the product pages did not feature any reviews or mentions of the won awards.

Changes

  • Used the preselected reviews from the content team to create a showcase section.
  • Created datastructures to allow for translation of the reviews and later extension of the system.
  • Added the existing modules for the awards and reviews to the product pages.
  • Implemented a modular review section with pagination, search, and sorting.
  • Added translations for both English and German and rendered them conditionally based on the site settings.

Video

Technical Improvement | Changed Project Bundler From Webpack to Turbopack

  • This change follows the modern proper defaults for development with Next.js and enables much higher development velocity due to the development server being much faster.

Stability & DX Improvement | Setup TypeScript Support in Project

  • This change will allow for a gradual migration to TypeScript components and logic, ensuring a much more solid application design with clear interfaces and prevent many instabilities and errors from going into production.

Design Improvement | Change Size of Product Image Chip

  • The product image chip was too large and was covering the product image, making it hard to see the product. The new size is much smaller and allows for a better view of the product.

Comparison Image

Feature | Add a Product Image Carousel for Product Pages

Context

  • The previous setup featured only a main image and thumbnails below, switching on click. Thumbnails required manual scrolling on desktop, and images were not swipeable on mobile.

Changes

  • Implemented a modular image carousel using Embla Carousel.
  • Recreated the white shadow effect.
  • Added physics-based animations and UI controls aligned with the latest design standards.

Comparison Videos

  • Before:
  • After:

Hot Fix | Product Grid Display Issues

Comparison

  • Before:
  • After:

Hot Fix | White Border Flash on Navigation Attach/Detach

Comparison Videos

  • Before:
  • After:

Hot Fix | Product Page Image Performance Improvements

Context

  • The product pages used overly large images (1MB to 7+ MB, multiple on every page, sometimes loading even more than 20 MB of images) without caching due to src swaps on thumbnail selection. NextUI image bug caused double loading, and old-generation formats led to poor UX on mobile and desktop.

Changes

  • Replaced with Next Image component.
  • Added a minimalist background for loading state.
  • Enabled DNS-prefetch & preconnect for image sources.
  • Ensured next-gen formats (WEBP, AVIF) and optimized loading to prevent white flashes.
  • Created responsive image components and preloaded screen-size-specific main product images.

Comparison Videos

  • Desktop:
  • Mobile:

Hot Fix | Fix Hidden Navigation Element Blocking Mobile Interactions

Context

  • Faulty rendering conditions in the navigation blocked interactions on 35% of the mobile screen.

Changes

  • Corrected CSS and rendering conditions to ensure the element is removed properly.

Comparison Video