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 recommendedProducts component somewhere in your application.

This is a two steps process:

1. Firstly, you need to add analytics for the Product Details Page. To do that, follow our Analytics guide.
2. Secondly, you need to use the usePopularViewedRecommendations composable to get the recommendations and use the recommendedProducts component to display them.

Adding recommendedProducts 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 recommendedProducts component to the Product Details Page. Here is an example of how you can do that:

// components/RecommendedProducts/RecommendedProducts.tsx
import { usePopularViewedRecommendations } from '@sf-modules/coveo';  
export function RecommendedProducts() {
  // ...
  const { normalizedRecommendations } = usePopularViewedRecommendations({
    maxNumberOfRecommendations: 8,
  });

  return (
    <!-- ... -->
      <p data-testid="recommended-products-heading" className="my-4 text-lg font-headline-3">
        {/* {t('product:recommendedProducts')} */}
        Popular viewed
      </p>
      {!!normalizedRecommendations?.length && (         <ProductSlider products={normalizedRecommendations} navigation="floating" />      )}      <!-- ... -->
    );
}