Add filter and sorting

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>

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>

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>

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>

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>

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));
+    },
+  },
+});