Skip to content

Instantly share code, notes, and snippets.

@jacksleight
Last active February 21, 2024 10:08
Show Gist options
  • Save jacksleight/aabb9bea930f88427d7b8c546041b3c7 to your computer and use it in GitHub Desktop.
Save jacksleight/aabb9bea930f88427d7b8c546041b3c7 to your computer and use it in GitHub Desktop.
---
sorts:
title: Name
price:asc: Price (Low – High)
price:desc: Price (High – Low)
features:
- Glitter
- Lights
- Sparkles
- Wheels
---
<main class="max-w-6xl mx-auto px-6 grid grid-cols-[1fr_3fr] gap-6">
<aside class="bg-gray-200 rounded-lg p-8 min-w-0">
<form class="space-y-6">
<div>
<div class="mb-1 font-bold">Sort</div>
<select name="sort" class="w-full rounded">
<option value="">Default</option>
{{ foreach:view:sorts }}
<option
value="{{ key }}"
{{ get:sort == key ?= 'selected' }}>
{{ value }}
</option>
{{ /foreach:view:sorts }}
</select>
</div>
<div>
<div class="mb-1 font-bold">Search</div>
<input class="min-w-0 w-full rounded"
type="text"
name="keyword"
placeholder="Keyword"
value="{{ get:keyword | sanitize }}">
</div>
<div>
<div class="mb-1 font-bold">Price</div>
<div class="flex gap-2">
<input class="min-w-0 rounded"
type="number"
name="min_price"
placeholder="Min"
value="{{ get:min_price | sanitize }}">
<input class="min-w-0 rounded"
type="number"
name="max_price"
placeholder="Max"
value="{{ get:max_price | sanitize }}">
</div>
</div>
<div>
<div class="mb-1 font-bold">Category</div>
<select name="category" class="w-full rounded">
<option value="">All</option>
{{ taxonomy:categories }}
<option
value="{{ slug }}"
{{ get:category == slug ?= 'selected' }}>
{{ title }}
</option>
{{ /taxonomy:categories }}
</select>
</div>
<div>
<div class="mb-1 font-bold">Sizes</div>
{{ taxonomy:sizes }}
<label>
<input class="rounded"
type="checkbox"
name="sizes[]"
value="{{ slug }}"
{{ (get:sizes | contains(slug)) ?= 'checked' }}>
{{ title }}<br>
</label>
{{ /taxonomy:sizes }}
</div>
<div>
<div class="mb-1 font-bold">Colors</div>
{{ taxonomy:colors }}
<label>
<input class="rounded"
type="checkbox"
name="colors[]"
value="{{ slug }}"
{{ (get:colors | contains(slug)) ?= 'checked' }}>
{{ title }}<br>
</label>
{{ /taxonomy:colors }}
</div>
<div>
<div class="mb-1 font-bold">Feature</div>
{{ view:features }}
<label>
<input
type="radio"
name="feature"
value="{{ value }}"
{{ get:feature == value ?= 'checked' }}>
{{ value }}<br>
</label>
{{ /view:features }}
</div>
<div class="flex gap-3 items-center">
<button class="bg-hot-pink text-white px-4 py-2 rounded">
Filter
</button>
<a href="{{ url }}" class="text-gray-500">
Reset
</a>
</div>
</form>
</aside>
<section>
{{ collection:products as="products"
:sort="get:sort ?? void"
:title:contains="get:keyword ?? void"
:price:gte="get:min_price ?? void"
:price:lte="get:max_price ?? void"
:taxonomy:categories="get:category"
:taxonomy:sizes:any="get:sizes"
:taxonomy:colors:all="get:colors"
:feature:is="get:feature ?? void" }}
{{ if no_results }}
<div class="p-8 rounded-lg bg-gray-100 text-center">
Sorry, no results.
</div>
{{ else }}
<div class="grid grid-cols-2 gap-6">
{{ products }}
{{ partial:entry-filter/card }}
{{ /products }}
</div>
{{ /if }}
{{ /collection:products }}
</section>
</main>
@jacksleight
Copy link
Author

Screenshot 2024-02-21 at 10 07 32

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment