Test filter live

Author: w3bdesign

components/Products/ProductsFilters.vue

@@ -4,9 +4,14 @@
       <div class="mb-8">
         <h3 class="font-semibold mb-4">PRODUKT TYPE</h3>
         <div class="space-y-2">
-          <CommonCheckbox id="clothing" label="Clothing" :checked="false" />
-          <CommonCheckbox id="tshirts" label="Tshirts" :checked="false" />
-          <CommonCheckbox id="uncategorized" label="Uncategorized" :checked="false" />
+          <CommonCheckbox
+            v-for="type in productTypes"
+            :key="type.id"
+            :id="type.id"
+            :label="type.name"
+            :checked="type.checked"
+            @change="() => toggleProductType(type.id)"
+          />
         </div>
       </div>
 
@@ -17,32 +22,62 @@
           label="Pris"
           :min="0"
           :max="1000"
-          :value="1000"
-          :startValue="0"
-          :formatValue="(v) => `kr ${v}`"
-          :disabled="true"
+          :value="priceRange[1]"
+          :startValue="priceRange[0]"
+          :disabled="false"
+          @input="(value) => setPriceRange([priceRange[0], value])"
         />
       </div>
 
       <div class="mb-8">
         <h3 class="font-semibold mb-4">STØRRELSE</h3>
         <div class="grid grid-cols-3 gap-2">
-          <CommonButton :selected="true" variant="filter" :disabled="true">
-            Large
+          <CommonButton
+            v-for="size in sizes"
+            :key="size"
+            :selected="selectedSizes.includes(size)"
+            variant="filter"
+            @click="() => toggleSize(size)"
+          >
+            {{ size }}
           </CommonButton>
         </div>
       </div>
 
       <div class="mb-8">
         <h3 class="font-semibold mb-4">FARGE</h3>
         <div class="grid grid-cols-3 gap-2">
-          <CommonColorSwatch color="#3b82f6" title="Blue" />
+          <CommonColorSwatch
+            v-for="color in colors"
+            :key="color.name"
+            :color="color.hex"
+            :title="color.name"
+            :class="{ 'ring-2 ring-offset-2 ring-gray-900': selectedColors.includes(color.name) }"
+            @click="() => toggleColor(color.name)"
+            style="cursor:pointer"
+          />
         </div>
       </div>
 
-      <CommonButton variant="reset" class="mt-4 w-full" :disabled="true">
+      <CommonButton variant="reset" class="mt-4 w-full" @click="resetFilters">
         Resett filter
       </CommonButton>
     </div>
   </div>
 </template>
+
+<script setup>
+defineProps({
+  productTypes: Array,
+  toggleProductType: Function,
+  priceRange: Array,
+  setPriceRange: Function,
+  sizes: Array,
+  selectedSizes: Array,
+  toggleSize: Function,
+  colors: Array,
+  selectedColors: Array,
+  toggleColor: Function,
+  resetFilters: Function,
+});
+</script>

components/Products/ProductsShowAll.vue

@@ -37,14 +37,16 @@ const props = defineProps({
 
 const config = useRuntimeConfig();
 
-const products = computed(() => {
-  return (
-    allCategoryProducts.value?.productCategory?.products?.nodes ||
-    allProducts.value?.products?.nodes ||
-    []
-  );
+const props = defineProps({
+  products: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
 });
 
+const products = computed(() => props.products);
+
 /**
  * Returns the path and query parameters for a product link.
  *

pages/products.vue

@@ -1,34 +1,79 @@
 <template>
   <div class="container mx-auto px-4 py-8">
     <div class="flex flex-col md:flex-row gap-8">
-      <ProductsFilters />
+      <ProductsFilters
+        :productTypes="productTypes"
+        :toggleProductType="toggleProductType"
+        :priceRange="priceRange"
+        :setPriceRange="setPriceRange"
+        :sizes="sizes"
+        :selectedSizes="selectedSizes"
+        :toggleSize="toggleSize"
+        :colors="colors"
+        :selectedColors="selectedColors"
+        :toggleColor="toggleColor"
+        :resetFilters="resetFilters"
+      />
       <div class="flex-1">
         <div
           class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8"
         >
           <h1 class="text-xl sm:text-2xl font-medium text-center sm:text-left">
-            Produkter <span class="text-gray-500">(0)</span>
+            Produkter
           </h1>
-          <ProductsSort />
+          <ProductsSort v-model="sortBy" />
         </div>
-        <ProductsShowAll />
+        <ProductsShowAll
+          :sortBy="sortBy"
+          :selectedSizes="selectedSizes"
+          :selectedColors="selectedColors"
+          :priceRange="priceRange"
+          :productTypes="productTypes"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-useHead({
-  title: "Products",
-  titleTemplate: "%s - Nuxt 3 Woocommerce",
-  meta: [
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
-    {
-      hid: "description",
-      name: "description",
-      content: "Nuxt 3 Woocommerce",
-    },
-  ],
-  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
-});
+const sortBy = ref("popular");
+const selectedSizes = ref([]);
+const selectedColors = ref([]);
+const priceRange = ref([0, 1000]);
+const productTypes = ref([
+  { id: "clothing", name: "Clothing", checked: false },
+  { id: "tshirts", name: "Tshirts", checked: false },
+  { id: "uncategorized", name: "Uncategorized", checked: false },
+]);
+const sizes = ref(["Large"]);
+const colors = ref([{ name: "Blue", hex: "#3b82f6" }]);
+
+function toggleProductType(id) {
+  productTypes.value = productTypes.value.map((type) =>
+    type.id === id ? { ...type, checked: !type.checked } : type
+  );
+}
+function setPriceRange(newRange) {
+  priceRange.value = newRange;
+}
+function toggleSize(size) {
+  if (selectedSizes.value.includes(size)) {
+    selectedSizes.value = selectedSizes.value.filter((s) => s !== size);
+  } else {
+    selectedSizes.value = [...selectedSizes.value, size];
+  }
+}
+function toggleColor(color) {
+  if (selectedColors.value.includes(color)) {
+    selectedColors.value = selectedColors.value.filter((c) => c !== color);
+  } else {
+    selectedColors.value = [...selectedColors.value, color];
+  }
+}
+function resetFilters() {
+  selectedSizes.value = [];
+  selectedColors.value = [];
+  priceRange.value = [0, 1000];
+  productTypes.value = productTypes.value.map((type) => ({ ...type, checked: false }));
+}
 </script>