Version: next

3.12 -> 3.13

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

Update dependencies

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

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

Manual Migration

Recommendations Extension Points Migration

In this release, the way product recommendations are integrated into the theme has changed. Recommendations are now exposed as extension features using the new recommendations feature key, and are consumed in the theme via the useExtensionComponentMap("recommendations") hook.

What Changed?

Registration: Recommendations widgets are now registered in the extension using hooks.registerFeature("recommendations", { ... }) in your extension's index.ts (see below).
Consumption: Theme files now use useExtensionComponentMap("recommendations") to access and render the registered recommendation widgets.
Overrides: If you have overridden any of the following files, you must update them to use the new pattern:
- theme/pages/Cart/Cart.jsx
- theme/pages/Product/Product.jsx
- theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx

Updating Theme Overrides

If you have overridden any of the following files, you must update them to use the new recommendations feature map.

theme/pages/Cart/Cart.jsx

diff --git a/theme/pages/Cart/Cart.jsx b/theme/pages/Cart/Cart.jsx
index bbcfca11ca..894cd63fb0 100644
--- a/theme/pages/Cart/Cart.jsx
+++ b/theme/pages/Cart/Cart.jsx
@@ -4,14 +4,16 @@ import useCartTracking from "theme/modules/Cart/useCartTracking";
import CartAlerts from "theme/modules/Cart/CartAlerts";
import CartTitle from "theme/modules/Cart/CartTitle";
import CartFooter from "theme/modules/Cart/CartFooter";
-import CrossSells from "theme/modules/Cart/CrossSells";
import Stack from "theme/components/atoms/Layout/Stack";

import "theme/pages/Cart/Cart.scss";
+import { useExtensionComponentMap } from "@front-commerce/core/react";

const CartWithMessages = (props) => {
  useCartTracking(props.cart);

+  const Recommendations = useExtensionComponentMap("recommendations");
+
  return (
    <Fragment>
      <div className="page-content">
@@ -25,11 +27,11 @@ const CartWithMessages = (props) => {
            </Stack>
          </div>

-          {props.cart &&
-            props.cart.crosssells &&
-            props.cart.crosssells.length > 0 && (
-              <CrossSells key="crossells" products={props.cart.crosssells} />
-            )}
+          {Recommendations.CartCrossSells && (
+            <Recommendations.CartCrossSells
+              products={props.cart?.crosssells || []}
+            />
+          )}
        </Stack>
      </div>
    </Fragment>

theme/pages/Product/Product.jsx

diff --git a/theme/pages/Product/Product.jsx b/theme/pages/Product/Product.jsx
index e6bb42c23c..0d4d41ad75 100644
--- a/theme/pages/Product/Product.jsx
+++ b/theme/pages/Product/Product.jsx
@@ -1,24 +1,22 @@
+import { useExtensionComponentMap } from "@front-commerce/core/react";
+import { useTrackPage } from "@front-commerce/remix/react";
import { useState } from "react";
-import Upsells from "theme/modules/ProductList/Upsells";
+import Stack from "theme/components/atoms/Layout/Stack";
import ProductAddedPopIn from "theme/modules/ProductAddedPopIn";
-import RelatedProducts from "theme/modules/ProductList/RelatedProducts";
-import ProductBreadcrumb from "theme/modules/ProductView/ProductBreadcrumb/ProductBreadcrumb";
import ProductView from "theme/modules/ProductView";
-import Stack from "theme/components/atoms/Layout/Stack";
+import ProductBreadcrumb from "theme/modules/ProductView/ProductBreadcrumb/ProductBreadcrumb";
import ProductDescription, {
  hasDescription,
} from "theme/modules/ProductView/ProductDescription";
+import useProductTracking from "theme/modules/ProductView/useProductTracking";
import usePublishProductReviewModal, {
  hasPublishProductReview,
} from "theme/modules/Reviews/PublishProductReview/usePublishProductReviewModal";
+import StorefrontContent from "theme/modules/StorefrontContent";
import {
  PRODUCT_VIEW_IMAGE_SIZES,
  PRODUCT_VIEW_THUMB_SIZES,
-  RELATED_PRODUCTS_IMAGE_SIZES,
} from "theme/pages/Product/ProductConstants";
-import StorefrontContent from "theme/modules/StorefrontContent";
-import useProductTracking from "theme/modules/ProductView/useProductTracking";
-import { useTrackPage } from "@front-commerce/remix/react";

const Product = (props) => {
  const [publishProductReviewModal] = usePublishProductReviewModal(
@@ -28,6 +26,8 @@ const Product = (props) => {
  useProductTracking(props.product);
  useTrackPage("Product");

+  const Recommendations = useExtensionComponentMap("recommendations");
+
  return (
    <StorefrontContent type="Product" id={props.product.sku} scope="page">
      <div
@@ -57,18 +57,9 @@ const Product = (props) => {
                <ProductDescription product={props.product} />
              </div>
            )}
-            {props.product.related && props.product.related.length > 0 && (
-              <RelatedProducts
-                products={props.product.related}
-                imageSizes={RELATED_PRODUCTS_IMAGE_SIZES}
-                prioritizeTop={0}
-              />
-            )}
-            {props.product.upsells && props.product.upsells.length > 0 && (
-              <Upsells
-                loading={props.loading}
-                products={props.product.upsells}
-              />
+
+            {Recommendations.ProductPage && (
+              <Recommendations.ProductPage product={props.product} />
            )}
          </Stack>
        </div>

theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx

diff --git a/theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx b/theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx
index 4305f8f228..fb8a99226a 100644
--- a/theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx
+++ b/theme/modules/ProductAddedPopIn/ProductAddedPopInContent.jsx
@@ -1,8 +1,9 @@
import ProductAddedPopInBody from "theme/modules/ProductAddedPopIn/ProductAddedPopInBody";
-import ProductAddedPopInCrosssells from "theme/modules/ProductAddedPopIn/ProductAddedPopInCrosssells";
import AddToCartError from "theme/modules/ProductAddedPopIn/AddToCartError";
+import { useExtensionComponentMap } from "@front-commerce/core/react";

const ProductAddedPopInContent = (props) => {
+  const Reccomendations = useExtensionComponentMap("recommendations");
  return (
    <div className="product-added">
      <AddToCartError />
@@ -12,7 +13,11 @@ const ProductAddedPopInContent = (props) => {
        prices={props.product.prices}
        imageUrl={props.product.imageUrl}
      />
-      <ProductAddedPopInCrosssells products={props.product.crosssells} />
+      {Reccomendations.ProductAddedPopInCrosssells && (
+        <Reccomendations.ProductAddedPopInCrosssells
+          products={props.product.crosssells}
+        />
+      )}
    </div>
  );
};

Update dependencies​

Manual Migration​

Recommendations Extension Points Migration​

What Changed?​

Updating Theme Overrides​

Additional Resources​

Update dependencies

Manual Migration

Recommendations Extension Points Migration

What Changed?

Updating Theme Overrides

Additional Resources