Product recommendations

We provide a way to display product recommendations based on the user's behavior. This feature is powered by Coveo's AI and machine learning algorithms. It allows you to display personalized recommendations on your storefront. To enable this feature, you need to add standalone CoveoRecommendedProducts component somewhere in your application.

This is a two steps process:

Firstly, you need to add analytics for the Product Details Page. To do that, follow our Analytics guide.
Secondly, you need to use the CoveoRecommendedProducts component to display them.

Adding `CoveoRecommendedProducts` component

Let's say that you want to display product recommendations on the Product Details Page which is a very common use case. To do that, you need to add the CoveoRecommendedProducts component to the Product Details Page. Here is an example of how you can do that:

// storefront-unified-nextjs/components/recommended-products.tsx
import dynamic from 'next/dynamic'; // ...

const ProductSlider = dynamic(() => import('./product-slider')); import { CoveoRecommendedProducts } from '@/sf-modules/coveo'; 
export function RecommendedProducts() {
  // ...
  const { normalizedRecommendations } = usePopularViewedRecommendations({
    maxNumberOfRecommendations: 8,
  });

  return (
      // ...
      {<ProductSlider navigation="floating" products={products} />}       <CoveoRecommendedProducts navigation="floating" products={products} />     );
}

Then ProductSlider component that is used inside CoveoRecommendedProducts has to be modified.

// storefront-unified-nextjs/components/product-slider.tsx
import CoveoProductCardVertical from '@/sf-modules/coveo/components/coveo-product-card-vertical'; // ...
import ProductCardVertical from './product-card-vertical'; ; 
export default function ProductSlider({ direction, navigation, products, scrollSnap, scrollbar }: ProductSliderProps) {
  // ...
  const { normalizedRecommendations } = usePopularViewedRecommendations({
    maxNumberOfRecommendations: 8,
  });

  // ...
  return
    // ...
    <ProductCardVertical    <CoveoProductCardVertical      className={classNames('w-[148px] shrink-0 self-stretch md:w-[192px]', { 'snap-center': scrollSnap })}
      id={id}
      key={id + sku}
      link={{ params: { id, slug }, pathname: '/product/[slug]/[id]', query: { sku } }}
      oldPrice={price?.isDiscounted ? price?.regularPrice : undefined}      price={price}
      size="sm"
      slotImage={
}

At last we can add CoveoClientProvider inside product page

// storefront-unified-nextjs/components/product-slider.tsx
import { headers } from 'next/headers'; import CoveoClientProvider from '@/sf-modules/coveo/components/coveo-client-provider'; import { useCoveoSSR } from '@/sf-modules/coveo/hooks'; // ...

export default async function ProductDetailsPage({ params, searchParams }: ProductDetailsPageProps) {
  // ...
  const url = new URL(headers().get('x-current-path') as string);   const [coveoResult] = await Promise.all([useCoveoSSR(url)]);   const { staticState, updatedState: productCatalog } = coveoResult; 
  // ...
  return (
    <>    <CoveoClientProvider searchData={productCatalog} staticState={staticState}>      // ...
    </>    </CoveoClientProvider>  );
}