From ecf5aeb45c12f2976b97d7d96a986b3c4a76091a Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:08:35 +0200
Subject: [PATCH 01/10] Refactor

---
 components/Products/ProductsShowAll.vue |  7 ++++++-
 layouts/default.vue                     | 14 +++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue
index 91691370..0039578f 100644
--- a/components/Products/ProductsShowAll.vue
+++ b/components/Products/ProductsShowAll.vue
@@ -18,7 +18,6 @@
               }"
             >
               <ProductImage :alt="product.name" :src="productImage(product)" />
-
               <div class="flex justify-center pt-3">
                 <p class="text-2xl font-bold text-center cursor-pointer">
                   {{ product.name }}
@@ -84,6 +83,12 @@ const props = defineProps({
 
 const config = useRuntimeConfig();
 
+/**
+ * Returns the source URL of a product image or a placeholder image if the product does not have an image.
+ *
+ * @param {Object} product - The product object containing the image source URL.
+ * @return {string} The source URL of the product image or a placeholder image if the product does not have an image.
+ */
 const productImage = (product) =>
   product.image ? product.image.sourceUrl : config.public.placeholderImage;
 
diff --git a/layouts/default.vue b/layouts/default.vue
index f4dbce52..b6eedf81 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <LayoutNavbar />
-    <div class="container mx-auto max-w-[84.375rem]">
-      <slot />
-    </div>
-    <LayoutFooter />
-    <LayoutStickyFooter />
+  <LayoutNavbar />
+  <div class="container mx-auto max-w-[84.375rem]">
+    <slot />
   </div>
+  <LayoutFooter />
+  <LayoutStickyFooter />
 </template>
 
 <style>
@@ -14,6 +12,7 @@
 .home-leave-active {
   transition: opacity 0.5s;
 }
+
 .home-enter,
 .home-leave-active {
   opacity: 0;
@@ -23,6 +22,7 @@
 .cart-leave-active {
   transition: all 0.5s;
 }
+
 .cart-enter,
 .cart-leave-active {
   opacity: 0;

From 062e87b2cbdc07ab3d0cf9984c3ddadbc8fe2980 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:09:38 +0200
Subject: [PATCH 02/10] Update LayoutNavbar.vue

---
 components/Layout/LayoutNavbar.vue | 124 ++++++++++-------------------
 1 file changed, 42 insertions(+), 82 deletions(-)

diff --git a/components/Layout/LayoutNavbar.vue b/components/Layout/LayoutNavbar.vue
index c7bbe68b..509eda7d 100644
--- a/components/Layout/LayoutNavbar.vue
+++ b/components/Layout/LayoutNavbar.vue
@@ -1,90 +1,50 @@
 <template>
-  <div>
-    <header
-      role="banner"
-      class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
-    >
-      <div class="flex flex-wrap lg:px-4">
-        <div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
-          <div class="ml-4 lg:ml-0">
-            <img
-              alt="Logo"
-              class="h-20 lg:h-24"
-              aria-label="Nettbutikk logo"
-              src="~/assets/svg/Logo.svg"
-            />
-          </div>
+  <header role="banner" class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6">
+    <div class="flex flex-wrap lg:px-4">
+      <div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
+        <div class="ml-4 lg:ml-0">
+          <img alt="Logo" class="h-20 lg:h-24" aria-label="Nettbutikk logo" src="~/assets/svg/Logo.svg" />
         </div>
-        <LayoutMobileMenu />
-        <div class="hidden lg:w-1/12 lg:block" />
-        <div
-          id="nav-content"
-          class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
-        >
-          <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
-            <div>
-              <nav
-                id="block-main"
-                role="navigation"
-                aria-labelledby="block-main-menu"
-              >
-                <ul
-                  class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
-                >
-                  <li
-                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                  >
-                    <NuxtLink to="/">
-                      <span
-                        class="text-xl text-white no-underline lg:text-black is-active"
-                      >
-                        Home
-                      </span>
-                    </NuxtLink>
-                  </li>
-                  <li
-                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                  >
-                    <NuxtLink to="/products">
-                      <span
-                        class="text-xl text-white no-underline lg:text-black"
-                        >Products</span
-                      >
-                    </NuxtLink>
-                  </li>
-                  <li
-                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                  >
-                    <NuxtLink to="/categories">
-                      <span
-                        class="text-xl text-white no-underline lg:text-black is-active"
-                        >Categories</span
-                      >
-                    </NuxtLink>
-                  </li>
-                  <li
-                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                  >
-                    <NuxtLink to="/search">
-                      <span
-                        class="text-xl text-white no-underline lg:text-black is-active"
-                        >Search</span
-                      >
-                    </NuxtLink>
-                  </li>
-                  <li
-                    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                  >
-                    <LayoutCart />
-                  </li>
-                </ul>
-              </nav>
-            </div>
+      </div>
+      <LayoutMobileMenu />
+      <div class="hidden lg:w-1/12 lg:block" />
+      <div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right">
+        <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
+          <div>
+            <nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
+              <ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
+                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                  <NuxtLink to="/">
+                    <span class="text-xl text-white no-underline lg:text-black is-active">
+                      Home
+                    </span>
+                  </NuxtLink>
+                </li>
+                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                  <NuxtLink to="/products">
+                    <span class="text-xl text-white no-underline lg:text-black">Products</span>
+                  </NuxtLink>
+                </li>
+                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                  <NuxtLink to="/categories">
+                    <span class="text-xl text-white no-underline lg:text-black is-active">Categories</span>
+                  </NuxtLink>
+                </li>
+                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                  <NuxtLink to="/search">
+                    <span class="text-xl text-white no-underline lg:text-black is-active">Search</span>
+                  </NuxtLink>
+                </li>
+                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                  <LayoutCart />
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
       </div>
-    </header>
-  </div>
+    </div>
+  </header>
 </template>
 
 <style scoped>

From 09ae78cfcc476118650df39fa99cf3e569baeb24 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:14:55 +0200
Subject: [PATCH 03/10] Jsdoc

---
 components/Layout/LayoutNavbar.vue | 73 ++++++++++++++++++++++++------
 1 file changed, 59 insertions(+), 14 deletions(-)

diff --git a/components/Layout/LayoutNavbar.vue b/components/Layout/LayoutNavbar.vue
index 509eda7d..edc79dde 100644
--- a/components/Layout/LayoutNavbar.vue
+++ b/components/Layout/LayoutNavbar.vue
@@ -1,41 +1,78 @@
 <template>
-  <header role="banner" class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6">
+  <header
+    role="banner"
+    class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
+  >
     <div class="flex flex-wrap lg:px-4">
       <div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
         <div class="ml-4 lg:ml-0">
-          <img alt="Logo" class="h-20 lg:h-24" aria-label="Nettbutikk logo" src="~/assets/svg/Logo.svg" />
+          <img
+            alt="Logo"
+            class="h-20 lg:h-24"
+            aria-label="Nettbutikk logo"
+            src="~/assets/svg/Logo.svg"
+          />
         </div>
       </div>
       <LayoutMobileMenu />
       <div class="hidden lg:w-1/12 lg:block" />
-      <div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right">
+      <div
+        id="nav-content"
+        class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
+      >
         <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
           <div>
-            <nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
-              <ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+            <nav
+              id="block-main"
+              role="navigation"
+              aria-labelledby="block-main-menu"
+            >
+              <ul
+                class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
+              >
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <NuxtLink to="/">
-                    <span class="text-xl text-white no-underline lg:text-black is-active">
+                    <span
+                      class="text-xl text-white no-underline lg:text-black is-active"
+                    >
                       Home
                     </span>
                   </NuxtLink>
                 </li>
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <NuxtLink to="/products">
-                    <span class="text-xl text-white no-underline lg:text-black">Products</span>
+                    <span class="text-xl text-white no-underline lg:text-black"
+                      >Products</span
+                    >
                   </NuxtLink>
                 </li>
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <NuxtLink to="/categories">
-                    <span class="text-xl text-white no-underline lg:text-black is-active">Categories</span>
+                    <span
+                      class="text-xl text-white no-underline lg:text-black is-active"
+                      >Categories</span
+                    >
                   </NuxtLink>
                 </li>
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <NuxtLink to="/search">
-                    <span class="text-xl text-white no-underline lg:text-black is-active">Search</span>
+                    <span
+                      class="text-xl text-white no-underline lg:text-black is-active"
+                      >Search</span
+                    >
                   </NuxtLink>
                 </li>
-                <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+                <li
+                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+                >
                   <LayoutCart />
                 </li>
               </ul>
@@ -47,6 +84,14 @@
   </header>
 </template>
 
+<script setup>
+/**
+ *
+ * Vue.js template for a header section of a web page.
+ *
+ */
+</script>
+
 <style scoped>
 header {
   max-width: 1400px;

From aaefb68c6af9f157d6abb3a148ac8e95c335499d Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:23:11 +0200
Subject: [PATCH 04/10] Refactor and fix variations bug

---
 components/Layout/LayoutNavItem.vue           | 24 ++++++++++
 components/Layout/LayoutNavbar.vue            | 45 +++----------------
 components/Products/ProductsSingleProduct.vue |  4 +-
 layouts/default.vue                           |  2 +
 4 files changed, 33 insertions(+), 42 deletions(-)
 create mode 100644 components/Layout/LayoutNavItem.vue

diff --git a/components/Layout/LayoutNavItem.vue b/components/Layout/LayoutNavItem.vue
new file mode 100644
index 00000000..b558e3f0
--- /dev/null
+++ b/components/Layout/LayoutNavItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <li
+    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+  >
+    <NuxtLink :to="to">
+      <span class="text-xl text-white no-underline lg:text-black">
+        {{ label }}
+      </span>
+    </NuxtLink>
+  </li>
+</template>
+
+<script setup>
+const props = defineProps({
+  to: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+</script>
diff --git a/components/Layout/LayoutNavbar.vue b/components/Layout/LayoutNavbar.vue
index edc79dde..d23d9295 100644
--- a/components/Layout/LayoutNavbar.vue
+++ b/components/Layout/LayoutNavbar.vue
@@ -30,46 +30,10 @@
               <ul
                 class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
               >
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                    >
-                      Home
-                    </span>
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/products">
-                    <span class="text-xl text-white no-underline lg:text-black"
-                      >Products</span
-                    >
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/categories">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                      >Categories</span
-                    >
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/search">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                      >Search</span
-                    >
-                  </NuxtLink>
-                </li>
+                <NavItem to="/" label="Home" />
+                <NavItem to="/products" label="Products" />
+                <NavItem to="/categories" label="Categories" />
+                <NavItem to="/search" label="Search" />
                 <li
                   class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                 >
@@ -90,6 +54,7 @@
  * Vue.js template for a header section of a web page.
  *
  */
+import NavItem from "@/components/Layout/LayoutNavItem.vue";
 </script>
 
 <style scoped>
diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
index 18da8b43..1b1839e3 100644
--- a/components/Products/ProductsSingleProduct.vue
+++ b/components/Products/ProductsSingleProduct.vue
@@ -78,8 +78,8 @@ const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
 watch(
   () => data.value,
   (dataValue) => {
-    if (dataValue && dataValue.product.variations.nodes.length > 0) {
-      selectedVariation.value = dataValue.product.variations.nodes[0].databaseId;
+    if (dataValue && dataValue.product?.variations?.nodes?.length > 0) {
+      selectedVariation.value = dataValue.product?.variations?.nodes[0].databaseId;
     }
   },
   { immediate: true }
diff --git a/layouts/default.vue b/layouts/default.vue
index b6eedf81..f6019c78 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,12 @@
 <template>
+  <div>
   <LayoutNavbar />
   <div class="container mx-auto max-w-[84.375rem]">
     <slot />
   </div>
   <LayoutFooter />
   <LayoutStickyFooter />
+  </div>
 </template>
 
 <style>

From 0251a02c207a27909bda8facd832d7c7a1a1e4ba Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:27:08 +0200
Subject: [PATCH 05/10] Update LayoutNavItem.vue

---
 components/Layout/LayoutNavItem.vue | 34 ++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/Layout/LayoutNavItem.vue b/components/Layout/LayoutNavItem.vue
index b558e3f0..e01288b5 100644
--- a/components/Layout/LayoutNavItem.vue
+++ b/components/Layout/LayoutNavItem.vue
@@ -1,24 +1,24 @@
 <template>
-  <li
-    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-  >
-    <NuxtLink :to="to">
-      <span class="text-xl text-white no-underline lg:text-black">
-        {{ label }}
-      </span>
-    </NuxtLink>
-  </li>
+    <ul>
+        <li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
+            <NuxtLink :to="to">
+                <span class="text-xl text-white no-underline lg:text-black">
+                    {{ label }}
+                </span>
+            </NuxtLink>
+        </li>
+    </ul>
 </template>
 
 <script setup>
 const props = defineProps({
-  to: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
+    to: {
+        type: String,
+        required: true,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
 });
 </script>

From 5b26e794131e3b64db1d9fe97c977893aa685643 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:31:25 +0200
Subject: [PATCH 06/10] Delete dependabot.yml

---
 .github/dependabot.yml | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 .github/dependabot.yml

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
deleted file mode 100644
index bbd061b3..00000000
--- a/.github/dependabot.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    directory: '/'
-    schedule:
-      interval: daily
-      time: '04:00'
-    open-pull-requests-limit: 10

From 04353a211100f6021a20d74da1f85061ad6a6817 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:31:32 +0200
Subject: [PATCH 07/10] Version 1.0.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index afed87a7..a9a587dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

From e9a60244f3d3d36ebce343793eccc7080ade1fc5 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:34:58 +0200
Subject: [PATCH 08/10] Jsdoc

---
 components/Products/ProductImage.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/components/Products/ProductImage.vue b/components/Products/ProductImage.vue
index 1f1676ec..730b688a 100644
--- a/components/Products/ProductImage.vue
+++ b/components/Products/ProductImage.vue
@@ -10,6 +10,17 @@
 </template>
 
 <script setup>
+/**
+ * Vue.js component for displaying an image with configurable properties.
+ *
+ * @param {Object} props - Object containing the component's properties.
+ * @param {String} props.alt - The alt text for the image (required).
+ * @param {String} props.src - The source URL for the image (required).
+ * @param {String} [props.width] - The width of the image.
+ * @param {String} [props.height] - The height of the image.
+ * @returns {Object} The Vue.js component object.
+ */
+
 import { computed } from "vue";
 
 const props = defineProps({

From ec4f58383691003d92a53b1ee7d45dc66c1e0770 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:36:43 +0200
Subject: [PATCH 09/10] Jsdoc

---
 components/Products/ProductPrice.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/Products/ProductPrice.vue b/components/Products/ProductPrice.vue
index 2573ea95..7452afbc 100644
--- a/components/Products/ProductPrice.vue
+++ b/components/Products/ProductPrice.vue
@@ -26,6 +26,14 @@
 </template>
 
 <script setup>
+/**
+ * Displays the price of a product, with support for sale prices and variations.
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.product - The product to display the price for.
+ * @param {string} [props.priceFontSize="normal"] - The font size for the price display.
+ * @param {boolean} [props.shouldCenterPrice=false] - Whether to center the price display.
+ */
 import { computed } from "vue";
 import {
   formatPrice,

From ada6b78d581b0746a5e2a08397bbc658849a6c8c Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 9 Jun 2023 02:46:54 +0200
Subject: [PATCH 10/10] Refactor and improve ProductsShowAll

---
 components/Checkout/CheckoutForm.vue    |   9 ++
 components/Products/ProductsShowAll.vue | 105 +++++++++---------------
 2 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/components/Checkout/CheckoutForm.vue b/components/Checkout/CheckoutForm.vue
index 2e2a8a0e..94b17a32 100644
--- a/components/Checkout/CheckoutForm.vue
+++ b/components/Checkout/CheckoutForm.vue
@@ -41,11 +41,20 @@ import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
 
 import CHECKOUT_MUTATION from "@/apollo/mutations/CHECKOUT_MUTATION.gql";
 
+/**
+ * Returns an input string with its first character capitalized.
+ *
+ * @param {string} input - The string to capitalize the first character of.
+ * @return {string} The input string with the first character capitalized.
+ */
 const upperCaseFirstChar = (input) =>
   input.charAt(0).toUpperCase() + input.slice(1);
 
 const paymentMethod = "cod";
 
+/**
+ * Handles the submission of a checkout form with the provided user information.
+ */
 const handleSubmit = ({
   firstName,
   lastName,
diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue
index 0039578f..98e769a3 100644
--- a/components/Products/ProductsShowAll.vue
+++ b/components/Products/ProductsShowAll.vue
@@ -1,71 +1,25 @@
 <template>
-  <template v-if="allCategoryProducts?.productCategory?.products?.nodes">
-    <section>
-      <div id="product-container" class="flex flex-wrap items-center">
-        <template
-          v-for="product in allCategoryProducts.productCategory.products.nodes"
+  <div id="product-container" class="flex flex-wrap items-center">
+    <template v-for="product in products" :key="product.id">
+      <div class="flex flex-col mt-6 sm:w-1/2 md:w-1/3 lg:w-1/4 lg:mr-4">
+        <NuxtLink
+          class="text-black cursor-pointer hover:underline"
+          :to="productLink(product)"
         >
-          <div
-            v-if="product.slug"
-            :key="product.id"
-            class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
-          >
-            <NuxtLink
-              class="text-black cursor-pointer hover:underline"
-              :to="{
-                path: '/product/' + product.slug,
-                query: { id: product.databaseId },
-              }"
-            >
-              <ProductImage :alt="product.name" :src="productImage(product)" />
-              <div class="flex justify-center pt-3">
-                <p class="text-2xl font-bold text-center cursor-pointer">
-                  {{ product.name }}
-                </p>
-              </div>
-            </NuxtLink>
-            <ProductPrice
-              :product="product"
-              priceFontSize="normal"
-              :shouldCenterPrice="true"
-            />
+          <ProductImage :alt="product.name" :src="productImage(product)" />
+          <div class="flex justify-center pt-3">
+            <p class="text-2xl font-bold text-center cursor-pointer">
+              {{ product.name }}
+            </p>
           </div>
-        </template>
+        </NuxtLink>
+        <ProductPrice
+          :product="product"
+          priceFontSize="normal"
+          :shouldCenterPrice="true"
+        />
       </div>
-    </section>
-  </template>
-  <div v-else>
-    <section>
-      <div id="product-container" class="flex flex-wrap items-center">
-        <template v-for="product in allProducts.products.nodes">
-          <div
-            v-if="product.slug"
-            :key="product.id"
-            class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
-          >
-            <NuxtLink
-              class="text-black cursor-pointer hover:underline"
-              :to="{
-                path: '/product/' + product.slug,
-                query: { id: product.databaseId },
-              }"
-            >
-              <ProductImage :alt="product.name" :src="productImage(product)" />
-              <div class="flex justify-center pt-3">
-                <p class="text-2xl font-bold text-center cursor-pointer">
-                  {{ product.name }}
-                </p>
-              </div>
-            </NuxtLink>
-            <ProductPrice
-              :product="product"
-              priceFontSize="normal"
-              :shouldCenterPrice="true"
-            />
-          </div>
-        </template>
-      </div>
-    </section>
+    </template>
   </div>
 </template>
 
@@ -83,6 +37,29 @@ const props = defineProps({
 
 const config = useRuntimeConfig();
 
+const products = computed(() => {
+  return (
+    allCategoryProducts.value?.productCategory?.products?.nodes ||
+    allProducts.value?.products?.nodes ||
+    []
+  );
+});
+
+/**
+ * Returns the path and query parameters for a product link.
+ *
+ * @param {Object} product - Object containing product information.
+ * @param {string} product.slug - The product's URL slug.
+ * @param {number} product.databaseId - The product's database ID.
+ * @return {Object} An object containing the product's path and query parameters.
+ */
+const productLink = (product) => {
+  return {
+    path: "/product/" + product.slug,
+    query: { id: product.databaseId },
+  };
+};
+
 /**
  * Returns the source URL of a product image or a placeholder image if the product does not have an image.
  *