From ea9faa7589c1905b032745ff71f4c529e180d741 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sun, 29 Jun 2025 19:26:51 +0200
Subject: [PATCH 1/3] Add filter and sorting

---
 components/Products/ProductCard.vue   |  47 ++++++++++
 components/Products/ProductFilter.vue |  56 ++++++++++++
 components/Products/ProductGrid.vue   |  32 +++++++
 components/Products/ProductSort.vue   |  22 +++++
 pages/products.vue                    |   7 +-
 store/useProductsStore.js             | 119 ++++++++++++++++++++++++++
 6 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 components/Products/ProductCard.vue
 create mode 100644 components/Products/ProductFilter.vue
 create mode 100644 components/Products/ProductGrid.vue
 create mode 100644 components/Products/ProductSort.vue
 create mode 100644 store/useProductsStore.js

diff --git a/components/Products/ProductCard.vue b/components/Products/ProductCard.vue
new file mode 100644
index 00000000..699ad24d
--- /dev/null
+++ b/components/Products/ProductCard.vue
@@ -0,0 +1,47 @@
+<template>
+  <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)"
+    >
+      <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>
+
+<script setup>
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true,
+  },
+});
+
+const config = useRuntimeConfig();
+
+const productLink = (product) => {
+  return {
+    path: "/product/" + product.slug,
+    query: { id: product.databaseId },
+  };
+};
+
+const productImage = (product) =>
+  product.image ? product.image.sourceUrl : config.public.placeholderImage;
+</script>
+
+<style scoped>
+a:hover {
+  border: none;
+}
+</style>
diff --git a/components/Products/ProductFilter.vue b/components/Products/ProductFilter.vue
new file mode 100644
index 00000000..1fcbd0cf
--- /dev/null
+++ b/components/Products/ProductFilter.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="w-full md:w-1/4 p-4">
+    <h3 class="text-lg font-bold mb-2">Product Type</h3>
+    <div v-for="productType in store.productTypes" :key="productType.id">
+      <input
+        type="checkbox"
+        :id="productType.id"
+        :checked="productType.checked"
+        @change="store.toggleProductType(productType.id)"
+      />
+      <label :for="productType.id" class="ml-2">{{ productType.name }}</label>
+    </div>
+
+    <h3 class="text-lg font-bold mt-4 mb-2">Price</h3>
+    <div class="flex items-center" v-if="store.priceRange">
+      <input
+        type="range"
+        min="0"
+        max="1000"
+        :value="store.priceRange[0]"
+        @input="updatePriceRange($event, 0)"
+        class="w-full"
+      />
+      <span class="mx-2">{{ store.priceRange[0] }}</span>
+      <span>-</span>
+      <input
+        type="range"
+        min="0"
+        max="1000"
+        :value="store.priceRange[1]"
+        @input="updatePriceRange($event, 1)"
+        class="w-full"
+      />
+      <span class="ml-2">{{ store.priceRange[1] }}</span>
+    </div>
+
+    <button
+      @click="store.resetFilters()"
+      class="mt-4 bg-gray-200 px-4 py-2 rounded"
+    >
+      Reset Filter
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useProductsStore } from "@/store/useProductsStore";
+
+const store = useProductsStore();
+
+const updatePriceRange = (event, index) => {
+  const newRange = [...store.priceRange];
+  newRange[index] = parseInt(event.target.value, 10);
+  store.setPriceRange(newRange);
+};
+</script>
diff --git a/components/Products/ProductGrid.vue b/components/Products/ProductGrid.vue
new file mode 100644
index 00000000..cbec9d8c
--- /dev/null
+++ b/components/Products/ProductGrid.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="w-full md:w-3/4 p-4">
+    <div class="flex justify-end mb-4">
+      <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>
+        <ProductCard
+          v-for="product in store.filteredProducts"
+          :key="product.id"
+          :product="product"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useProductsStore } from "@/store/useProductsStore";
+
+const store = useProductsStore();
+
+onMounted(() => {
+  store.fetchProducts();
+});
+</script>
diff --git a/components/Products/ProductSort.vue b/components/Products/ProductSort.vue
new file mode 100644
index 00000000..a84b28ad
--- /dev/null
+++ b/components/Products/ProductSort.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex items-center">
+    <label for="sort-by" class="mr-2">Sort by:</label>
+    <select
+      id="sort-by"
+      :value="store.sortBy"
+      @change="store.setSortBy($event.target.value)"
+      class="p-2 border rounded"
+    >
+      <option value="popularity">Popularity</option>
+      <option value="price-asc">Price: Low to High</option>
+      <option value="price-desc">Price: High to Low</option>
+      <option value="newest">Newest</option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+import { useProductsStore } from "@/store/useProductsStore";
+
+const store = useProductsStore();
+</script>
diff --git a/pages/products.vue b/pages/products.vue
index 5d1dafdc..05c6a3c3 100644
--- a/pages/products.vue
+++ b/pages/products.vue
@@ -1,5 +1,10 @@
 <template>
