127 lines
8.1 KiB
HTML
127 lines
8.1 KiB
HTML
{# Shared storefront search box + results region, used by the shop index and
|
|
every category page. One form drives the listing: htmx re-runs /search and
|
|
swaps only #shop-results; the toolbar keeps its own DOM state. Triggers: live
|
|
(debounced) typing in the search box, immediate on a sort change, and submit
|
|
(Enter). Degrades to a plain GET form without JS.
|
|
Category is chosen from the sidebar (carried here as a hidden field so it
|
|
survives a search / re-sort). The grid/list view toggle lives next to sort;
|
|
its `view` state is held in Alpine on this wrapper so both the toggle and the
|
|
swapped-in product grid (and `_card.html`) share it.
|
|
Expects: query, selected_category, sort, plus the result vars consumed by
|
|
_results.html. #}
|
|
{% set L = lang | default(value='sk') %}
|
|
<div x-data="{ view: localStorage.getItem('shopView') === 'list' ? 'list' : 'grid' }"
|
|
x-init="$watch('view', v => localStorage.setItem('shopView', v))"
|
|
class="space-y-6">
|
|
<form action="/search" method="get" role="search"
|
|
hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
|
|
hx-push-url="true" hx-indicator="#search-spinner"
|
|
{# The text query runs only on submit (Enter / the Search button); the
|
|
sort / per-page / in-stock controls still apply immediately on change. #}
|
|
hx-trigger="submit, change from:select, change from:input[type='checkbox']"
|
|
class="space-y-3">
|
|
|
|
{# Category comes from the sidebar; keep it on the query so searching /
|
|
re-sorting stays within the active category. #}
|
|
<input type="hidden" name="category" value="{{ selected_category | default(value='all') }}" />
|
|
|
|
<!-- search box -->
|
|
<div class="flex max-w-xl gap-2">
|
|
<div class="relative flex-1">
|
|
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
|
|
{{ ui::icon(name="search", size="size-5") }}
|
|
</span>
|
|
<input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
|
|
placeholder="{{ t(key='search-placeholder', lang=L) }}"
|
|
aria-label="{{ t(key='search-placeholder', lang=L) }}"
|
|
class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
|
|
<span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
|
|
<svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<button type="submit" class="shrink-0 rounded-radius bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
|
{{ t(key="search-button", lang=L) }}
|
|
</button>
|
|
</div>
|
|
|
|
{# Scope indicator: when a category is active, make clear the search is
|
|
limited to it (not the whole shop), with a one-click escape to search
|
|
everything. Category only changes via full navigation (the sidebar), so
|
|
this stays accurate across the toolbar's results-only htmx swaps. #}
|
|
{% if selected_category and selected_category != "all" %}
|
|
{# set_global so the value survives the nested if (a plain `set` inside a
|
|
block is scoped to that block in Tera and wouldn't be visible below). #}
|
|
{% set_global _scope = selected_category_name | default(value="") %}
|
|
{% if selected_category == "none" %}{% set_global _scope = t(key="uncategorized", lang=L) %}{% endif %}
|
|
{% if _scope %}
|
|
<div class="flex max-w-xl flex-wrap items-center gap-2 text-xs">
|
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 font-medium text-primary dark:bg-primary-dark/15 dark:text-primary-dark">
|
|
{{ ui::icon(name="search", size="size-3.5", extra="shrink-0") }}
|
|
{{ t(key="search-scope-in", lang=L) }} <span class="font-semibold">{{ _scope }}</span>
|
|
</span>
|
|
<a href="/search{% if query %}?q={{ query | urlencode }}{% endif %}"
|
|
class="font-medium text-on-surface/60 underline-offset-2 hover:text-primary hover:underline dark:text-on-surface-dark/60 dark:hover:text-primary-dark">
|
|
{{ t(key="search-scope-all", lang=L) }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<!-- sort + product card style switch -->
|
|
<div class="flex flex-wrap items-center justify-end gap-3">
|
|
<label class="flex items-center gap-2 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
|
|
{{ t(key="sort-label", lang=L) }}
|
|
{% include "shop/_sort_select.html" %}
|
|
</label>
|
|
|
|
<!-- per-page count -->
|
|
<label class="flex items-center gap-2 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
|
|
{{ t(key="per-page-label", lang=L) }}
|
|
<select name="per_page"
|
|
class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
|
|
{% for opt in per_page_options %}
|
|
<option value="{{ opt }}"{% if per_page == opt %} selected{% endif %}>{{ opt }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
|
|
<!-- in stock only -->
|
|
<label class="flex items-center gap-2 text-sm text-on-surface dark:text-on-surface-dark">
|
|
<input type="checkbox" name="in_stock" value="1"{% if in_stock %} checked{% endif %}
|
|
class="size-4 rounded border-outline text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:text-primary-dark" />
|
|
{{ t(key="filter-in-stock", lang=L) }}
|
|
</label>
|
|
|
|
<!-- grid / list view toggle -->
|
|
<div class="inline-flex gap-0.5 rounded-radius border border-outline p-0.5 dark:border-outline-dark" role="group"
|
|
aria-label="{{ t(key='view-grid', lang=L) }} / {{ t(key='view-list', lang=L) }}">
|
|
<button type="button" @click="view = 'grid'" :aria-pressed="view === 'grid'"
|
|
class="inline-flex size-8 items-center justify-center rounded-radius transition"
|
|
:class="view === 'grid' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
|
|
aria-label="{{ t(key='view-grid', lang=L) }}"
|
|
title="{{ t(key='view-grid', lang=L) }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
|
|
<path d="M3 3h6v6H3V3Zm8 0h6v6h-6V3ZM3 11h6v6H3v-6Zm8 0h6v6h-6v-6Z" />
|
|
</svg>
|
|
</button>
|
|
<button type="button" @click="view = 'list'" :aria-pressed="view === 'list'"
|
|
class="inline-flex size-8 items-center justify-center rounded-radius transition"
|
|
:class="view === 'list' ? 'bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark' : 'text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark'"
|
|
aria-label="{{ t(key='view-list', lang=L) }}"
|
|
title="{{ t(key='view-list', lang=L) }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4">
|
|
<path d="M3 4h14v2.5H3V4Zm0 4.75h14v2.5H3v-2.5ZM3 13.5h14V16H3v-2.5Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="shop-results">
|
|
{% include "shop/_results.html" %}
|
|
</div>
|
|
</div>
|