3.13 -> 3.14

This page lists the highlights for upgrading a project from Front-Commerce 3.13 to 3.14

Update dependencies

Update all your @front-commerce/* dependencies to this version:

pnpm update "@front-commerce/*@3.14.0"

Automated Migration

We provide a codemod to automatically update your codebase to the latest version of Front-Commerce. This tool will update your code when possible and flag the places where you need to manually update your code (with // TODO Codemod comments).

pnpm run front-commerce migrate --transform 3.14.0

Manual Migration

Product Item Swatches Feature

This release introduces the ability to display swatches directly in product overview pages (product listings), allowing customers to see and switch between product variants without navigating to the product detail page.

GraphQL Fragment Updates

If you have customized the ProductItemFragment.gql, you need to update it to include the new configuration fields:

theme/modules/ProductView/ProductItem/ProductItemFragment.gql file

diff --git a/theme/modules/ProductView/ProductItem/ProductItemFragment.gql b/theme/modules/ProductView/ProductItem/ProductItemFragment.gql
index 1d24f320a9..873c57a6c3 100644
--- a/theme/modules/ProductView/ProductItem/ProductItemFragment.gql
+++ b/theme/modules/ProductView/ProductItem/ProductItemFragment.gql
@@ -2,7 +2,7 @@
 #import "./ProductItemActions/ProductItemActionsFragment.gql"
 #import "./ProductLabel/ProductLabelFragment.gql"

-fragment ProductItemFragment on Product {
+fragment ProductItemBaseFragment on Product {
   imageUrl
   canonicalCategory {
     id
@@ -11,3 +11,25 @@ fragment ProductItemFragment on Product {
   ...ProductOverviewFragment
   ...ProductItemActionsFragment
 }
+
+fragment ProductItemConfigurationFragment on ProductConfiguration {
+  product {
+    ...ProductItemBaseFragment
+  }
+  configuration {
+    attribute_id
+    code
+    value
+    swatch {
+      type
+      value
+    }
+  }
+}
+
+fragment ProductItemFragment on Product {
+  ...ProductItemBaseFragment
+  configurations {
+    ...ProductItemConfigurationFragment
+  }
+}

Component Updates

If you have customized the ProductItem.jsx component, you need to integrate the swatch functionality:

theme/modules/ProductView/ProductItem/ProductItem.jsx file updates

diff --git a/theme/modules/ProductView/ProductItem/ProductItem.jsx b/theme/modules/ProductView/ProductItem/ProductItem.jsx
index 3bfc2ff8ce..37a006813f 100644
--- a/heme/modules/ProductView/ProductItem/ProductItem.jsx
+++ b/theme/modules/ProductView/ProductItem/ProductItem.jsx
@@ -5,10 +5,19 @@ import ProductLabel from "theme/modules/ProductView/ProductItem/ProductLabel";
 import "theme/modules/ProductView/ProductItem/ProductItem.scss";
 import ProductItemActions from "theme/modules/ProductView/ProductItem/ProductItemActions";
 import StorefrontContent from "theme/modules/StorefrontContent";
+import { useSwatchGroup } from "./useSwatchGroup";
+import Swatches from "theme/components/organisms/Configurator/OptionPicker/Swatches";

 const ProductItem = (props) => {
+  const {
+    selectedProduct,
+    swatchGroup,
+    currentSwatchValue,
+    handleSwatchChange,
+  } = useSwatchGroup(props.product);
+
   return (
-    <StorefrontContent type="Product" id={props.product.sku}>
+    <StorefrontContent type="Product" id={selectedProduct.sku}>
       <div
         itemProp={props.itemProp}
         itemScope
@@ -17,9 +26,8 @@ const ProductItem = (props) => {
       >
         <div className="product-item__image">
           <Image
-            itemProp="image"
-            src={props.product.imageUrl}
-            alt={props.product.name}
+            src={selectedProduct.imageUrl}
+            alt={selectedProduct.name}
             format="small"
             appearance="full"
             sizes={props.imageSizes}
@@ -28,21 +36,37 @@ const ProductItem = (props) => {
         </div>

         <div className="product-item__label">
-          <ProductLabel product={props.product} />
+          <ProductLabel product={selectedProduct} />
         </div>

         <div className="product-item__overview">
           <ProductOverview
-            product={props.product}
+            product={selectedProduct}
             products={props.products}
             breadcrumb={props.breadcrumb}
-            location={props.location}
             index={props.index}
           />
         </div>
+
         <div className="product-item__actions">
-          <ProductItemActions product={props.product} />
+          <ProductItemActions
+            product={selectedProduct}
+            sku={selectedProduct.sku}
+          />
         </div>
+
+        {swatchGroup && swatchGroup.options.length > 1 && (
+          <div className="product-item__swatches">
+            <Swatches
+              label=""
+              value={currentSwatchValue}
+              options={swatchGroup.options}
+              name={`swatches-${props.product.sku}-${swatchGroup.attributeId}`}
+              onChange={handleSwatchChange}
+            />
+          </div>
+        )}
+
         <meta itemProp="category" content={props.categoryName} />
       </div>
     </StorefrontContent>

The key changes include:

• Import the useSwatchGroup hook and Swatches component
• Use the hook to get the selected product variant
• Render the swatches component when multiple options are available

Refer to the Product Item Swatches guide for detailed implementation instructions.