diff --git a/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts b/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts index a65d31bba9..78ab8884dd 100644 --- a/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts +++ b/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts @@ -30,7 +30,14 @@ export async function getCart(): Promise { export async function addItemToCart(newItem: CartItem): Promise { const cart = getCartFromCookies(); - cart.push(newItem); + const existingItem = cart.find( + (item) => item.productId === newItem.productId + ); + if (existingItem) { + existingItem.quantity += 1; + } else { + cart.push(newItem); + } setCartInCookies(cart); return cart; } diff --git a/packages/samples/headless-ssr-commerce/components/instant-product.tsx b/packages/samples/headless-ssr-commerce/components/instant-product.tsx index 458d817105..73d84a7987 100644 --- a/packages/samples/headless-ssr-commerce/components/instant-product.tsx +++ b/packages/samples/headless-ssr-commerce/components/instant-product.tsx @@ -7,7 +7,7 @@ export default function InstantProducts() { const router = useRouter(); const {state, methods} = useInstantProducts(); - const {methods: cartMethods} = useCart(); + const {state: cartState, methods: cartMethods} = useCart(); const clickProduct = (product: Product) => { methods?.interactiveProduct({options: {product}}).select(); @@ -24,7 +24,7 @@ export default function InstantProducts() { - diff --git a/packages/samples/headless-ssr-commerce/components/product-list.tsx b/packages/samples/headless-ssr-commerce/components/product-list.tsx index 95b04f491a..16859c3a8c 100644 --- a/packages/samples/headless-ssr-commerce/components/product-list.tsx +++ b/packages/samples/headless-ssr-commerce/components/product-list.tsx @@ -8,7 +8,7 @@ import {useRouter} from 'next/navigation'; export default function ProductList() { const {state, methods} = useProductList(); - const {methods: cartMethods} = useCart(); + const {state: cartState, methods: cartMethods} = useCart(); const router = useRouter(); @@ -32,10 +32,7 @@ export default function ProductList() { height={50} /> - - diff --git a/packages/samples/headless-ssr-commerce/utils/cart.ts b/packages/samples/headless-ssr-commerce/utils/cart.ts index 19fc9b245f..b443888e8c 100644 --- a/packages/samples/headless-ssr-commerce/utils/cart.ts +++ b/packages/samples/headless-ssr-commerce/utils/cart.ts @@ -3,6 +3,7 @@ import { Cart as HeadlessCart, CartItem as HeadlessCartItem, Product as HeadlessProduct, + CartState as HeadlessCartState, } from '@coveo/headless-react/ssr-commerce'; type HeadlessSSRCart = Omit; @@ -24,13 +25,18 @@ export async function adjustQuantity( export async function addToCart( headlessCart: HeadlessSSRCart, + headlessCartState: HeadlessCartState, product: HeadlessProduct ) { + const existingItem = headlessCartState.items.find( + (item) => item.productId === product.ec_product_id + ); + const quantity = existingItem ? existingItem.quantity + 1 : 1; const item = { name: product.ec_name!, price: product.ec_price!, productId: product.ec_product_id!, - quantity: 1, + quantity: quantity, }; headlessCart.updateItemQuantity(item);