Performance enhancements, Recently viewed products, Product page thumbnails and much more with GraphCommerce 8
With the release of GraphCommerce® 8.0.0, we are excited to show new features. Building on the foundation laid by our previous releases, this latest version marks a leap forward, introducing over 15 major new features designed to elevate user experience, streamline developer workflow, and boost performance. From advanced customization options to integration improvements.
Support for customizable product options
This feature expands our support for Adobe Commerce's customizable product options.
Newly supported customizable options:
Area: Offers the flexibility for customers to input text, which is ideal for personalization and custom orders.
Checkbox: Allows customers to select multiple options, perfect for additional services or features.
Date: Enables the selection of dates, facilitating bookings or custom delivery dates.
Drop-down: Provides a single-choice dropdown, streamlining the selection process for variants such as size or color.
Field: Supports single-line text input, useful for custom messages or engraving instructions.
Multiple: Enables multiple selections from a list, offering enhanced customization for users.
Radio: Allows for one selection out of multiple choices, ensuring a clear and straightforward decision-making process.
It is important to note that at this time, the File option is not yet supported. While we now cover a comprehensive range of customizable options, the file upload field remains outside our current scope.
Enhanced wishlist functionality with support for configurable products
Shoppers can now add configurable products to their wishlist. This means that items that are coming in different sizes, colors, or other configurable options can now be saved for later in their configured state. Unconfigured products added to the wishlist can later be fully customized on the product page by clicking on ‘Configure’ , allowing customers to specify their preferences at a more convenient time for them.
To make this feature as seamless and intuitive as possible, the wishlist page now utilizes the <ActionCard/> component. This brings the design of the wishlist in line with the recently redesigned Cart redesign.
Redesigned success page
We've undertaken a redesign of the success page to provide a more cohesive and visually appealing user experience while utilizing the <ActionCard/> component. This change aligns the appearance of the success page closely with the design of the cart, ensuring a unified look and feel throughout the shopping process.
Frontend accessibility enhancements
This release also introduces a series of accessibility improvements to the frontend.These enhancements are designed to ensure that our platform is more navigable and user-friendly for individuals with disabilities, aligning with the latest web accessibility standards. Skip content link: We've added a "skip to content" link, allowing users to bypass navigation menus and other elements to quickly access the main content. This feature is particularly beneficial for users who rely on screen readers or keyboard navigation, enhancing the overall usability of our platform.
Tab flow optimization: In an effort to streamline navigation, we have removed empty buttons from the tab sequence.
Enhanced focus management: Focus is now automatically directed to elements (such as the menu) that appear after clicking a button.
Improved ARIA labels: We've made improvements to ARIA (Accessible Rich Internet Applications) labels across the site.
New gallery thumbnails feature on product pages
This addition showcases product thumbnails directly below the main product gallery, allowing customers to easily view and select from a range of product images at a glance.
Enhanced session management with new 'Session Expired' dialog
We have introduced a 'Session Expired' dialog feature, aimed at enhancing session management. This new functionality is triggered whenever a GraphQL query or mutation encounters a graphql-authorization error, indicating that the user's session has expired. The dialog offers users the ability to sign in again directly from the notification. Once the user has successfully signed back in, the initial query or mutation is automatically re-executed.
Streamlined login and sign-up with enableGuestCheckoutLogin configuration
In te 2.4.6-p1 release the following change was made:
The default behavior of the isEmailAvailable GraphQL query and (V1/customers/isEmailAvailable) REST endpoint has changed. By default, the API now always returns true. Merchants can enable the original behavior, which is to return true if the email does not exist in the database and false if it exists.
To support this flow, we have made the addition of a new configuration option, enableGuestCheckoutLogin. For stores wishing to maintain the traditional login flow, the enableGuestCheckoutLogin configuration must be set to true. This restores the previous behavior.
To leverage this functionality, Magento stores must enable the Guest Checkout Login option under Stores -> Configuration -> Sales -> Checkout -> Checkout Options.
Enhanced cart cross-selling with horizontal scroller
This version introduces a new feature that elevates cross-selling opportunities within the shopping cart. With the addition of the <CartCrosssellsScroller /> component, cross-sell products are now displayed in a horizontal scroller directly within the cart.
Enhanced product discovery with the <RecentlyViewedProducts/> component
New within GraphCommerce 8 is the <RecentlyViewedProducts/> component. The <RecentlyViewedProducts/> component provides customers with product recommendations based on the products they have viewed previously.
Customers can now easily reference products they've previously explored without the need for extensive navigation.
Renewed order details page for enhanced consistency
We have made a redesign to the order details page within the customer account section. Our primary objective was to align the order details page with the design and layout of the customer success page, ensuring a consistent and harmonious look and feel throughout the platform.
Real-Time available attribute updates during product configuration
With this update, customers will now receive instant feedback on available attribute options as they make selections on a configurable product within the product page.
With instant feedback, customers no longer need to guess which attribute options are compatible with their choices. This feature ensures that users can confidently select the desired attributes without the risk of making incompatible choices.
Significant reduction in total blocking time with the new <LazyHydrate/> component
In this release, we have made a few performance enhancements by introducing the <LazyHydrate/> component. By implementing the component across key areas of the platform, including <RowRenderer/>, <ProductListItemBase/>, <Footer/>, and the <NavigationProvider/>, we have successfully reduced the Total Blocking Time (TBT) by 50% on various pages, including the homepage.
You can use the <LazyHydrate /> component yourself by wrapping it around your component and providing a boolean state to the hydrated prop. When hydrated is set to true, the component will be invisible to the IntersectionObserver and becomes hydrated.
Optimized CSS injection for improved performance
We have implemented another performance improvement by relocating the injection of critical CSS.
By moving the critical CSS injection to the head of the document, we have effectively reduced instances of “Flash of unstyled content” (FOUC). Furthermore, the optimized placement streamlines the rendering process, reducing the need for re-paint and re-layout.
Enhanced Hygraph functionality with the new Dynamic Row: property dropdown field.
We have extended the existing dynamic row feature by adding a select field for product properties. This enhancement eliminates the need for content managers to manually input object dot notation in Hygraph to access product properties.
Instead of typing out complex notations, content managers now have access to a dropdown field. This dropdown is based on the ProductInterface of the store and displays all available product properties. Users can simply select the desired property from the list, significantly simplifying the process.
The addition of the dropdown selection makes the Dynamic Row feature much easier to use. Content managers can quickly locate and select the product properties they need, also reducing the likelihood of querying non-existing properties.
To use the feature, all you need to do is install our Dynamic Row app in Hygraph. After installation and configuration of your schema in the app, replace the property field in the Text and Number components in your Hygraph Schema with our new field.
Breaking change: removal of legacyProductRoute configuration and all /product/* routes
The legacyProductRoute configuration option has been entirely removed from the platform, affecting all /product/* routes. It is important to note that all /product/* routes will no longer be supported by Graphcommerce® after version 8.0.0.
Developer-focused improvement: Restricted useMediaQuery imports
We have added an ESLint warning to restrict the import and use of useMediaQuery. This decision was made due to the observed negative impact, including screen repainting issues, associated with the use of this feature.
Developer-focused improvement: Github Codespaces Support
We have added support for Github Codespaces. This includes the creation of a ./devcontainer/devcontainer.json file, which automates the setup and execution of GraphCommerce within Github Codespaces.
Enhancements
This version of Graphcommerce contains improvements for the product page, checkout flow and stability, Dynamic Row usability, configurable product functionality, and overall performance.
Release Notes
For a complete overview of changes, check the Full GraphCommerce 8.0.0 release notes.
Community Contributions
We would like to thank everyone who contributed to this latest version of GraphCommerce.
We are extremely grateful to those in the community who have given back to GraphCommerce by reporting issues, submitting pull requests, or answering questions in the public slack community chat.
Installation and Upgrade Instructions
Upgrade to GraphCommerce 8.0.0 by following the guide: Upgrading step by step
