Fix category product display

Author: w3bdesign

components/Products/ProductsShowAll.vue

@@ -1,8 +1,62 @@
 <template>
-  <div v-if="data?.products?.nodes">
+  <div v-if="allCategoryProducts?.productCategory?.products?.nodes">
     <section>
       <div id="product-container" class="flex flex-wrap items-center">
-        <template v-for="product in data.products.nodes">
+        <template
+          v-for="product in allCategoryProducts.productCategory.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 },
+              }"
+            >
+              <img
+                id="product-image"
+                class="p-8 border mx-auto w-4/5 border-gray-200 lg:h-[230px] rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:ml-0 lg:w-full lg:p-2 hover:scale-95"
+                :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>
+            <div v-if="product.onSale" class="flex justify-center mt-2">
+              <div class="text-lg text-gray-900 line-through">
+                <span v-if="product.variations">
+                  {{ filteredVariantPrice(product.price, "right") }}</span
+                >
+                <span v-else>{{ product.regularPrice }}</span>
+              </div>
+              <div class="ml-4 text-xl text-gray-900">
+                <span v-if="product.variations">
+                  {{ filteredVariantPrice(product.price) }}</span
+                >
+                <span v-else>{{ product.salePrice }}</span>
+              </div>
+            </div>
+            <div v-else>
+              <p class="mt-2 text-xl text-center text-gray-900">
+                {{ product.price }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </div>
+    </section>
+  </div>
+  <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"
@@ -70,18 +124,16 @@ const productImage = (product) =>
   product.image ? product.image.sourceUrl : config.placeholderImage;
 
 const productVariables = { limit: 99 };
-const { data } = await useAsyncQuery(
+const { data: allProducts } = await useAsyncQuery(
   FETCH_ALL_PRODUCTS_QUERY,
   productVariables
 );
 
-if (props.id) {
-  const categoryVariables = { id: props.categoryId, slug: props.categorySlug };
-  const { data } = await useAsyncQuery(
-    GET_PRODUCTS_FROM_CATEGORY_QUERY,
-    categoryVariables
-  );
-}
+const categoryVariables = { id: props.categoryId };
+const { data: allCategoryProducts } = await useAsyncQuery(
+  GET_PRODUCTS_FROM_CATEGORY_QUERY,
+  categoryVariables
+);
 </script>
 
 <style scoped>