search now fixed and also the elements of the old site are back

This commit is contained in:
Priec
2026-06-25 22:27:19 +02:00
parent 5f7ddce6a7
commit 6dd1164c65
9 changed files with 139 additions and 200 deletions

View File

@@ -1,6 +1,6 @@
brand = Kompress eshop
brand = WWW.KOMPRESS.SK, s.r.o.
hello-world = Hello world!
meta-description = Kompress eshop
meta-description = Manufacturer and distributor of medical aids and supplies
nav-home = Home
nav-about = About
nav-blog = Blog

View File

@@ -1,6 +1,6 @@
brand = Kompress eshop
brand = WWW.KOMPRESS.SK, s.r.o.
hello-world = Hello world!
meta-description = Kompress eshop
meta-description = Manufacturer and distributor of medical aids and supplies
nav-home = Home
nav-about = About
nav-blog = Blog

View File

@@ -1,6 +1,6 @@
brand = Kompress eshop
brand = WWW.KOMPRESS.SK, s.r.o.
hello-world = Ahoj svet!
meta-description = Kompress eshop
meta-description = Výrobca a distribútor zdravotníckych pomôcok a potrieb
nav-home = Domov
nav-about = O mne
nav-blog = Blog

File diff suppressed because one or more lines are too long

BIN
assets/static/img/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

@@ -97,15 +97,9 @@
{% set hamburger_icon = ui::icon(name="hamburger", size="size-6") %}
{{ ui::icon_button(aria_label=t(key='categories', lang=lang | default(value='sk')), attrs='@click="cats = !cats" :aria-expanded="cats"', extra="lg:hidden", icon=hamburger_icon) }}
<!-- logo lockup: blue cross tile + wordmark + medical-supplies subtitle -->
<a href="/" class="flex shrink-0 items-center gap-2.5">
<span class="inline-flex size-9 items-center justify-center rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="10" y="3" width="4" height="18" rx="1.5"></rect><rect x="3" y="10" width="18" height="4" rx="1.5"></rect></svg>
</span>
<span class="flex flex-col leading-none">
<span class="text-lg font-extrabold tracking-tight text-primary dark:text-primary-dark">{{ t(key="brand", lang=lang | default(value='sk')) }}</span>
<span class="hidden text-[10px] font-semibold uppercase tracking-wider text-on-surface/50 sm:block dark:text-on-surface-dark/50">{{ t(key="brand-subtitle", lang=lang | default(value='sk')) }}</span>
</span>
<!-- real KOMPRESS logo from www.e-shop.kompress.sk -->
<a href="/" class="flex shrink-0 items-center">
<img src="/static/img/logo.jpg" alt="{{ t(key='brand', lang=lang | default(value='sk')) }}" width="260" height="52" class="h-8 w-auto dark:rounded-radius dark:bg-white dark:px-1.5 dark:py-0.5" />
</a>
<!-- in-header search → existing GET /search (q param). Only on the home

View File