-  <ProductsShowAll />
+  <div class="container mx-auto">
+    <div class="flex flex-wrap">
+      <ProductFilter />
+      <ProductGrid />
+    </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/store/useProductsStore.js b/store/useProductsStore.js
new file mode 100644
index 00000000..98792ade
--- /dev/null
+++ b/store/useProductsStore.js
@@ -0,0 +1,119 @@
+import { defineStore } from "pinia";
+import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
+
+export const useProductsStore = defineStore("products", {
+  state: () => ({
+    products: [],
+    loading: false,
+    error: null,
+    sortBy: "popularity",
+    selectedSizes: [],
+    selectedColors: [],
+    priceRange: [0, 1000],
+    productTypes: [],
+  }),
+
+  getters: {
+    filteredProducts(state) {
+      let products = [...state.products];
+
+      // Filter by product type
+      const selectedTypes = state.productTypes
+        .filter((t) => t.checked)
+        .map((t) => t.name.toLowerCase());
+
+      if (selectedTypes.length > 0) {
+        products = products.filter((product) => {
+          const productCategories =
+            product.productCategories?.nodes.map((cat) =>
+              cat.name.toLowerCase()
+            ) || [];
+          return selectedTypes.some((type) =>
+            productCategories.includes(type)
+          );
+        });
+      }
+
+      // Filter by price
+      products = products.filter((product) => {
+        if (!product.price) return false;
+        const price = parseFloat(product.price.replace(/[^0-9.-]+/g, ""));
+        return price >= state.priceRange[0] && price <= state.priceRange[1];
+      });
+
+      // Sort products
+      return [...products].sort((a, b) => {
+        const priceA = parseFloat(a.price.replace(/[^0-9.-]+/g, ""));
+        const priceB = parseFloat(b.price.replace(/[^0-9.-]+/g, ""));
+
+        switch (state.sortBy) {
+          case "price-asc":
+            return priceA - priceB;
+          case "price-desc":
+            return priceB - priceA;
+          case "newest":
+            return b.databaseId - a.databaseId;
+          default: // 'popularity'
+            return 0;
+        }
+      });
+    },
+    getUniqueProductTypes(state) {
+        const productTypes = state.products.flatMap(p => p.productCategories.nodes);
+        const unique = [];
+        const map = new Map();
+        for (const item of productTypes) {
+            if(!map.has(item.id)){
+                map.set(item.id, true);
+                unique.push({
+                    id: item.id,
+                    name: item.name,
+                    checked: false
+                });
+            }
+        }
+        return unique;
+    }
+  },
+
+  actions: {
+    async fetchProducts() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const { data, error } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY);
+
+        if (error.value) {
+          throw new Error(error.value);
+        }
+
+        if (data.value && data.value.products && data.value.products.nodes) {
+          this.products = data.value.products.nodes;
+          this.productTypes = this.getUniqueProductTypes;
+        }
+      } catch (e) {
+        this.error = e.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+    setSortBy(sortBy) {
+      this.sortBy = sortBy;
+    },
+    setPriceRange(range) {
+      this.priceRange = range;
+    },
+    toggleProductType(id) {
+        const productType = this.productTypes.find(pt => pt.id === id);
+        if (productType) {
+            productType.checked = !productType.checked;
+        }
+    },
+    resetFilters() {
+        this.selectedSizes = [];
+        this.selectedColors = [];
+        this.priceRange = [0, 1000];
+        this.productTypes.forEach(pt => pt.checked = false);
+    }
+  },
+});

