collection-filter.antlers.html

---
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>