docs(headless): add multiple listing pages in headless-ssr-commerce (#…

…4635)

https://coveord.atlassian.net/browse/KIT-3707

---------

Co-authored-by: ylakhdar <ylakhdar@coveo.com>

packages/headless/src/controllers/commerce/context/headless-context.ssr.ts

@@ -1,8 +1,7 @@
-import {UniversalControllerDefinitionWithoutProps} from '../../../app/commerce-ssr-engine/types/common.js';
+import {UniversalControllerDefinitionWithProps} from '../../../app/commerce-ssr-engine/types/common.js';
 import {
   Context,
   buildContext,
-  ContextProps,
   ContextOptions,
   View,
   UserLocation,
@@ -12,7 +11,7 @@ export type {ContextState, Context, ContextProps} from './headless-context.js';
 export type {View, UserLocation, ContextOptions};
 
 export interface ContextDefinition
-  extends UniversalControllerDefinitionWithoutProps<Context> {}
+  extends UniversalControllerDefinitionWithProps<Context, ContextOptions> {}
 
 /**
  * Defines a `Context` controller instance.
@@ -22,11 +21,11 @@ export interface ContextDefinition
  *
  * @internal
  */
-export function defineContext(props: ContextProps = {}): ContextDefinition {
+export function defineContext(): ContextDefinition {
   return {
     listing: true,
     search: true,
     standalone: true,
-    build: (engine) => buildContext(engine, props),
+    buildWithProps: (engine, props) => buildContext(engine, {options: props}),
   };
 }

packages/samples/headless-ssr-commerce/app/listing/page.tsx → packages/samples/headless-ssr-commerce/app/(listing)/[category]/page.tsx

@@ -12,13 +12,24 @@ import Summary from '@/components/summary';
 import {listingEngineDefinition} from '@/lib/commerce-engine';
 import {NextJsNavigatorContext} from '@/lib/navigatorContextProvider';
 import {headers} from 'next/headers';
+import {notFound} from 'next/navigation';
 
+// This is a hardcoded list of categories that are available in my coveo merchandising hub.
+const categoryList = ['surf-accessories', 'paddleboards', 'toys'];
 /**
  * This file defines a List component that uses the Coveo Headless SSR commerce library to manage its state.
  *
  * The Listing function is the entry point for server-side rendering (SSR).
  */
-export default async function Listing() {
+export default async function Listing({params}: {params: {category: string}}) {
+  const {category} = params;
+
+  const matchedCategory = categoryList.find((c) => c === category);
+
+  if (!matchedCategory) {
+    notFound();
+  }
+
   // Sets the navigator context provider to use the newly created `navigatorContext` before fetching the app static state
   const navigatorContext = new NextJsNavigatorContext(headers());
   listingEngineDefinition.setNavigatorContextProvider(() => navigatorContext);
@@ -28,7 +39,17 @@ export default async function Listing() {
 
   // Fetches the static state of the app with initial state (when applicable)
   const staticState = await listingEngineDefinition.fetchStaticState({
-    controllers: {cart: {initialState: {items}}},
+    controllers: {
+      cart: {initialState: {items}},
+      context: {
+        language: 'en',
+        country: 'US',
+        currency: 'USD',
+        view: {
+          url: `https://sports.barca.group/browse/promotions/${matchedCategory}`,
+        },
+      },
+    },
   });
 
   return (

packages/samples/headless-ssr-commerce/app/cart/page.tsx

@@ -15,7 +15,17 @@ export default async function Search() {
 
   // Fetches the static state of the app with initial state (when applicable)
   const staticState = await searchEngineDefinition.fetchStaticState({
-    controllers: {cart: {initialState: {items}}},
+    controllers: {
+      cart: {initialState: {items}},
+      context: {
+        language: 'en',
+        country: 'US',
+        currency: 'USD',
+        view: {
+          url: 'https://sports.barca.group/cart',
+        },
+      },
+    },
   });
 
   return (

packages/samples/headless-ssr-commerce/app/layout.tsx

@@ -12,7 +12,9 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
         <h1>Coveo Headless Commerce Next.js</h1>
         <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
           <Link href={'/search'}>Search Page</Link>
-          <Link href={'/listing'}>Listing Page</Link>
+          <Link href={'/surf-accessories'}>Listing Page Surf</Link>
+          <Link href={'/paddleboards'}>Listing Page Paddleboards</Link>
+          <Link href={'/toys'}>Listing Page Toys</Link>
           <Link href={'/cart'}>Cart Page</Link>
         </div>
         {children}

packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx

@@ -19,7 +19,17 @@ export default async function ProductDescriptionPage({
 
   // Fetches the static state of the app with initial state (when applicable)
   const staticState = await searchEngineDefinition.fetchStaticState({
-    controllers: {cart: {initialState: {items}}},
+    controllers: {
+      cart: {initialState: {items}},
+      context: {
+        language: 'en',
+        country: 'US',
+        currency: 'USD',
+        view: {
+          url: `https://sports.barca.group/products/${params.productId}`,
+        },
+      },
+    },
   });
   return (
     <>

packages/samples/headless-ssr-commerce/app/search/page.tsx

@@ -22,8 +22,19 @@ export default async function Search() {
 
   // Fetches the static state of the app with initial state (when applicable)
   const staticState = await searchEngineDefinition.fetchStaticState({
-    controllers: {cart: {initialState: {items}}},
+    controllers: {
+      cart: {initialState: {items}},
+      context: {
+        language: 'en',
+        country: 'US',
+        currency: 'USD',
+        view: {
+          url: 'https://sports.barca.group/search',
+        },
+      },
+    },
   });
+
   return (
     <SearchProvider
       staticState={staticState}

packages/samples/headless-ssr-commerce/components/pages/product-page.tsx

@@ -41,6 +41,7 @@ export default function ProductPage(props: IProductPageProps) {
           cart: {
             initialState: {items: staticState.controllers.cart.state.items},
           },
+          context: staticState.controllers.context.state,
         },
       })
       .then(({engine, controllers}) => {

packages/samples/headless-ssr-commerce/components/product-list.tsx

@@ -3,6 +3,7 @@
 import {useCart, useProductList} from '@/lib/commerce-engine';
 import {addToCart} from '@/utils/cart';
 import {Product} from '@coveo/headless-react/ssr-commerce';
+import Image from 'next/image';
 import {useRouter} from 'next/navigation';
 
 export default function ProductList() {
@@ -24,6 +25,15 @@ export default function ProductList() {
         <li key={product.ec_product_id}>
           <button disabled={!methods} onClick={() => onProductClick(product)}>
             {product.ec_name}
+            <Image
+              src={product.ec_images[0]}
+              alt={product.ec_name!}
+              width={50}
+              height={50}
+            />
+          </button>
+          <button onClick={() => addToCart(cartMethods!, product)}>
+            Add to cart
           </button>
           <button onClick={() => addToCart(cartMethods!, product)}>
             Add to cart

packages/samples/headless-ssr-commerce/components/providers/listing-provider.tsx

@@ -33,6 +33,7 @@ export default function ListingProvider({
           cart: {
             initialState: {items: staticState.controllers.cart.state.items},
           },
+          context: staticState.controllers.context.state,
         },
       })
       .then(({engine, controllers}) => {

packages/samples/headless-ssr-commerce/components/providers/search-provider.tsx

@@ -33,6 +33,7 @@ export default function SearchProvider({
           cart: {
             initialState: {items: staticState.controllers.cart.state.items},
           },
+          context: staticState.controllers.context.state,
         },
       })
       .then(({engine, controllers}) => {

packages/samples/headless-ssr-commerce/lib/commerce-engine-config.ts

@@ -33,14 +33,6 @@ export default {
   // loggerOptions: {level: 'debug'},
   configuration: {
     ...getSampleCommerceEngineConfiguration(),
-    context: {
-      language: 'en',
-      country: 'US',
-      currency: 'USD',
-      view: {
-        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing',
-      },
-    },
   },
   controllers: {
     summary: defineSummary(),

packages/samples/headless-ssr-commerce/next.config.mjs

@@ -9,6 +9,16 @@ const nextConfig = {
       },
     ];
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.barca.group',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;