Merge pull request #1011 from w3bdesign/1009-pinia-cart

Add Pinia store

Author: w3bdesign

.env.example

@@ -1,5 +1,6 @@
 PUBLIC_GRAPHQL_URL = "change me"
 PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL = "https://via.placeholder.com/500"
+PUBLIC_CURRENCY_SYMBOL = "kr"
 ALGOLIA_APPLICATION_ID = "change me"
 ALGOLIA_API_KEY = "change me"
 ALGOLIA_INDEX_NAME = "change me"

README.md

@@ -16,9 +16,11 @@
 
 ## Features
 
--   Nuxt 3
+-   Nuxt 3 
+-   Vue 3 and Composition API
 -   Tailwind CSS
 -   Nuxt Apollo
+-   Pinia with pinia-plugin-persistedstate for cart and state management
 -   Responsive design
 -   Support for simple and variable products
 -   CSS animations and transitions

components/Cart/CartContents.vue

@@ -58,17 +58,23 @@
 import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
 
+import { useCart } from "@/store/useCart";
+
 const isRemoving = useState("isRemoving", () => false);
 
+const cart = useCart();
+
 defineProps({
   showCheckoutButton: { type: Boolean, required: false, default: false },
 });
 
 const { data } = await useAsyncQuery(GET_CART_QUERY);
 
-const handleRemoveProduct = ({ key }) => {
+const handleRemoveProduct = (product) => {
   const updatedItems = [];
 
+  const { key } = product;
+
   updatedItems.push({
     key,
     quantity: 0,
@@ -82,6 +88,8 @@ const handleRemoveProduct = ({ key }) => {
     },
   };
 
+  cart.removeProductFromCart(product);
+
   const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
     variables,
   });

components/Layout/LayoutCart.vue

@@ -36,7 +36,9 @@
             >
               {{ cartLength }}
             </span>
-            <span class="text-white lg:text-black">Total: {{ subTotal }}</span>
+            <span class="text-white lg:text-black"
+              >Total: {{ config.currencySymbol }} {{ subTotal }}</span
+            >
           </div>
         </transition>
       </NuxtLink>
@@ -49,10 +51,16 @@ 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 config = useRuntimeConfig();
+
+const cart = useCart();
+
 const { data, error, pending, execute } = await useAsyncQuery(GET_CART_QUERY, {
   options: { fetchPolicy: "cache-and-network" },
 });
@@ -62,22 +70,21 @@ const updateCartDisplay = () => {
     return;
   }
 
-  cartLength.value = data.value.cart.contents.nodes.reduce(
-    (accumulator, argument) => accumulator + argument.quantity,
-    0
-  );
+  cartLength.value = cart.getCartQuantity;
 
-  subTotal.value = data.value.cart.total;
+  subTotal.value = cart.getCartTotal;
 
   remoteError.value = error;
 };
 
-onMounted(() => updateCartDisplay());
+onBeforeMount(() => {
+  execute();
+  updateCartDisplay();
+});
 
 setInterval(() => {
   if (process.client && !pending.value && getCookie("woo-session")) {
-    execute();
     updateCartDisplay();
   }
-}, 3000);
+}, 1000);
 </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,8 @@ const addProductToCart = async (product) => {
 
   const addToCartvariables = { input: productQueryInput };
 
+  cart.addToCart(product);
+
   const { mutate, onDone, onError } = useMutation(ADD_TO_CART_MUTATION, {
     addToCartvariables,
   });

nuxt.config.ts

@@ -8,6 +8,7 @@ export default defineNuxtConfig({
   css: ["~/assets/css/main.css", "~/assets/css/animate.min.css"],
   modules: [
     "@pinia/nuxt",
+    "@pinia-plugin-persistedstate/nuxt",
     "@nuxtjs/apollo",
     "@formkit/nuxt",
     "@nuxtjs/algolia",
@@ -19,6 +20,7 @@ export default defineNuxtConfig({
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,
       indexName: process.env.PUBLIC_ALGOLIA_INDEX_NAME,
       placeholderImage: process.env.PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL,
+      currencySymbol: process.env.PUBLIC_CURRENCY_SYMBOL,
     },
   },
   postcss: {