Skip to content

Commit b189aff

Browse files
w3bdesignw3bdesign
committed
Add product filter and sort
1 parent 8cebf2c commit b189aff

File tree

6 files changed

+120
-1
lines changed

6 files changed

+120
-1
lines changed

‎components/Products/ProductFilters.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="w-full md:w-64 flex-shrink-0">
3+
<div class="bg-white px-8 pb-8 sm:px-6 sm:pb-6 rounded-lg shadow-sm">
4+
<!-- PRODUCT TYPE -->
5+
<div class="mb-8">
6+
<h3 class="font-semibold mb-4">PRODUKT TYPE</h3>
7+
<div class="space-y-2">
8+
<!-- Example checkboxes, replace with dynamic content later -->
9+
<div class="flex items-center">
10+
<input type="checkbox" id="type1" class="mr-2" />
11+
<label for="type1" class="text-sm">Type 1</label>
12+
</div>
13+
<div class="flex items-center">
14+
<input type="checkbox" id="type2" class="mr-2" />
15+
<label for="type2" class="text-sm">Type 2</label>
16+
</div>
17+
</div>
18+
</div>
19+
20+
<!-- PRICE -->
21+
<div class="mb-8">
22+
<h3 class="font-semibold mb-4">PRIS</h3>
23+
<div class="flex items-center space-x-2">
24+
<input type="range" min="0" max="1000" class="w-full" />
25+
<span class="text-sm">kr 0 - kr 1000</span>
26+
</div>
27+
</div>
28+
29+
<!-- SIZE -->
30+
<div class="mb-8">
31+
<h3 class="font-semibold mb-4">STØRRELSE</h3>
32+
<div class="grid grid-cols-3 gap-2">
33+
<button class="px-2 py-1 rounded border text-sm">S</button>
34+
<button class="px-2 py-1 rounded border text-sm">M</button>
35+
<button class="px-2 py-1 rounded border text-sm">L</button>
36+
</div>
37+
</div>
38+
39+
<!-- COLOR -->
40+
<div class="mb-8">
41+
<h3 class="font-semibold mb-4">FARGE</h3>
42+
<div class="grid grid-cols-3 gap-2">
43+
<button class="w-8 h-8 rounded-full bg-red-500"></button>
44+
<button class="w-8 h-8 rounded-full bg-blue-500"></button>
45+
<button class="w-8 h-8 rounded-full bg-green-500"></button>
46+
</div>
47+
</div>
48+
49+
<button class="mt-4 w-full py-2 rounded bg-gray-200 text-gray-700 text-sm font-medium">Resett filter</button>
50+
</div>
51+
</div>
52+
</template>
53+
54+
<script setup>
55+
// No logic yet, purely presentational
56+
</script>

‎components/Products/ProductSort.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="flex flex-wrap items-center justify-center sm:justify-end gap-2 sm:gap-4">
3+
<label for="sort-select" class="text-sm font-medium">Sortering:</label>
4+
<select
5+
id="sort-select"
6+
class="min-w-[140px] border rounded-md px-3 py-1.5 text-sm"
7+
disabled
8+
>
9+
<option value="popular">Populær</option>
10+
<option value="price-low">Pris: Lav til Høy</option>
11+
<option value="price-high">Pris: Høy til Lav</option>
12+
<option value="newest">Nyeste</option>
13+
</select>
14+
</div>
15+
</template>
16+
17+
<script setup>
18+
// No logic yet, purely presentational
19+
</script>

‎components/common/Button.vue

Whitespace-only changes.

‎components/common/Checkbox.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<label class="flex items-center space-x-2 cursor-pointer">
3+
<input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
4+
<span class="text-sm"><slot>Checkbox</slot></span>
5+
</label>
6+
</template>
7+
8+
<script setup>
9+
// No logic yet, presentational only
10+
</script>

‎components/common/RangeSlider.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="flex items-center space-x-2 w-full">
3+
<input
4+
type="range"
5+
min="0"
6+
max="1000"
7+
class="w-full accent-blue-600"
8+
disabled
9+
/>
10+
<span class="text-sm">kr 0 - kr 1000</span>
11+
</div>
12+
</template>
13+
14+
<script setup>
15+
// No logic yet, presentational only
16+
</script>

‎pages/products.vue

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
11
<template>
2-
<ProductsShowAll />
2+
<div class="container mx-auto px-4 py-8">
3+
<div class="flex flex-col md:flex-row gap-8">
4+
<!-- Sidebar Filters -->
5+
<ProductFilters />
6+
7+
<!-- Main Content -->
8+
<div class="flex-1">
9+
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8">
10+
<h1 class="text-xl sm:text-2xl font-medium text-center sm:text-left">
11+
Produkter <span class="text-gray-500">(0)</span>
12+
</h1>
13+
<ProductSort />
14+
</div>
15+
<ProductsShowAll />
16+
</div>
17+
</div>
18+
</div>
319
</template>
420

521
<script setup>
22+
23+
624
useHead({
725
title: "Products",
826
titleTemplate: "%s - Nuxt 3 Woocommerce",

0 commit comments

Comments
 (0)