Case study
FORM& - headless commerce na Next.js + WooCommerce
Jeden backend WooCommerce, dwa działające sklepy: klasyczny SŁÓJ i headlessowy FORM&. Demo pokazuje, co realnie daje odklejenie frontendu od WordPressa - w klikaniu, nie w deklaracjach.
Zakres prac
Co powstało w tym projekcie
- Storefront od zera w Next.js 16: App Router, Partial Prerendering i ISR - 90 kart produktów prerenderowanych, filtry bez przeładowania strony
- Koszyk i checkout w całości przez WooCommerce Store API z tokenem Cart-Token - bez cookies, nonce'ów i kluczy API w przeglądarce
- Drugi brand na wspólnej bazie produktów: system projektowy FORM& inspirowany rysunkiem technicznym, z cenami i stanami w kroju mono
- UX pokazujący headless w działaniu: view transitions między podstronami, morph zdjęcia z listingu do karty produktu, optymistyczny koszyk
- Blog z WordPressa z karuzelą produktów renderowaną z API w miejscu shortcode'a
- Minimalna ingerencja w backend: jeden mu-plugin (CORS + markery treści), zero modyfikacji WooCommerce
- Wdrożenie produkcyjne: Docker + Caddy na VPS, testy end-to-end w Playwright, rozgrzewany cache obrazków
Decyzje projektowe
Dlaczego wygląda i działa tak, a nie inaczej
Jeden backend, dwa sklepy
Ta sama baza produktów, magazyn i panel zamówień obsługują klasyczny motyw WooCommerce i headlessowy frontend jednocześnie. Migracja na headless nie wymaga wymiany zaplecza - można ją zrobić obok działającego sklepu i przełączyć ruch, kiedy wszystko gra.
Store API zamiast kluczy
Koszyk i zamówienia idą przez publiczne Store API z podpisanym tokenem sesji koszyka. W kodzie frontendu nie ma żadnego sekretu, a dane klientów widzi wyłącznie WordPress - powierzchnia ataku jest mniejsza niż w klasycznym sklepie z sesjami.
Headless w działaniu, nie w deklaracjach
Zamiast bannera "jesteśmy headless" - natychmiastowa nawigacja, filtrowanie bez przeładowania, płynne przejścia między stronami i dyskretne mono-etykiety pokazujące źródło danych. Różnicę czuć w klikaniu, zwłaszcza obok klasycznej wersji tego samego sklepu.
Prerendering z głową
Katalog jest prerenderowany i odświeżany w tle (ISR), a dane ulotne - koszyk, stany, wyniki filtrów - dociągane na żywo ze streamingiem. Klient dostaje stronę z cache w kilkadziesiąt milisekund, a mimo to widzi aktualne ceny i magazyn.
Architektura
Jeden backend, dwa fronty
Ten sam WordPress zasila równolegle klasyczny sklep i headlessowy frontend - a wszystkie zamówienia lądują w jednym panelu.
Pod lupą
Najważniejsze ekrany, punkt po punkcie
Karta produktu
Wszystko na tym ekranie przyszło z API WooCommerce - i widać to w detalach.
-
1
Warianty z cennika API
Kliknięcie wymiaru nie przeładowuje strony - cena i stan magazynowy przełączają się na danych pobranych ze Store API.
-
2
Omnibus bez wtyczki
Najniższa cena z 30 dni pokazywana przy każdej promocji - obowiązek prawny załatwiony w warstwie prezentacji, bez dodatkowych pluginów.
-
3
Jawne źródło danych
Mono-etykieta pokazuje stan, ID wariantu i endpoint. Dyskretny dowód, że strona renderuje żywe dane, a nie statyczny HTML.
Listing z filtrami
Filtrowanie odpytuje API i podmienia tylko siatkę produktów - strona ani razu się nie przeładowuje.
-
1
Filtry bez przeładowania
Checkboxy działają jak LUB i aktualizują wyniki przez router aplikacji. URL się zmienia, więc przefiltrowany widok można wysłać linkiem.
-
2
Licznik prosto z API
Liczba wyników czytana z nagłówków odpowiedzi i renderowana w kroju mono - to dana, nie dekoracja.
-
3
Każda liczba to dana
Ceny, stany i liczniki mają w całym sklepie własny krój mono - wzrok od razu odróżnia fakty z magazynu od tekstu marketingowego.
Wydajność
Zmierzone, nie obiecane
Pomiar Lighthouse na produkcji (strona główna, desktop). Kategorię SEO pomijamy celowo - sklep demo jest wyłączony z indeksowania.
- Wydajność
- 100
- Dostępność
- 100
- Praktyki
- 100
Stack
Technologie
Chcesz taki sklep dla swojej marki?
Napisz, co sprzedajesz i czego potrzebujesz. Wycena wraca do ciebie w 24 godziny, bez zobowiązań.