filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

search implement
Some checks failed
CI / Check Style (push) Has been cancelled
Details
CI / Run Clippy (push) Has been cancelled
Details
CI / Run Tests (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Priec
2026-06-22 20:37:06 +02:00
parent e5cac27010
commit 3b9c2f7d64
12 changed files with 498 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/views/shop/index.html
View File

@@ -5,17 +5,41 @@
{% block content %}
<div class="space-y-8">
<header class="space-y-2">
<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
<header class="space-y-4">
<div class="space-y-2">
<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
</div>
{# Live search: htmx GETs /search as the customer types (debounced) and
swaps only the results below. hx-push-url keeps the URL shareable; the
spinner shows while a request is in flight. Degrades to a normal GET form
submit when JS/htmx is unavailable. #}
<form action="/search" method="get" role="search"
class="relative max-w-md"
hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
hx-trigger="input changed delay:300ms from:input[name='q'], submit"
hx-push-url="true" hx-indicator="#search-spinner">
<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=lang | default(value='sk')) }}"
aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
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>
</form>
</header>
{% if products | length > 0 %}
{% include "shop/_product_grid.html" %}
{% else %}
<div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
{{ t(key="shop-empty", lang=lang | default(value='sk')) }}
<div id="shop-results">
{% include "shop/_results.html" %}
</div>
{% endif %}
</div>
{% endblock content %}