Refactor and improve ProductsShowAll

Author: w3bdesign

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,

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.
  *