Merge pull request #824 from w3bdesign/develop

Fix bug with empty cart

Author: w3bdesign

components/Cart/AddToCartButton.component.jsx

@@ -36,7 +36,13 @@ const AddToCartButton = ({ product }) => {
     onCompleted: () => {
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
+
+      if (!updatedCart) {
+        return;
+      }
+
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+
       // Update cart data in React Context.
       setCart(updatedCart);
     },

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -23,6 +23,7 @@ const CartItemsContainer = () => {
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+
       // Update cart data in React Context.
       setCart(updatedCart);
     },

components/Checkout/CheckoutForm.component.jsx

@@ -28,6 +28,10 @@ const CheckoutForm = () => {
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+      console.log(
+        'setItem har blitt kalt med følgende data fra CheckoutForm: ',
+        JSON.stringify(updatedCart)
+      );
       // Update cart data in React Context.
       setCart(updatedCart);
     },

package-lock.json

@@ -23,8 +23,8 @@
     "next": "^12.1.6",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.13",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^7.30.0",
     "react-instantsearch-dom": "^6.24.1",
     "react-spring": "8.0.27",

package.json

@@ -13,7 +13,9 @@ export const AppProvider = ({ children }) => {
     // Check if we are client-side before we access the localStorage
     if (process.browser) {
       let cartData = localStorage.getItem('woocommerce-cart');
+
       cartData = null !== cartData ? JSON.parse(cartData) : '';
+
       setCart(cartData);
     }
   }, []);

utils/context/AppContext.js

@@ -45,7 +45,7 @@ export const getFloatVal = (string) => {
  */
 export const getFormattedCart = (data) => {
   let formattedCart = null;
-  if (!data || !data.cart.contents.nodes.length) {
+  if (!data || !data.cart.contents.nodes.length || !data.cart) {
     return formattedCart;
   }
   const givenProducts = data.cart.contents.nodes;