Add to cart

Author: w3bdesign

src/components/Cart/CartContents.component.tsx

@@ -119,12 +119,20 @@ const CartContents = () => {
 
                       // Optimistically update local state
                       if (cart) {
+                        const oldProduct = cart.products.find((p: Product) => p.cartKey === item.key);
+                        const oldQty = oldProduct?.qty || 0;
                         const updatedProducts = cart.products.map((p: Product) => 
                           p.cartKey === item.key ? { ...p, qty: newQty } : p
                         );
+                        
+                        // Calculate new total count
+                        const qtyDiff = newQty - oldQty;
+                        const newTotalCount = cart.totalProductsCount + qtyDiff;
+                        
                         setCart({
                           ...cart,
                           products: updatedProducts,
+                          totalProductsCount: newTotalCount
                         });
                       }
 

src/components/Product/AddToCart.component.tsx

@@ -92,7 +92,7 @@ const AddToCart = ({
   variationId,
   fullWidth = false,
 }: IProductRootObject) => {
-  const { setCart, isLoading: isCartLoading } = useCartStore();
+  const { cart, setCart, isLoading: isCartLoading } = useCartStore();
   const [requestError, setRequestError] = useState<boolean>(false);
 
   const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -124,6 +124,21 @@ const AddToCart = ({
   });
 
   const handleAddToCart = () => {
+    // Optimistically update cart count
+    if (cart) {
+      setCart({
+        ...cart,
+        totalProductsCount: cart.totalProductsCount + 1,
+        products: [...cart.products]
+      });
+    } else {
+      setCart({
+        products: [],
+        totalProductsCount: 1,
+        totalProductsPrice: 0
+      });
+    }
+    
     addToCart();
   };