w3bdesign · w3bdesign · Sep 14, 2024 · Sep 14, 2024 · Sep 14, 2024
diff --git a/app.vue b/app.vue
@@ -1,7 +1,7 @@
 <template>
-  <!DOCTYPE html>
+  <!doctype html>
   <Html lang="en">
-  <title>Nuxt 3 Woocommerce</title>
+    <title>Nuxt 3 Woocommerce</title>
     <Body
       class="antialiased duration-300 transition-colors text-gray-800 bg-white"
     >

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
@@ -3,7 +3,9 @@
     <h2 class="mt-64 text-3xl text-center">Loading cart...</h2>
   </div>
   <div v-else-if="error">
-    <h2 class="mt-64 text-3xl text-center text-red-500">Error loading cart. Please try again.</h2>
+    <h2 class="mt-64 text-3xl text-center text-red-500">
+      Error loading cart. Please try again.
+    </h2>
   </div>
   <div v-else-if="cartItems.length">
     <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
@@ -29,15 +31,15 @@
  * @module CartContents
  * @returns {Object} The Vue.js component object.
  */
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted } from "vue";
 import { useCart } from "@/store/useCart";
-import CommonButton from '@/components/common/CommonButton.vue';
+import CommonButton from "@/components/common/CommonButton.vue";
 
 const props = defineProps({
   showCheckoutButton: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
 const cart = useCart();
@@ -55,7 +57,7 @@ const handleRemoveProduct = async (key) => {
   try {
     await cart.removeProductFromCart(key);
   } catch (error) {
-    console.error('Error removing product from cart:', error);
+    console.error("Error removing product from cart:", error);
     // Optionally, you can add a user-friendly notification here
     // without exposing the error details
   }
@@ -65,7 +67,7 @@ onMounted(async () => {
   try {
     await cart.refetch();
   } catch (err) {
-    console.error('Error fetching cart:', err);
+    console.error("Error fetching cart:", err);
     error.value = err;
   } finally {
     isLoading.value = false;

diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
@@ -46,7 +46,7 @@
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
 
-import { ref } from 'vue';
+import { ref } from "vue";
 import { formatPrice } from "@/utils/functions";
 
 const isRemoving = ref(false);

diff --git a/components/Layout/LayoutMobileMenu.vue b/components/Layout/LayoutMobileMenu.vue
@@ -24,7 +24,9 @@
             </NuxtLink>
           </li>
           <li class="text-xl linkStyle">
-            <NuxtLink to="/search" @click="displayMobileMenu"> Search </NuxtLink>
+            <NuxtLink to="/search" @click="displayMobileMenu">
+              Search
+            </NuxtLink>
           </li>
         </ul>
       </div>
@@ -50,7 +52,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
 const expandedMenu = useState("expandedMenu", () => false);
 const mobileMenu = ref(null);
@@ -61,10 +63,9 @@ const displayMobileMenu = () => {
 </script>
 
 <style scoped>
-
 .mobile-menu {
   top: 0;
-  bottom: 80px; 
+  bottom: 80px;
   max-height: calc(100vh - 80px);
 }
 

diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
@@ -113,7 +113,7 @@ watch(
         dataValue.product?.variations?.nodes[0].databaseId;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -127,7 +127,7 @@ const addProductToCart = async (product) => {
     await cart.addToCart(product);
     toast.value.show();
   } catch (error) {
-    console.error('Error adding product to cart:', error);
+    console.error("Error adding product to cart:", error);
     // You might want to show an error message to the user here
   }
 };

diff --git a/components/common/Toast.vue b/components/common/Toast.vue
@@ -11,17 +11,17 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
 
 const props = defineProps({
   message: {
     type: String,
-    default: 'Product added to cart'
+    default: "Product added to cart",
   },
   duration: {
     type: Number,
-    default: 3000
-  }
+    default: 3000,
+  },
 });
 
 const isVisible = ref(false);
@@ -45,7 +45,7 @@ defineExpose({ show });
 }
 
 .toast-content {
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   padding: 16px;
   border-radius: 4px;
@@ -68,4 +68,4 @@ defineExpose({ show });
   opacity: 1;
   transform: translateX(0);
 }
-</style>
+</style>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "format": "prettier --write \"**/*.{js,ts,vue}\"",
-    "refresh": "rm -rf node_modules && rm pnpm-lock.yaml && pnpm i && npm run format"
+    "refresh": "rm -rf node_modules && rm pnpm-lock.yaml && pnpm i && pnpm run format"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.1",

diff --git a/plugins/apollo.js b/plugins/apollo.js
@@ -77,7 +77,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     cache,
     defaultOptions: {
       watchQuery: {
-        fetchPolicy: 'cache-and-network',
+        fetchPolicy: "cache-and-network",
       },
     },
   });

diff --git a/plugins/cartUpdater.js b/plugins/cartUpdater.js
@@ -1,9 +1,9 @@
-import { useCart } from '@/store/useCart';
+import { useCart } from "@/store/useCart";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('app:created', () => {
+  nuxtApp.hook("app:created", () => {
     const cart = useCart();
-    
+
     // Refetch cart data on initial load
     cart.refetch();
 
@@ -13,4 +13,4 @@ export default defineNuxtPlugin((nuxtApp) => {
       next();
     });
   });
-});
+});