.

Author: w3bdesign

src/components/Product/AddToCart.component.tsx

@@ -96,7 +96,7 @@ const AddToCart = ({
   variationId,
   fullWidth = false,
 }: IProductRootObject) => {
-  const { setCart } = useContext(CartContext);
+  const { updateCart } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
   const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -107,20 +107,14 @@ const AddToCart = ({
   };
 
   // Get cart data query
-  const { data, refetch } = useQuery(GET_CART, {
+  const { refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
-    onCompleted: () => {
-      // Update cart in the localStorage.
+    onCompleted: (data) => {
+      // Update cart in the localStorage and React Context.
       const updatedCart = getFormattedCart(data);
-
-      if (!updatedCart) {
-        return;
+      if (updatedCart) {
+        updateCart(updatedCart);
       }
-
-      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
-
-      // Update cart data in React Context.
-      setCart(updatedCart);
     },
   });
 
@@ -129,29 +123,33 @@ const AddToCart = ({
     variables: {
       input: productQueryInput,
     },
-
-    onCompleted: () => {
-      // Update the cart with new values in React context.
-      refetch();
+    onCompleted: (data) => {
+      // Immediately update the cart with new values
+      const updatedCart = getFormattedCart(data);
+      if (updatedCart) {
+        updateCart(updatedCart);
+      }
     },
-
     onError: () => {
       setRequestError(true);
     },
   });
 
-  const handleAddToCart = () => {
-    addToCart();
-    // Refetch cart after 2 seconds
-    setTimeout(() => {
-      refetch();
-    }, 2000);
+  const handleAddToCart = async () => {
+    try {
+      await addToCart();
+      // Refetch cart immediately after adding to cart
+      await refetch();
+    } catch (error) {
+      console.error('Error adding to cart:', error);
+      setRequestError(true);
+    }
   };
 
   return (
     <>
       <Button
-        handleButtonClick={() => handleAddToCart()}
+        handleButtonClick={handleAddToCart}
         buttonDisabled={addToCartLoading || requestError}
         fullWidth={fullWidth}
       >

src/stores/CartProvider.tsx

@@ -49,37 +49,44 @@ export type TRootObjectNull = RootObject | null | undefined;
 interface ICartContext {
   cart: RootObject | null | undefined;
   setCart: React.Dispatch<React.SetStateAction<TRootObjectNull>>;
+  updateCart: (newCart: RootObject) => void;
 }
 
 const CartState = {
   cart: null,
   setCart: () => {},
+  updateCart: () => {},
 };
 
 export const CartContext = createContext<ICartContext>(CartState);
 
 /**
  * Provides a global application context for the entire application with the cart contents
-
  */
 export const CartProvider = ({ children }: ICartProviderProps) => {
   const [cart, setCart] = useState<RootObject | null>();
 
   useEffect(() => {
     // Check if we are client-side before we access the localStorage
-    if (!process.browser) {
-      return;
-    }
-    const localCartData = localStorage.getItem('woocommerce-cart');
+    if (typeof window !== 'undefined') {
+      const localCartData = localStorage.getItem('woocommerce-cart');
 
-    if (localCartData) {
-      const cartData: RootObject = JSON.parse(localCartData);
-      setCart(cartData);
+      if (localCartData) {
+        const cartData: RootObject = JSON.parse(localCartData);
+        setCart(cartData);
+      }
     }
   }, []);
 
+  const updateCart = (newCart: RootObject) => {
+    setCart(newCart);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('woocommerce-cart', JSON.stringify(newCart));
+    }
+  };
+
   return (
-    <CartContext.Provider value={{ cart, setCart }}>
+    <CartContext.Provider value={{ cart, setCart, updateCart }}>
       {children}
     </CartContext.Provider>
   );