Product Comparison, Dynamic Rows, and Algolia Search with GraphCommerce 7.0

In this long-awaited release of GraphCommerce®, version 7.0, we are taking another big step towards higher versatility and stability of our Magento PWA and headless react, nextjs frontend for Magento 2. This update includes, in addition to a number of new features, more than 100 fixes and enhancements.

Classic Alternative for Filters and Category Navigation with the Category Sidebar Layout

GraphCommerce shows horizontal, floating filters at the top of list pages. A layout predominantly utilized in sectors such as fashion, beauty, and health. In this new iteration of GraphCommerce, we are introducing a more traditional layout where category navigation, filters, and features like the price slider are situated on the left side of the page on desktop.

We observed a notable interest in this layout from sectors like electronics, as users heavily rely on filtering to navigate through large quantities of products. On desktop, the filters are now displayed in a column on the left side of the page. Filters are applied instantaneous upon selection. While individual filters can be cleared, a 'Clear all filters' option is also available. Long lists of filter choices are automatically shortened, with the option to view all by clicking on ‘More options’. Filters can be shown as collapsed or expanded by default.

Using the new Category sidebar Layout filters in GraphCommerce 7.0

On mobile, filters are displayed in an overlay (drag to close). The Apply filter button is floating.

As always, this new layout can be easily styled and customized to your preference, including for example adjustments to the order or the number of options displayed by default.

The category sidebar layout is deactivated by default and can be activated in the graphcommerce.config.js configuration file with the property productFiltersLayout: SIDEBAR. Compare the sidebar navigation demo and regular floating filters demo.

Enrich Targeted Product and Category Pages with CMS Utilizing the New Dynamic Rows Feature

GraphCommerce seamlessly integrates with all features of Magento 2, but relies on Hygraph as its CMS. Our row system facilitates the construction of pages from content from both Magento and Hygraph, allowing the perfect balance between e-commerce and storytelling/branding. The homepage of the demo serves as a prime example.

A new feature in this version of GraphCommerce is the capability to equip specific category and product pages with CMS content. For instance, it is possible to display a content block (for example: quote) exclusively on products within the men/business category. 

An example of utilizing a dynamic row to render a quote on all product pages that have a 'categories.url_path' attribute with the value 'men/business'.

Dynamic Row entry configured to show a text banner on product pages if the product is priced LTE (Lower then or equal to) 10.00 USD.

Text banner displayed on the GraphCommerce Front-end

The management of Dynamic Row content is solely handled through Hygraph. Create a Dynamic Row content entry and adhere to the instructions provided in the fields. Webshop administrators retain full control over the selection and positioning of the display blocks, with the option to choose from one of the standard layouts in Hygraph, such as the quote block, and determine the position where the block should be displayed.

Offer Users the ability to Compare Products with a High-End Magento PWA Product Compare

This version of GraphCommerce contains a new compare feature, which offers users an optimized, app-like interface to compare products and their specifications. We took inspiration from the very largest to provide a user interface that works intuitively on mobile, tablet, and desktop.

The new compare feature in GraphCommerce 7.0.0

Products can be added to the comparison from the category page, as well as from the product page. In the compare overlay, a number of products are displayed (3 on desktop, 2 on mobile), with their specifications presented in table form. When a user has more products in the comparison than there are spots available, they can easily switch positions using the drop-downs at the top of the page. These drop-down menus remain fixed on the desktop for overview and user-friendliness.

This feature is also easy to theme and customize, but we hope to already offer a valuable, beautifully designed feature.

We've created a version of the Compare feature using icons and a version using checkboxes.

More Versatility with the All-New Compact Sidebar Cart Layout

The cart layout now supports even more features of Magento, such as displaying all choice options of Bundled products with price, and displaying, for example, gift card text. In addition, we optimized the display of product quantities and price calculation, making it possible for visitors to see at a glance how prices are calculated.

Demo of adding a bundle product into the new cart, showcasing all demo product details.

The cart now displays on desktop as a standard floating sidebar, making the overlay take up less space. The 'Start Checkout' Button is sticky aligned at the bottom of the layout, so you can start checking out at any time. We rebalanced font sizes, layout, and spacing of the cart for better overview.

The new sidebar layout is enabled by default but is easy to customize to be used in traditional bottom drawer display. You can try the new sidebar cart layout in the regular GraphCommerce demo by adding a product to the cart.

Add Algolia Search to Your GraphCommerce Magento Headless Frontend

For many headless Magento webshops, the default GraphCommerce search function (Search - GraphCommerce®) offers sufficient speed and features for searching products by (parts of) product name, description, and for example specifications.

The default Magento search implementation in GraphCommerce is sufficient enough for most stores

However, for webshops that have higher demands on their search function, this latest version of GraphCommerce can be expanded with an optional Algolia Search package. This package integrates the super-fast external search service Algolia, allowing visitors to search through the range of products, categories, and pages even faster.

Using this service requires the installation of the official Algolia Instant Search Magento 2 module, installation of the GraphCommerce Package, and a number of additional installation steps.

This package is offered as optional. Please note that it is still in development and therefore experimental. For more information, refer to the documentation of the Algolia package.

Updated Packages

This version of GraphCommerce updates packages to the latest versions:

• next
• @apollo/client
• react-hook-form
• @emotion/*
• @lingui/*
• @mui/*

and others

Enhancements

We made improvements for multi-website support, Hygraph CLI for schema migrations, improvements in checkout stability, OpenGraph meta tags for all pages, function-plugins, service worker enhancements, Apollo Cache improvements, and German translations.

Fixed Issues

We've addressed issues related to customer session management, cross-browser compatibility, PayPal, Magento redirects, overlays, and many others.

Release Notes

For a complete overview of changes, check the Full GraphCommerce 7.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 7.0.0 by following the guide: Upgrading step by step