Upsell & Cross-sell

Integrate Fast Simon's Upsell & Cross-sell features into your Catalyst storefront to display personalized product recommendations on your product pages.

---

Step 1: Fetch Upsell & Cross-sell Products

1. Locate the File:
   Navigate to your product page file:
   core/app/[locale]/(default)/product/[slug]/page.tsx

2. Add the Following Functions:
   Insert these functions to fetch and transform recommendation data using the Fast Simon SDK:

   const getFastSimonRelatedResponse = cache(async (props: Props) => {
     const fastSimon = await getFastSimon();
     const { slug } = await props.params;
   
     // Specify your widget IDs from the Fast Simon dashboard.
     const widgetIds = ['17430823976238023'];
   
     return await fastSimon.getRecommendations({
       widgetIds,
       productId: slug,
     });
   });
   
   const getFastSimonRelatedProducts = async (props: Props) => {
     const recommendationsResponse = await getFastSimonRelatedResponse(props);
   
     return FastSimonDataTransformer.parseFastSimonAutocompleteProducts(
      recommendationsResponse.widget_responses[0]?.products || [],
     );
   };

Explanation:

• getFastSimonRelatedResponse: Calls the Fast Simon API with your widget IDs and the current product ID (derived from the slug).
• getFastSimonRelatedProducts: Transforms the raw response using your data transformer utility (here using parseFastSimonAutocompleteProducts) to return a product array suitable for your storefront.

---

Step 2: Integrate Recommendations Data into Your UI

1. Update Your Product Page Component: Locate the section where your product page renders related products (for example, within a carousel or grid).
2. Replace the Existing Function Call: Replace calls to the old getRelatedProducts function with the new getFastSimonRelatedProducts:

   <FeaturedProductsCarousel
    cta={{ label: t('RelatedProducts.cta'), href: '/shop-all' }}
    emptyStateSubtitle={t('RelatedProducts.browseCatalog')}
    emptyStateTitle={t('RelatedProducts.noRelatedProducts')}
    nextLabel={t('RelatedProducts.nextProducts')}
    previousLabel={t('RelatedProducts.previousProducts')}
    products={getFastSimonRelatedProducts(props)}
    scrollbarLabel={t('RelatedProducts.scrollbar')}
    title={t('RelatedProducts.title')}
   />

---

Key Concepts

• API-Driven Recommendations: Use the getRecommendations method from the Fast Simon SDK to fetch personalized product suggestions based on widget IDs and the current product context.
• Data Transformation: Transform the raw API response with your transformer utility (FastSimonDataTransformer.parseFastSimonAutocompleteProducts) to convert data into a format that works with your custom components.
• Custom UI Implementation: With the removal of bundled UI components in the new SDK, focus on integrating the fetched data with your own or third-party UI components for maximum flexibility and design consistency.

---

By following these steps, you'll be able to integrate Fast Simon's Upsell & Cross-sell functionality into your Catalyst storefront, providing tailored product recommendations to enhance the shopping experience.