diff --git a/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx b/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx index 83118b26dbd..37b5d7d8dda 100644 --- a/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx +++ b/packages/samples/headless-ssr-commerce/app/products/[productId]/page.tsx @@ -1,5 +1,6 @@ import * as externalCartAPI from '@/actions/external-cart-api'; import ContextDropdown from '@/components/context-dropdown'; +import ProductViewer from '@/components/product-viewer'; import { RecommendationProvider, StandaloneProvider, @@ -64,7 +65,9 @@ export default async function ProductDescriptionPage({ const resolvedSearchParams = await searchParams; const price = Number(resolvedSearchParams.price) ?? NaN; - const name = resolvedSearchParams.name ?? params.productId; + const name = Array.isArray(resolvedSearchParams.name) + ? params.productId + : (resolvedSearchParams.name ?? params.productId); return ( Product description page +

{name} ({params.productId}) - ${price}

diff --git a/packages/samples/headless-ssr-commerce/components/product-viewer.tsx b/packages/samples/headless-ssr-commerce/components/product-viewer.tsx new file mode 100644 index 00000000000..50f24b0a67f --- /dev/null +++ b/packages/samples/headless-ssr-commerce/components/product-viewer.tsx @@ -0,0 +1,24 @@ +'use client'; + +import {useProductView} from '@/lib/commerce-engine'; +import {useEffect} from 'react'; + +interface Product { + productId: string; + name: string; + price: number; +} + +export default function ProductViewer({productId, name, price}: Product) { + const {methods} = useProductView(); + let productViewEventEmitted = false; + + useEffect(() => { + if (methods && !productViewEventEmitted) { + methods?.view({productId, name, price}); + productViewEventEmitted = true; + } + }, []); + + return null; +}