Customize Recommendations Display

Learn how to create custom recommendation components and styling to match your application's design and requirements.

Prerequisites

Before customizing recommendations display, ensure you have:

• Set up the Netup extension in your Front-Commerce application
• Configured recommendation display using the basic PublishingZone component

Creating Custom Recommendation Components

You can create custom recommendation components to control exactly how recommendations are displayed.

warning

Netup Tracking Requirement When creating custom recommendation components, you MUST wrap each product item with NetupProductItemWrapper to ensure proper Netup tracking functionality.

app/components/CustomRecommendation.tsx

import { useCallback } from "react";
import {
  NetupRecommendationProps,
  NetupProductItemWrapper,
} from "@front-commerce/netup/react";
import ProductList from "theme/modules/ProductList/ProductList/ProductList";

export default function CustomRecommendation({
  recommendation,
}: NetupRecommendationProps) {
  // Create wrapper component that includes the publishing zone ID
  const WrapperWithZoneId = useCallback(
    ({ product, children }: { product: any; children: React.ReactNode }) => {
      return (
        <NetupProductItemWrapper
          product={product}
          zoneId={recommendation.publishingZoneId}
        >
          {children}
        </NetupProductItemWrapper>
      );
    },
    [recommendation.publishingZoneId]
  );

  return (
    <div className="my-custom-recommendations">
      <h3>{recommendation.json.catchphrase || "Recommended for you"}</h3>
      <ProductList
        skus={recommendation.json.products}
        ProductItemWrapper={WrapperWithZoneId}
      />
    </div>
  );
}

Then use it with the PublishingZone:

app/pages/Product/Product.tsx

import {
  PublishingZone,
  PublishingZoneTypeEnum,
} from "@front-commerce/netup/react";
import CustomRecommendation from "app/components/CustomRecommendation";

export default function ProductPage() {
  return (
    <div>
      <PublishingZone
        type={PublishingZoneTypeEnum.productPage}
        RecommendationComponent={CustomRecommendation}
      />
    </div>
  );
}