Add product filter and sort

components/Products/ProductsFilters.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="w-full md:w-64 flex-shrink-0">
+    <div class="bg-white px-8 pb-8 sm:px-6 sm:pb-6 rounded-lg shadow-sm">
+      <div class="mb-8">
+        <h3 class="font-semibold mb-4">PRODUKT TYPE</h3>
+        <div class="space-y-2">
+          <CommonCheckbox
+            v-for="type in productTypes"
+            :key="type.id"
+            :id="type.id"
+            :label="type.name"
+            :checked="type.checked"
+            @change="() => toggleProductType(type.id)"
+          />
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <h3 class="font-semibold mb-4">PRIS</h3>
+        <CommonRangeSlider
+          id="price-range"
+          label="Pris"
+          :min="0"
+          :max="1000"
+          :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
+            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
+            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" @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

@@ -30,21 +30,23 @@
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
 
 const props = defineProps({
   categoryId: { type: String, required: false },
   categorySlug: { type: String, required: false },
 });
 
 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.
  *

components/Products/ProductsSort.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="flex items-center gap-2">
+    <label for="sort-select" class="text-base text-gray-700">Sortering:</label>
+    <select
+      id="sort-select"
+      class="min-w-[140px] border border-gray-200 rounded-lg px-3 py-2 text-base bg-gray-50 text-gray-700 focus:outline-none"
+      disabled
+    >
+      <option value="popular">Populær</option>
+      <option value="price-low">Pris: Lav til Høy</option>
+      <option value="price-high">Pris: Høy til Lav</option>
+      <option value="newest">Nyeste</option>
+    </select>
+  </div>
+</template>

components/common/Checkbox.vue

@@ -0,0 +1,15 @@
+<template>
+  <label class="flex items-center space-x-2 cursor-pointer">
+    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
+    <span class="text-sm">{{ label }}</span>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+});
+</script>

components/common/ColorSwatch.vue

@@ -0,0 +1,20 @@
+<template>
+  <span
+    class="inline-block w-8 h-8 rounded-full border-2 border-white shadow"
+    :style="{ backgroundColor: color }"
+    :title="title"
+  ></span>
+</template>
+
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: '#3b82f6', // Tailwind blue-500
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>

components/common/RangeSlider.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-full">
+    <input
+      type="range"
+      min="0"
+      max="1000"
+      class="w-full accent-blue-600"
+      disabled
+    />
+    <div class="flex justify-between text-sm mt-1">
+      <span>kr 0</span>
+      <span>kr 1000</span>
+    </div>
+  </div>
+</template>

pages/products.vue

@@ -1,19 +1,79 @@
 <template>
-  <ProductsShowAll />
+  <div class="container mx-auto px-4 py-8">
+    <div class="flex flex-col md:flex-row gap-8">
+      <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
+          </h1>
+          <ProductsSort v-model="sortBy" />
+        </div>
+        <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>