make recommendations clickable

https://coveord.atlassian.net/browse/KIT-3446
coveo · Aug 26, 2024 · 83467f6 · 83467f6
1 parent a352fdf
commit 83467f6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 80 deletions.
diff --git a/packages/samples/headless-ssr-commerce/app/_components/product-page.tsx b/packages/samples/headless-ssr-commerce/app/_components/product-page.tsx
diff --git a/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx b/packages/samples/headless-ssr-commerce/app/_components/recommendation-list.tsx
@@ -1,7 +1,9 @@
 import {
+  Product,
   Recommendations as RecommendationsController,
   RecommendationsState,
 } from '@coveo/headless/ssr-commerce';
+import {useRouter} from 'next/navigation';
 import {useEffect, useState, FunctionComponent} from 'react';
 
 interface RecommendationsProps {
@@ -15,22 +17,35 @@ export const Recommendations: FunctionComponent<RecommendationsProps> = ({
 }) => {
   const [state, setState] = useState(staticState);
 
+  const router = useRouter();
+
   useEffect(
     () => controller?.subscribe(() => setState({...controller.state})),
     [controller]
   );
 
+  const onProductClick = (product: Product) => {
+    controller?.interactiveProduct({options: {product}}).select();
+    router.push(
+      `/products/${product.ec_product_id}?name=${product.ec_name}&price=${product.ec_price}`
+    );
+  };
+
   return (
     <>
-      <h3>{state.headline}</h3>
-      <ul className="product-list">
+      <ul>
+        <h3>{state.headline}</h3>
         {state.products.map((product) => (
           <li key={product.ec_product_id}>
-            <h3>{product.ec_name}</h3>
+            <button
+              disabled={!controller}
+              onClick={() => onProductClick(product)}
+            >
+              {product.ec_name}
+            </button>
           </li>
         ))}
       </ul>
-      <br />
     </>
   );
 };
diff --git a/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts b/packages/samples/headless-ssr-commerce/app/_lib/commerce-engine-config.ts
@@ -46,11 +46,6 @@ export default {
         slotId: 'd73afbd2-8521-4ee6-a9b8-31f064721e73',
       },
     }),
-    doNotRefresh: defineRecommendations({
-      options: {
-        slotId: 'xxx--xxx-xxx-xxxx',
-      },
-    }),
     popularBoughtRecs: defineRecommendations({
       options: {
         slotId: 'af4fb7ba-6641-4b67-9cf9-be67e9f30174',

diff --git a/packages/samples/headless-ssr-commerce/app/page.tsx b/packages/samples/headless-ssr-commerce/app/page.tsx