Fix products

Author: w3bdesign

components/Products/ProductGrid.vue

@@ -4,29 +4,25 @@
       <ProductSort />
     </div>
     <div id="product-container" class="flex flex-wrap items-center">
-      <template v-if="store.loading">
-        <SpinnerLoading />
-      </template>
-      <template v-else-if="store.error">
-        <p>Error loading products.</p>
-      </template>
-      <template v-else>
+      <template v-if="products.length > 0">
         <ProductCard
-          v-for="product in store.filteredProducts"
+          v-for="product in products"
           :key="product.id"
           :product="product"
         />
       </template>
+      <template v-else>
+        <p>No products are available.</p>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useProductsStore } from "@/store/useProductsStore";
-
-const store = useProductsStore();
-
-if (store.products.length === 0) {
-  await store.fetchProducts();
-}
+defineProps({
+  products: {
+    type: Array,
+    required: true,
+  },
+});
 </script>

pages/products.vue

@@ -2,12 +2,34 @@
   <div class="container mx-auto">
     <div class="flex flex-wrap">
       <ProductFilter />
-      <ProductGrid />
+      <div class="w-full md:w-3/4 p-4">
+        <template v-if="pending">
+          <SpinnerLoading />
+        </template>
+        <template v-else-if="error">
+          <p>Error loading products.</p>
+        </template>
+        <template v-else>
+          <ProductGrid :products="store.filteredProducts" />
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useProductsStore } from "@/store/useProductsStore";
+import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
+
+const store = useProductsStore();
+
+const { data, pending, error } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY);
+
+if (data.value) {
+  store.products = data.value.products.nodes;
+  store.productTypes = store.getUniqueProductTypes;
+}
+
 useHead({
   title: "Products",
   titleTemplate: "%s - Nuxt 3 Woocommerce",