docs(headless-ssr-commerce-samples): add multiple listing pages

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,31 @@ 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';
+
+//TODO: add comments
+const categoryMap: {[key: string]: string} = {
+  'surf-accessories': 'surf-accessories',
+  'accessories/towels': 'accessories-towels',
+  'clothing/pants': 'clothing-pants',
+};
 
 /**
  * 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 = Object.keys(categoryMap).find(
+    (key: string) => categoryMap[key] === 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 +46,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/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={'/accessories-towels'}>Listing Page Towels</Link>
+          <Link href={'/clothing-pants'}>Listing Page Pants</Link>
           <Link href={'/cart'}>Cart Page</Link>
         </div>
         {children}

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/browse/search',
+        },
+      },
+    },
   });
+
   return (
     <SearchProvider
       staticState={staticState}

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() {
@@ -27,6 +28,12 @@ export default function ProductList() {
             onClick={() => onProductClick(product)}
           >
             {product.ec_name}
+            <Image
+              src={product.ec_images[0]}
+              alt={product.ec_name!}
+              width={50}
+              height={50}
+            />
           </button>
           <button onClick={() => addToCart(cartController!, product)}>
             Add to cart

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

@@ -31,14 +31,6 @@ type CommerceEngineConfig = CommerceEngineDefinitionOptions<
 export default {
   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,9 @@ const nextConfig = {
       },
     ];
   },
+  images: {
+    domains: ['images.barca.group'],
+  },
 };
 
 export default nextConfig;