81 lines
3.2 KiB
Markdown
81 lines
3.2 KiB
Markdown
# Strony 12–15 — E-commerce
|
||
|
||
Sklep z klimatyzatorami. Stan koszyka przez Zustand (`lib/cart-store.ts`, persist do localStorage).
|
||
|
||
---
|
||
|
||
## 12 — Sklep / listing (`/sklep`)
|
||
|
||
### Sekcje
|
||
1. **Nagłówek kategorii** — H1 + krótki opis SEO.
|
||
2. **Pasek narzędzi** — liczba wyników + sortowanie (cena rosnąco/malejąco, popularność, nowości).
|
||
3. **Układ dwukolumnowy:**
|
||
- Lewa (`ProductFilters`, Client) — filtry: producent (checkboxy), moc (zakres/checkboxy),
|
||
cena (suwak), typ/kategoria, funkcje (Wi-Fi, grzanie). Na mobile: panel wysuwany.
|
||
- Prawa (`ProductsGrid`) — siatka kart (`ProductCard`): zdjęcie, marka, nazwa, moc,
|
||
cena, cena z montażem, przycisk „wybierz", ikona serca (lista życzeń — UI).
|
||
4. **Paginacja** lub „pokaż więcej".
|
||
5. **Blok opisowy SEO** na dole.
|
||
|
||
### Dane
|
||
Z `content/products.ts` przez `getProducts()`. Filtrowanie/sortowanie po stronie klienta.
|
||
|
||
---
|
||
|
||
## 13 — Karta produktu (`/sklep/[slug]`)
|
||
|
||
- `generateStaticParams` + `generateMetadata` z danych produktu.
|
||
|
||
### Układ
|
||
1. **Górna część — dwie kolumny:**
|
||
- Lewa (`ProductGallery`, Client) — duże zdjęcie + miniatury.
|
||
- Prawa (`ProductInfo`) — marka, nazwa (H1), cena, cena z montażem,
|
||
wybór wariantu mocy (jeśli są warianty), przyciski „Dodaj do koszyka" i „Kup z montażem",
|
||
ikony: lista życzeń, porównanie. Atuty: dostawa, gwarancja, raty.
|
||
2. **Zakładki** (`Tabs`, Client) — Opis / Dane techniczne (tabela ze `specs`) / Opinie.
|
||
3. **Podobne produkty** (`FeaturedProducts`) — 4 karty z tej samej kategorii.
|
||
|
||
### Akcje
|
||
„Dodaj do koszyka" → `cart-store` (dodaje produkt + wybrany wariant). Feedback (toast/licznik w headerze).
|
||
|
||
### JSON-LD
|
||
Product + Offer + BreadcrumbList.
|
||
|
||
---
|
||
|
||
## 14 — Koszyk (`/koszyk`)
|
||
|
||
### Układ
|
||
1. **Lista pozycji** (`CartItems`, Client) — miniatura, nazwa, wariant, ilość (− / +),
|
||
cena jednostkowa, suma pozycji, usuń. Opcja „dodaj montaż" przy pozycji.
|
||
2. **Podsumowanie** (`CartSummary`) — wartość, VAT, suma, pole kodu rabatowego (UI),
|
||
przycisk „Przejdź do zamówienia".
|
||
3. **Pusty koszyk** — stan pusty z komunikatem + przycisk „Przejdź do sklepu".
|
||
|
||
### Dane
|
||
Stan z `cart-store` (Zustand, persist). Bez realnego checkoutu na tym etapie —
|
||
przycisk prowadzi do placeholdera / strony „w przygotowaniu" lub formularza zamówienia (do ustalenia).
|
||
|
||
---
|
||
|
||
## 15 — Raty 0% (`/raty`)
|
||
|
||
### Sekcje
|
||
1. **Hero** — H1 + hasło o ratach 0%.
|
||
2. **Jak to działa** (`ProcessSteps`) — kroki wnioskowania.
|
||
3. **Kalkulator rat** (`InstallmentCalculator`, Client) — suwak kwoty → wyświetla ratę miesięczną
|
||
(prosty wzór: kwota / liczba rat, np. do 20 rat 0%). Bez integracji finansowej — kalkulacja poglądowa.
|
||
4. **Warunki** — lista warunków (placeholder).
|
||
5. **FAQ** (`FaqAccordion`).
|
||
6. **CTA** — „Złóż wniosek" (placeholder / link do kontaktu).
|
||
|
||
### Uwaga
|
||
Oznacz wszystkie liczby i warunki jako poglądowe/do uzupełnienia — to treści zależne od oferty banku.
|
||
|
||
---
|
||
|
||
## Uwaga wspólna (e-commerce)
|
||
- Komponenty sklepu w `components/shop/`.
|
||
- Ceny i produkty to mock — wyraźnie oznaczone, łatwe do podmiany.
|
||
- Dostępność: przyciski z aria-label, liczniki ilości obsługiwane z klawiatury.
|