Display Recommendations

Learn how to display Netup recommendations in different parts of your application using the PublishingZone component.

Prerequisites

Before displaying recommendations, ensure you have:

• Configured the Netup extension in your Front-Commerce application
• Set up the React components with the NetupProvider
• Configured analytics for tracking and recommendation generation

Using the PublishingZone Component

Use the PublishingZone component to display recommendations in different parts of your application:

app/pages/Home/Home.tsx

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

export default function HomePage() {
  return (
    <div>
      <h1>Welcome</h1>
      <PublishingZone type={PublishingZoneTypeEnum.homePage} />
    </div>
  );
}

info

The PublishingZone is automatically added to relevant pages in the theme-chocolatine theme:

• Product Page
• Product Added Pop-in
• Category Page
• Cart Page

Available Publishing Zone Types

The extension supports the following recommendation zones:

Zone Type	Description	Use Case
PublishingZoneTypeEnum.homePage	Home page recommendations	Featured products, trending items
PublishingZoneTypeEnum.productPage	Product page recommendations	Related products, upsells
PublishingZoneTypeEnum.categoryPage	Category page recommendations	Related categories, featured products
PublishingZoneTypeEnum.cartPage	Cart page recommendations	Add-on products, alternatives
PublishingZoneTypeEnum.productAddedPopInCrosssells	Cross-sell recommendations	Complementary products after adding to cart

Zone Configuration by Platform

Gezy

For Gezy-based stores, the extension comes with pre-configured publishing zones:

Zone ID	Type	Description
ZH1	homePage	Home page recommendations
ZP1, ZP2	productPage	Product page recommendations
ZC1	cartPage	Cart page recommendations
ZP3	productAddedPopInCrosssells	Cross-sell popup recommendations
ZPL1, ZPL2	categoryPage	Category page recommendations

Displaying Multiple Zone Types

You can display multiple recommendation zones on the same page:

app/pages/Product/Product.tsx

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

export default function ProductPage({ product }) {
  return (
    <div>
      <ProductDetails product={product} />

      {/* Related products */}
      <section>
        <h2>You might also like</h2>
        <PublishingZone type={PublishingZoneTypeEnum.productPage} />
      </section>
    </div>
  );
}

Conditional Rendering

You can conditionally render recommendations based on data availability:

app/components/ConditionalRecommendations.tsx

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

export default function ConditionalRecommendations() {
  const { recommendations } = useNetup();
  const hasRecommendations = recommendations.length > 0;

  if (!hasRecommendations) {
    return <div>Loading recommendations...</div>;
  }

  return (
    <section>
      <h2>Recommended for you</h2>
      <PublishingZone type={PublishingZoneTypeEnum.homePage} />
    </section>
  );
}

Alternative Setup Methods

Using Theme Overrides

If you prefer not to modify individual page components, you can wrap the layout component using theme overrides:

theme/layouts/GenericLayout.tsx

import { NetupProvider } from "@front-commerce/netup/react";
import OriginalGenericLayout from "@front-commerce/theme-chocolatine/theme/layouts/GenericLayout";

export default function GenericLayout(props) {
  return (
    <NetupProvider>
      <OriginalGenericLayout {...props} />
    </NetupProvider>
  );
}

This approach automatically enables recommendations across all pages without individual component modifications.

Troubleshooting Display Issues

Recommendations Not Appearing

1. Check Provider Setup: Ensure NetupProvider wraps your components
2. Verify Configuration: Confirm FRONT_COMMERCE_NETUP_SLUG is set correctly
3. Check Analytics: Make sure the analytics plugin is loaded and tracking events
4. Debug Mode: Enable debug logging with window.wsb.debugOn() in the browser console

Empty Recommendation Zones

• Data Availability: Recommendations may take time to generate based on user behavior
• Zone Configuration: Verify the publishing zones are properly configured in your backend
• Content Filtering: Check if content filtering is excluding recommendations