thermcool/docs/pages/12-15-ecommerce.md

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.