Merge pull request #1114 from w3bdesign/dev

Refactor and docs

README.md

@@ -1,57 +1,57 @@
 [![Playwright Tests](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml/badge.svg)](https://github.com/w3bdesign/nuxtjs-woocommerce/actions/workflows/playwright.yml)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/1835e693354349ffaa703c0bbaf2b52b)](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nuxtjs-woocommerce&utm_campaign=Badge_Grade)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/1835e693354349ffaa703c0bbaf2b52b)](https://app.codacy.com/gh/w3bdesign/nuxtjs-woocommerce?utm_source=github.com\&utm_medium=referral\&utm_content=w3bdesign/nuxtjs-woocommerce\&utm_campaign=Badge_Grade)
 [![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nuxtjs-woocommerce)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nuxtjs-woocommerce&metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nuxtjs-woocommerce\&metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nuxtjs-woocommerce)
 
 # Nuxt 3 Ecommerce site with WooCommerce backend
 
 <img src="https://user-images.githubusercontent.com/45217974/106988377-f129a080-676f-11eb-94b9-a44c86ea6c79.png" alt="Project screenshot" />
 
 ## Table Of Contents (TOC)
 
--   [Features](#Features)
--   [Installation](#Installation)
--   [Troubleshooting](#Troubleshooting)
--   [TODO](#TODO)
+*   [Features](#Features)
+*   [Installation](#Installation)
+*   [Troubleshooting](#Troubleshooting)
+*   [TODO](#TODO)
 
 ## Features
 
--   Nuxt 3 
--   Vue 3 and Composition API with <script setup> syntax
--   Tailwind CSS
--   Nuxt Apollo
--   Pinia with pinia-plugin-persistedstate for cart and state management
--   Responsive design
--   Swiper integration for Hero section
--   Support for simple and variable products
--   Stock quantity on simple and variable products
--   CSS animations and transitions
--   Form handling and validation with Formkit, Vee Validate and Yup
--   Checkout process
--   Animated mobile menu
--   Basic Playwright test(s) integrated with Github actions
+*   Nuxt 3
+*   Vue 3 and Composition API with <script setup> syntax
+*   Tailwind CSS
+*   Nuxt Apollo
+*   Pinia with pinia-plugin-persistedstate for cart and state management
+*   Responsive design
+*   Swiper integration for Hero section
+*   Support for simple and variable products
+*   Stock quantity on simple and variable products
+*   CSS animations and transitions
+*   Form handling and validation with Formkit, Vee Validate and Yup
+*   Checkout process
+*   Animated mobile menu
+*   Basic Playwright test(s) integrated with Github actions
 
 ## Installation
 
 1.  Install and activate the following required plugins, in your WordPress plugin directory:
 
--   [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
--   [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
--   [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema. Currently only confirmed to be working with version 0.62 of this plugin.
--   [wp-algolia-woo-indexer](https://github.com/w3bdesign/wp-algolia-woo-indexer) WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.
+*   [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
+*   [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
+*   [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema. Currently only confirmed to be working with version 0.62 of this plugin.
+*   [wp-algolia-woo-indexer](https://github.com/w3bdesign/wp-algolia-woo-indexer) WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.
 
 Optional plugin:
 
--   [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible.
--   [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend "Access-Control-Allow-Origin” header`
+*   [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible.
+*   [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend "Access-Control-Allow-Origin” header`
 
 The current release has been tested and is confirmed working with the following plugin versions:
 
--   WordPress version 6.1.1
--   WooCommerce version 7.4.0
--   WP GraphQL version 1.13.8
--   WooGraphQL version 0.12.0
--   WPGraphQL CORS version 2.1
+*   WordPress version 6.1.1
+*   WooCommerce version 7.4.0
+*   WP GraphQL version 1.13.8
+*   WooGraphQL version 0.12.0
+*   WPGraphQL CORS version 2.1
 
 2.  Make sure WooCommerce has some products already or import some sample products
 

components/Cart/CartContents.vue

@@ -40,6 +40,11 @@ defineProps({
 
 const { data } = await useAsyncQuery(GET_CART_QUERY);
 
+/**
+ * Handles the removal of a product.
+ *
+ * @param {Object} product - The product to be removed.
+ */
 const handleRemoveProduct = (product) => {
   const updatedItems = [];
 

components/Layout/LayoutCart.vue

@@ -67,11 +67,6 @@ const { data, error, pending, execute } = await useAsyncQuery(GET_CART_QUERY, {
   options: { fetchPolicy: "cache-and-network" },
 });
 
-/**
- * Updates the display of the cart.
- *
- * @return {void}
- */
 const updateCartDisplay = () => {
   if (!data?.value?.cart?.contents?.nodes?.length) {
     return;

components/Layout/LayoutNavbar.vue

@@ -49,11 +49,6 @@
 </template>
 
 <script setup>
-/**
- *
- * Vue.js template for a header section of a web page.
- *
- */
 import NavItem from "@/components/Layout/LayoutNavItem.vue";
 </script>
 

pages/index.vue

@@ -4,3 +4,19 @@
     <ProductsShowAll />
   </div>
 </template>
+
+<script setup>
+useHead({
+  title: "Index",
+  titleTemplate: "%s - Nuxt 3 Woocommerce",
+  meta: [
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
+    {
+      hid: "description",
+      name: "description",
+      content: "Nuxt 3 Woocommerce",
+    },
+  ],
+  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+});
+</script>

store/useCart.js

@@ -1,5 +1,14 @@
 import { defineStore } from "pinia";
 
+/**
+ * Manages a shopping cart store using the Pinia library.
+ *
+ * @typedef {Object} CartState
+ * @property {Array} cart - The array representing the cart.
+ * @property {boolean} loading - The loading status of the cart.
+ * @property {string|null} error - The error message, if any.
+ */
+
 const state = {
   cart: [],
   loading: true,
@@ -11,7 +20,7 @@ export const useCart = defineStore("cartState", {
   actions: {
     addToCart(product) {
       const foundProductInCartIndex = this.cart.findIndex(
-        (cartproduct) => product.slug === cartproduct.slug,
+        (cartproduct) => product.slug === cartproduct.slug
       );
 
       if (foundProductInCartIndex > -1) {
@@ -40,7 +49,7 @@ export const useCart = defineStore("cartState", {
         (total, product) =>
           total +
           Number(product.price.replace(currencySymbol, "")) * product.quantity,
-        0,
+        0
       );
     },
   },

tsconfig.json

@@ -1,6 +1,10 @@
 {
-    "extends": "./.nuxt/tsconfig.json",
-    "compilerOptions": {
-      "allowJs": true
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
     }
-  }
+  }
+}

utils/functions.js

@@ -119,7 +119,9 @@ export function getCookie(cName) {
   const cArr = cDecoded.split("; ");
   let res;
   cArr.forEach((val) => {
-    if (val.indexOf(name) === 0) res = val.substring(name.length);
+    if (val.indexOf(name) === 0) {
+      res = val.substring(name.length);
+    }
   });
   return res;
 }