Filter

Author: w3bdesign

components/Products/ProductFilter.vue

@@ -1,56 +1,43 @@
 <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>
+    <h2 class="text-lg font-bold mb-4">Filters</h2>
+    <div>
+      <h3 class="text-md font-semibold mb-2">Product Type</h3>
+      <div>
+        <input type="checkbox" id="clothing" />
+        <label for="clothing" class="ml-2">Clothing</label>
+      </div>
+      <div>
+        <input type="checkbox" id="tshirts" />
+        <label for="tshirts" class="ml-2">T-shirts</label>
+      </div>
+      <div>
+        <input type="checkbox" id="uncategorized" />
+        <label for="uncategorized" class="ml-2">Uncategorized</label>
+      </div>
     </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 class="mt-4">
+      <h3 class="text-md font-semibold mb-2">Price</h3>
+      <div class="flex items-center">
+        <input type="range" min="0" max="1000" class="w-full" />
+      </div>
     </div>
-
-    <button
-      @click="store.resetFilters()"
-      class="mt-4 bg-gray-200 px-4 py-2 rounded"
-    >
+    <div class="mt-4">
+      <h3 class="text-md font-semibold mb-2">Size</h3>
+      <div>
+        <input type="checkbox" id="large" />
+        <label for="large" class="ml-2">Large</label>
+      </div>
+    </div>
+    <div class="mt-4">
+      <h3 class="text-md font-semibold mb-2">Color</h3>
+      <div>
+        <input type="radio" id="blue" name="color" />
+        <label for="blue" class="ml-2">Blue</label>
+      </div>
+    </div>
+    <button 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>

pages/products.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="container mx-auto">
     <div class="flex flex-wrap">
-      <div class="w-full md:w-1/4 p-4">
-        <!-- Filter placeholder -->
-        <h2 class="text-lg font-bold mb-4">Filters</h2>
-        <p>Filter options will go here.</p>
-      </div>
+      <ProductFilter />
       <div class="w-full md:w-3/4 p-4">
         <ProductsShowAll :products="data.products.nodes" />
       </div>