Przepisy

Przepisy to kompletne, end-to-end implementacje typowych ekranów storefront — łączą wiele hooków i operacji w jeden działający feature. W odróżnieniu od:

• Przewodników SDK (per-funkcja: „jak działa useProduct") — przepis pokazuje cały ekran od początku do końca,
• Referencji (sygnatury, typy) — przepis pokazuje jak to złożyć w praktyce.

Zero drift

Przepisy trzymają się tej samej zasady co reszta dokumentacji:

• Pobieranie danych pokazujemy w blokach z zakładkami (Server / Client / Raw) renderowanych bezpośrednio z operacji GraphQL — przykład nie może rozjechać się ze schematem.
• Typy renderujemy ze schematu GraphQL.
• Kod kleju (komponenty React) jest weryfikowany typami przeciw @doswiftly/storefront-sdk i wstawiany do strony 1:1 ze źródła — błędne pole lub zła sygnatura nie przejdą weryfikacji i nie trafią do dokumentacji.

Framework

Każdy przepis ma na górze znacznik Framework:

• React / Next.js — większość przepisów. Warstwa pobierania danych jest przenośna (zakładka Raw w blokach z przykładami działa w każdym frameworku), ale warstwa UI (komponenty z hookami i JSX) zakłada React.
• Dowolny — przepisy bez UI, korzystające tylko z rdzenia SDK (@doswiftly/storefront-sdk) i raw GraphQL; działają w każdym frameworku.

Innymi słowy: dane są uniwersalne, UI jest reactowe. Deweloper Vue/Svelte bierze zapytanie z zakładki Raw i pisze własny widok.

Dostępne przepisy

• Strona produktu z wariantami — galeria, wybór wariantu, cena, dostępność, dodanie do koszyka. (React / Next.js)
• Koszyk z rabatami — podsumowanie kosztów, kody rabatowe (zastosowanie/usuwanie), rozbicie rabatów. (React / Next.js)
• Najniższa cena przed obniżką (Omnibus) — ustawowa informacja o najniższej cenie z 30 dni przy przekreślonej cenie, z pola priceReduction na wariancie i produkcie. (React / Next.js)
• Strona marki — logo, opis i SEO marki plus lista jej produktów jednym zapytaniem; indeks marek posortowany po liczbie produktów. (React / Next.js)
• Konto klienta z historią zamówień — profil, statystyki, lista zamówień ze statusem płatności i realizacji. (React / Next.js)
• Program poleceń (rejestracja z kodem) — przechwycenie kodu z linku, rejestracja z referralCode, panel udostępniania kodu ze statystykami. (React / Next.js)
• Rejestracja B2B, formularze i ceny po zalogowaniu — formularz rejestracji sterowany przez sklep, ręczne zatwierdzanie kont, formularze kontaktowe i katalog z cenami po zalogowaniu. (React / Next.js)
• Logowanie i trwała sesja — formularz logowania, stan konta w nagłówku i sesja przeżywająca twardy refresh przy statycznym layoucie. (React / Next.js)
• Przelew tradycyjny na potwierdzeniu zamówienia — sekcja „Dane do przelewu” z rachunkiem, tytułem i kwotą prosto z API, spójna z mailem potwierdzenia. (React / Next.js)
• Konfigurator produktu — pola z dopłatami, komponenty z magazynu i pod-komponenty warunkowe; selekcje klienta aż po dodanie do koszyka. (React / Next.js)
• Wybór punktu odbioru w kasie — paczkomat i punkt odbioru: mapa przewoźnika albo wyszukiwarka punktów, zależnie od tego, co sklep ma skonfigurowane. (React / Next.js)
• Koszt formy płatności na kafelku — dopłata (np. za pobranie) widoczna na kafelku PRZED wyborem i w podsumowaniu PO wyborze. (React / Next.js)
• Odtworzenie zaznaczeń kasy po odświeżeniu — kasa pamięta wybór dostawy i płatności: odczyt z koszyka i odtworzenie tymi samymi mutacjami. (React / Next.js)

Kolejne w drodze: checkout z BLIK, wyszukiwarka produktów.