From 411571d543cecd555293a9db77b869fc1d88033d Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sun, 29 Jun 2025 19:28:32 +0200
Subject: [PATCH 2/3] Update useProductsStore.js

---
 store/useProductsStore.js | 46 +++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/store/useProductsStore.js b/store/useProductsStore.js
index 98792ade..0250e248 100644
--- a/store/useProductsStore.js
+++ b/store/useProductsStore.js
@@ -59,21 +59,21 @@ export const useProductsStore = defineStore("products", {
       });
     },
     getUniqueProductTypes(state) {
-        const productTypes = state.products.flatMap(p => p.productCategories.nodes);
-        const unique = [];
-        const map = new Map();
-        for (const item of productTypes) {
-            if(!map.has(item.id)){
-                map.set(item.id, true);
-                unique.push({
-                    id: item.id,
-                    name: item.name,
-                    checked: false
-                });
-            }
+      const productTypes = state.products.flatMap((p) => p.productCategories.nodes);
+      const unique = [];
+      const map = new Map();
+      for (const item of productTypes) {
+        if (!map.has(item.id)) {
+          map.set(item.id, true);
+          unique.push({
+            id: item.id,
+            name: item.name,
+            checked: false,
+          });
         }
-        return unique;
-    }
+      }
+      return unique;
+    },
   },
 
   actions: {
@@ -104,16 +104,16 @@ export const useProductsStore = defineStore("products", {
       this.priceRange = range;
     },
     toggleProductType(id) {
-        const productType = this.productTypes.find(pt => pt.id === id);
-        if (productType) {
-            productType.checked = !productType.checked;
-        }
+      const productType = this.productTypes.find((pt) => pt.id === id);
+      if (productType) {
+        productType.checked = !productType.checked;
+      }
     },
     resetFilters() {
-        this.selectedSizes = [];
-        this.selectedColors = [];
-        this.priceRange = [0, 1000];
-        this.productTypes.forEach(pt => pt.checked = false);
-    }
+      this.selectedSizes = [];
+      this.selectedColors = [];
+      this.priceRange = [0, 1000];
+      this.productTypes.forEach((pt) => (pt.checked = false));
+    },
   },
 });

From 3469eb91c71e3f87f93795cb6e049ff2bb4da6c7 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sun, 29 Jun 2025 19:29:40 +0200
Subject: [PATCH 3/3] Update useProductsStore.js

---
 store/useProductsStore.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/store/useProductsStore.js b/store/useProductsStore.js
index 0250e248..aed52563 100644
--- a/store/useProductsStore.js
+++ b/store/useProductsStore.js
@@ -26,11 +26,9 @@ export const useProductsStore = defineStore("products", {
         products = products.filter((product) => {
           const productCategories =
             product.productCategories?.nodes.map((cat) =>
-              cat.name.toLowerCase()
+              cat.name.toLowerCase(),
             ) || [];
-          return selectedTypes.some((type) =>
-            productCategories.includes(type)
-          );
+          return selectedTypes.some((type) => productCategories.includes(type));
         });
       }
 
@@ -59,7 +57,9 @@ export const useProductsStore = defineStore("products", {
       });
     },
     getUniqueProductTypes(state) {
-      const productTypes = state.products.flatMap((p) => p.productCategories.nodes);
+      const productTypes = state.products.flatMap(
+        (p) => p.productCategories.nodes,
+      );
       const unique = [];
       const map = new Map();
       for (const item of productTypes) {