docs(headless): fix cart implementation when adding same item twice

packages/samples/headless-ssr-commerce/actions/external-cart-api.ts

@@ -30,7 +30,14 @@ export async function getCart(): Promise<CartItem[]> {
 
 export async function addItemToCart(newItem: CartItem): Promise<CartItem[]> {
   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;
 }

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() {
           <button onClick={() => clickProduct(product)}>
             {product.ec_name} ({product.ec_product_id})
           </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
+          <button onClick={() => addToCart(cartMethods!, cartState, product)}>
             Add to cart
           </button>
         </li>

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}
             />
           </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
-            Add to cart
-          </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
+          <button onClick={() => addToCart(cartMethods!, cartState, product)}>
             Add to cart
           </button>
         </li>

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<HeadlessCart, 'state' | 'subscribe'>;
@@ -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);