@@ -62,7 +62,13 @@
{{ 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>
{# This link descends from the search form, so it inherits its
hx-target="#shop-results" / hx-swap="innerHTML". Switching scope is a
real navigation (new breadcrumb, sidebar state, full-page response),
so override the inherited target back to the body — otherwise the
boosted full page gets nested inside the results region. #}
<a href="/search{% if query %}?q={{ query | urlencode }}{% endif %}"
hx-target="body" hx-swap="innerHTML"
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>

View File

@@ -1,184 +0,0 @@
# Design parity — Kompress mockup vs current storefront
Tracks the gap between the imported Claude Design mockup (`Kompress-eshop.html`,
project `eshop` on claude.ai/design) and the live storefront. The home page body
(featured grid + right rail) and the medicalblue accent are **done**; this file
lists everything else from the mockup that is still missing or only halfwired, so
it can be picked up incrementally.
Constraints for all items: **htmx + Alpine + PenguinUI + Tailwind tokens only.**
Express colors with the existing design tokens (`bg-primary`, `bg-surface-alt`,
`border-outline`, `dark:*` …) — never inline hex — so light **and** dark both work.
PenguinUI is copypaste: lift markup out of `penguinui-components/<name>/…`
(readonly, never `{% include %}`'d) and adapt at the usesite.
Legend: 🟢 backend already exists, only UI missing · 🟡 partial · 🔴 netnew.
---
## A. Global chrome (`assets/views/base.html`)
These affect every page, so they live in `base.html`, not the home template.
> **✅ Implemented (pass 2)** — A1A6 are now built in `base.html`, with i18n keys
> added to `assets/i18n/{sk,en}/main.ftl` (`top-contact`, `search-button`,
> `welcome`, `brand-subtitle`, `footer-*`, `hotline`, …). Verified: `/`, `/shop`,
> `/login`, `/register`, `/cart`, `/search?q=` all 200, no render errors.
> The `Kontakt` / `Mapa stránky` top-bar links and the footer info links point to
> `#` until real pages exist.
### A1. Top utility bar — ✅ done
Mockup: thin white bar above the header, rightaligned links *Kontakt* · *Mapa
stránky*.
- New `<div>` strip at the very top of `base.html`, `border-b border-outline
bg-surface text-xs text-on-surface/70`.
- Links to a future `/kontakt` and `/sitemap` (or existing pages).
- Low effort, no backend.
### A2. Inheader search bar — ✅ done
Mockup: fullwidth search input with a magnifier icon + blue **Hľadať** submit
button, centered in the header.
- **Backend already exists**: `GET /search` (`src/controllers/shop.rs:353`,
`run_search` at `:90`, fragment `assets/views/shop/_search.html`). Just needs a
header form: `<form action="/search" method="get">` with `name="q"`, optionally
`hx-get="/search" hx-trigger="keyup changed delay:300ms"` for live results.
- Copy markup from `penguinui-components/navbar/with-search.html` and/or
`penguinui-components/text-input/search-input.html`.
- Medium effort — mostly wiring the existing endpoint into the header layout.
### A3. Logo lockup with subtitle — ✅ done
Mockup: rounded blue tile with a "+" cross glyph + **KOMPRESS** + uppercase
subtitle *zdravotnícke potreby*.
- Current logo is a plain text wordmark in `base.html`. Add the icon tile
(`bg-primary text-on-primary`, `rounded-radius`) and the muted subtitle line.
- Cross SVG is in the mockup (two rounded `<rect>`s). Low effort.
### A4. Account button (twoline) — ✅ done
Mockup: person icon + stacked *Vitajte* / *Prihláste sa* (or the customer name when
logged in).
- Loggedin/out state already available via `logged_in_customer` /
`customer_name` and the existing `partials/profile_menu.html`.
- Restyle the login link / profile menu trigger into the twoline button. Low effort.
### A5. Cart button with text label — ✅ done
Mockup: cart icon + red count badge + stacked *Košík* / *N produktov* label.
- The icon + cookiedriven badge already exist in `base.html` (`cartCount()` JS).
Add the text label beside it; pluralize "produkt/produkty/produktov" (mirror the
mockup's `plural()` helper, or add an i18n key).
- Low effort.
### A6. Footer — ✅ done
Mockup: 4column footer (brand blurb · Informácie · Účet · Kontakt) + copyright bar.
- **No footer exists anywhere** (`grep "<footer"` → none). Add once to `base.html`
after `<main>`.
- Static links; reuse the same i18n keys as the nav. Low effort, high visual payoff.
---
## B. Listing layout (`shop/category.html`, `shop/_product_grid.html`)
The mockup's body is really a **category/listing** layout. The home page borrows its
look; the real listing pages should adopt the rest.
> **✅ Implemented (pass 3)** — reusable `ui::crumb` / `ui::crumb_current` chevron
> breadcrumb macros (`assets/views/macros/ui.html`), wired into `home/index.html`
> (Domov), `shop/index.html` (Domov Obchod) and restyled on `shop/category.html`
> (Domov Obchod category). Added the sidebar **Informácie** card to
> `shop/_sidebar.html`. While verifying, confirmed **B3 sort**, **B4 view toggle**
> and **C1 collapsible tree** were already built — only styling polish remains.
> Verified: `/`, `/shop`, `/partials/categories`, `/search?q=` all 200, no errors.
### B1. Breadcrumbs — ✅ done
Mockup: *Domov Zdravotnícke {kategória}* with chevron separators.
- **Already implemented** on category pages: `breadcrumbs` loop in
`assets/views/shop/category.html:12`. Just needs the mockup's chevron styling and
to be surfaced on more pages (e.g. product detail, optionally a "Domov" crumb on
home).
- Copy from `penguinui-components/breadcrumbs/breadcrumb-with-chevron.html`.
- Low effort (restyle existing).
### B2. Category banner card — 🔴
Mockup: white card with a 148px image placeholder + category description paragraph +
**Viac ** link, shown above the product list.
- Percategory copy/image. Needs a `description` (and optional banner image) field on
the category model, or static copy keyed by slug for now.
- Render as the app card idiom (`border border-outline bg-surface-alt dark:…`).
- Medium effort (model field) or low (static placeholder first).
### B3. Sort control ("Zoradiť podľa") — ✅ already in toolbar
Mockup: styled `<select>` — Predvolené / Cena ↑ / Cena ↓ / Názov AZ /
Najpredávanejšie.
- **Backend already exists**: `sort` query param (`src/controllers/shop.rs:41,81,
179181`). Needs the styled select wired to it (`hx-get` on `change`, preserving
the query + filters via the existing `build_query` helper at `shop.rs:63`).
- Copy from `penguinui-components/select/default-select.html`.
- Low effort.
### B4. View grid/list toggle — 🟢 (done elsewhere)
- **Already implemented** in `assets/views/shop/_product_grid.html` (Alpine `view`
state, persisted to `localStorage`). The mockup's toggle is the same idea; just
align the icon/segmentedbutton styling with the mockup. Cosmetic only.
### B5. "Porovnať" (compare) — 🔴
Mockup: a *Porovnať* button in the listing toolbar.
- **No compare feature exists.** Netnew: selecttocompare state (Alpine + a cookie
or server list) and a compare view. Largest item here — defer unless wanted.
### B6. Listview product card — ✅ done
Mockup list rows are richer (left thumbnail, description, stock pill, price block,
add/options/outofstock button on the right).
- `shop/_card.html` already has a `view === 'list'` horizontal layout. Close already;
optionally add the stock pill (*Skladom* / *Vypredané*) and discount badge to match.
- Low effort.
---
## C. Left sidebar (`assets/views/partials/categories.html` via `/partials/categories`)
Mockup left column = two white cards: a collapsible **Kategórie** tree and an
**Informácie** links card. base.html already renders `#category-sidebar` from
`/partials/categories`, so this is a restyle of that partial.
### C1. Collapsible category tree — ✅ already implemented
Mockup: toplevel groups with +/ chevrons; expanded group shows leaf links, active
leaf highlighted (`bg-primary/10 text-primary font-bold`).
- Style the existing categories partial as a white card with Alpinetoggled
sublists (`x-data="{ open: … }"`). Active state via `aria-current` + the existing
`markActiveNav()` pattern.
- Medium effort.
### C2. "Informácie" links card — ✅ done
Mockup: second sidebar card with Obchodné podmienky / O našej spoločnosti / Naše
obchody / Doprava a platba.
- Static links card; same markup as the contact/stores cards already added to the
home right rail. Low effort.
---
## D. Right rail — mostly done
Implemented on the home page: **Najpredávanejšie** (from featured products), **Naše
obchody** placeholder, **Kontaktujte nás** blue card.
Remaining 🟡:
- **D1. Bestsellers from real sales data** — currently reuses the featured query;
wire to actual order/sales counts when available.
- **D2. "Naše obchody" real photo + page** — replace the placeholder block and link
to a real stores page.
- **D3. Contact hotline** — phone number is hardcoded; move to config/i18n.
---
## Suggested order (quick wins first)
1. Footer (A6) + top utility bar (A1) — pure markup, big visual lift.
2. Header search (A2) + cart label (A5) + logo lockup (A3) — wire existing data.
3. Sort select (B3) + breadcrumb restyle (B1) — backends already exist.
4. Sidebar restyle (C1, C2).
5. Category banner (B2), richer list card (B6).
6. Compare (B5) — only if the feature is actually wanted.
## Reference
- Mockup source extracted to (scratch, regenerate via DesignSync if needed):
`DesignSync get_file` on project `015b8bf5-fd27-4a7e-82d9-d1864a59578c`,
file `Kompress-eshop.html` → `__bundler/template` script holds the real markup.
- PenguinUI workflow: see `penguinui-workflow` memory + `hardcoded-inventory.md`.

View File

@@ -0,0 +1,123 @@
# Real data to port from www.e-shop.kompress.sk
Source: <http://e-shop.kompress.sk/> (live PrestaShop site). This file lists the
real business content that exists on the production site but is **not** yet in
this app, so it can be ported into our catalog / CMS / config.
> Status note: the header branding has already been switched from the
> placeholder "Kompress eshop" to the real logo (`assets/static/img/logo.jpg`,
> the blue **KOMPRESS** wordmark pulled from `/img/logo.jpg` on the live site)
> and the `brand` / `meta-description` i18n keys now carry the real company
> name and tagline.
---
## 1. Company / branding
| Field | Real value |
|---|---|
| Legal name | **WWW.KOMPRESS.SK, s.r.o.** |
| Display name | www.e-shop.kompress.sk |
| Tagline (meta) | *Výrobca a distribútor zdravotníckych pomôcok a potrieb* (Manufacturer and distributor of medical aids and supplies) |
| Logo | blue **KOMPRESS** wordmark — `/img/logo.jpg` (260×52), saved to `assets/static/img/logo.jpg` |
| Keywords | obchod, výroba, distribúcia, striekačky, ihly, krytie, sušenie, jednorázový, materiál, štvorce |
## 2. Contact / legal (for footer + invoicing config)
- **Sídlo (registered seat):** Gunduličova 4, 811 05 Bratislava
*(the homepage footer block also shows "Moyzesova 3, 811 05 Bratislava" — confirm which is current)*
- **Prevádzka (operations / warehouse):** Nádražná 328/62, 015 01 Rajec nad Rajčankou
- **Registrácia:** Obchodný register Okresného súdu v Bratislave, Odd. Sro, Vložka číslo: 102522/B
- **Telefón / hotline:** +421 903 410476
- **E-mail:** kompress@kompress.sk
## 3. "O našej spoločnosti" (About) — CMS page
> WWW.KOMPRESS.SK, s.r.o., Sídlo: Gunduličova 4, 811 05 Bratislava, Prevádzka:
> Nádražná 328/62, 015 01 Rajec nad Rajčankou, Registrácia: Obchodný register
> Okresného súdu v Bratislave Odd. Sro, Vložka číslo: 102522/B. Spoločnosť
> dodáva zdravotnícke potreby a svojich zákazníkov tradične oslovuje vysokou
> kvalitou a nízkou cenou. Samozrejmosťou je doprava tovaru až k rukám
> odberateľa a kvalitný zákaznícky servis.
Other CMS pages present on the live site:
- `O našej spoločnosti``/content/4-kompress`
- `Podmienky používania obchodu` (terms) — `/content/3-podmienky-pouzivania-obchodu`
## 4. Product categories (PrestaShop IDs → name / description)
These are the real catalog categories. Top-level is **Zdravotnícke pomôcky**
(id 7); the rest are its subtree. The text below is the real category
description copy to port.
| ID | Category / description copy |
|---|---|
| 7 | **Zdravotnícke pomôcky** (root) |
| 8 | **Gáza, role, štvorce, prírezy** — Gáza a výrobky z gázy, prírezy, role, zložky, kompresy resp. štvorce, pásy resp. longety, sterilné či nesterilné. Čistá biela bavlna. |
| 9 | **Vata** (buničitá, obväzová, stomatologická) — bielená, v rezoch, v návine, delená na tampóny, skladaná ako harmonika, savá a mäkká. |
| 10 | **Netkané textílie** — Pervin, SMS obaly na sterilizáciu, návleky na obuv. |
| 11 | **Textil, Sanavel** |
| 12 | **Plasty, injekčná technika** — vrecká, tŕne, hadičky, ihly, striekačky, infúzne súpravy, urínové vrecká, odberové vaky, cievky, katétre Nelaton, odsávačky. |
| 13 | **Papier na lôžko** — krepovaný biely/farebný, tissue embosovaný, laminovaný tissue s plastovou spodnou vrstvou. |
| 14 | **Somatické / psycho-somatické prístroje** — pomôcky na elimináciu geopatogénnych zón, elektrosmogu. |
| 15 | **Somavedic** (rad prístrojov) — eliminácia vplyvu geopatogénnych zón, elektrosmogu; dosah 30 m. |
| 16 | **Úprava vody** — voda ako nosič energie. |
| 17 | **Gely a lubrikanty** — gély na sonografiu/ECG, lubrikanty na sondy; balenia 260/500/1000 ml, kanister 5 l. |
| 18 | **Somavedic AURUM** — najúčinnejší z kolekcie. |
| 19 | **Tecasorb** — moderné absorpčné krytie (vlhké aj suché). |
| 20 | (Somavedic — biofyzikálne sledovanie IEGF) |
| 21 | **Obväzy** — fixačné, elastické ovínadlá, sádrové obväzy, gumové škrtidlá MARTIN, ESMARCH. |
| 22 | **Nástroje** — čepelky, peany, nožničky, pinzety. |
| 23 | **Pre invalidov** — vozíky, postele, matrace, návleky, poťahy, stoličky, nádstavce na WC, antidekubitné matrace. |
| 24 | **Proti preležaninám** — antidekubitné matrace, poťahy, podložky, sedáky, motorové pumpy. |
| 25 | **Barle, palice, chodúliky** — chodítka, statické/pohyblivé chodúliky s kolieskami. |
| 26 | **Vozíky pre invalidov - mechanické** — bez pohonu, polohovateľné, skladacie. |
| 27 | **Držadlá, nástavce na WC, operadlá do kúpeľne** — namontovateľné na stenu/umývadlo/WC. |
| 28 | **Ochrana matracov** — umývateľné poťahy, návleky, obliečky. |
| 29 | **Ortopedické pomôcky** — vložky do topánok, silikónové, medziprstové, gelové. |
| 30 | **Polohovacie pomôcky** — podložky s výrezom, sedáky, krúžky, valce. |
| 31 | **Do kúpeľne** — stolička/sedačka/opierka/držadlo do vane a sprchy, protišmykové, nastaviteľné. |
| 32 | **Relaxácia a rehabilitácia** — lopty, balóny, gumové pásy, pedále, masážne loptičky. |
| 33 | **Sebaobsluha a obsluha pacienta** — obúvanie, poháre, pásy na dvíhanie, sklápacie stolíky. |
| 34 | **Toaletné kreslá a toaletné vozíky** — kreslá/vozíky s otvorom v sedadle, kreslo do sprchy. |
| 35 | **Somavedic MEDIC** — certifikát IGEF na rušenie elektrosmogu. |
| 36 | **Rukavice** — vyšetrovacie, chirurgické bezpúdrové/púdrované, latexové, nitrilové, vinylové, neoprénové. |
## 5. Featured products (homepage) with prices
Prices are EUR (display on site uses `X,XX €`). Image paths are on the live
site under `/<id>-home_default/<slug>.jpg`.
| Product | Price (€) | Notes |
|---|---|---|
| Somavedic URAN | 600,00 | id 581 |
| Somavedic MEDIC (elektrosmog eliminátor) | 360,00 | id 213 |
| Somavedic ATLANTIK | 300,00 | id 572 |
| Sedačka do sprchy nastaviteľná, s opierkou chrbta a výrezom | 65,00 | id 497 |
| Opierka pod chrbát polohovateľná | 37,20 | id 378 |
| Krepovaný papier na lôžko (papier na operačné stoly) | 4,80 | id 248 |
| GAMMEX chirurgické rukavice pár | 1,23 | id 582 |
| Gáza v páse s buničitou vatou (Mullro) | 1,14 / 1,23 | id 567 |
| Návleky na topánky NT | 0,12 | id 224 |
| Návlek na obuv (plastový s gumičkou) | 0,04 | id 279 |
| Gázové kompresy, štvorce nesterilné | — | id 100 |
Other Somavedic models referenced on site: **Somavedic AURUM** (id 18 cat).
## 6. Storefront blocks present on live site (UX reference)
- Home slider (homeslider) — "pomôcky pre pacientov", "prístroj Somavedic aurum".
- "Naše obchody" (Our stores / blockstore) block.
- Reinsurance block (5 trust badges) — `blockreinsurance`.
- Price-comparison badges: Pricemania, Heureka.sk, Tovar.sk, NajNakup.sk.
## 7. Suggested port order
1. **Config/contact** — drop real legal name, seat, ops address, IČO/registration,
phone, email into footer + invoicing config (see `account-type-rules` memory).
2. **CMS pages** — seed `O našej spoločnosti` and `Obchodné podmienky` content.
3. **Categories** — seed categories 736 (names + descriptions above) under root
"Zdravotnícke pomôcky"; map to our category model.
4. **Products** — import the featured products with prices/variants; pull images
from `/<id>-home_default/` on the live site.
5. **Currency** — site prices are EUR (matches our EUR base; CZK display optional).