Add product to Pinia state

Author: w3bdesign

components/Layout/LayoutCart.vue

@@ -49,10 +49,14 @@ import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 
 import { getCookie } from "@/utils/functions";
 
+import { useCart } from "@/store/useCart";
+
 const cartLength = useState("cartLength", () => 0);
 const subTotal = useState("subTotal", "");
 const remoteError = useState("remoteError", () => false);
 
+const cart = useCart();
+
 const { data, error, pending, execute } = await useAsyncQuery(GET_CART_QUERY, {
   options: { fetchPolicy: "cache-and-network" },
 });
@@ -72,12 +76,14 @@ const updateCartDisplay = () => {
   remoteError.value = error;
 };
 
-onMounted(() => updateCartDisplay());
+onBeforeMount(() => updateCartDisplay());
 
 setInterval(() => {
   if (process.client && !pending.value && getCookie("woo-session")) {
     execute();
     updateCartDisplay();
+
+    //console.log("Cart content from useCart: ", cart.getCartContent);
   }
 }, 3000);
 </script>

components/Products/ProductsSingleProduct.vue

@@ -85,10 +85,14 @@ import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
 import { stripHTML, filteredVariantPrice } from "@/utils/functions";
 
+import { useCart } from "@/store/useCart";
+
 const isLoading = useState("isLoading", () => false);
 
 const config = useRuntimeConfig();
 
+const cart = useCart();
+
 const props = defineProps({
   id: { type: String, required: true },
   slug: { type: String, required: true },
@@ -107,6 +111,10 @@ const addProductToCart = async (product) => {
 
   const addToCartvariables = { input: productQueryInput };
 
+ console.log("Should add cart to product:", product);
+  cart.addToCart(product);
+ 
+
   const { mutate, onDone, onError } = useMutation(ADD_TO_CART_MUTATION, {
     addToCartvariables,
   });

store/useCart.js

@@ -8,23 +8,23 @@ const state = {
   error: null,
 };
 
-export const useCart = defineStore("shopState", {
+export const useCart = defineStore("cartState", {
   state: () => state,
   actions: {
-    addToCart({ item }) {
+    addToCart(product) {
       const foundProductInCartIndex = this.cart.findIndex(
-        (cartItem) => item.slug === cartItem.slug
+        (cartproduct) => product.slug === cartproduct.slug
       );
 
       if (foundProductInCartIndex > -1) {
         this.cart[foundProductInCartIndex].quantity += 1;
       } else {
-        item.quantity = 1;
-        this.cart.push(item);
+        product.quantity = 1;
+        this.cart.push(product);
       }
     },
-    removeProductFromCart({ item }) {
-      this.cart.splice(this.cart.indexOf(item), 1);
+    removeProductFromCart({ product }) {
+      this.cart.splice(this.cart.indexOf(product), 1);
     },
 
     clearCart() {