Shopz — cały sklep w jednych rękach, od koszyka po paczkomat

Założenie

Sklep internetowy to zwykle praca kilku osób: ktoś robi szablon, ktoś podłącza płatności, ktoś kuriera. Shopz pokazuje całość zrobioną przez jedną osobę: wygląd, katalog, koszyk, zamówienie, wysyłkę i panel do edycji treści.

To fikcyjny sklep rowerowy: 49 produktów sześciu marek, rowery i akcesoria. Strony są statycznym HTML-em z Astro na Cloudflare Workers. Shopify trzyma ceny, warianty i stany magazynowe, a Sanity całą resztę: opisy, zdjęcia, specyfikacje i sekcje strony głównej.

Katalog i produkt

Lista ma filtry kategorii, marki, ceny, rozmiaru, koloru, dostępności i promocji. Ich stan zapisuje się w adresie, więc wynik da się wysłać linkiem, a bez JavaScriptu lista jest po prostu pełna. Wyszukiwarka otwiera się skrótem ⌘K.

Strona produktu pobiera cenę i stan magazynu prosto ze Shopify, więc pokazuje to, co jest w sklepie w tej chwili. Zdjęcia rowerów to rendery z tego samego modelu 3D, którego używa sekcja z rowerem na stronie głównej.

Koszyk i zamówienie

Koszyk działa na Cart API Shopify. Wygasły koszyk odtwarza się sam, a gdy Shopify nie odpowiada, koszyk działa dalej w przeglądarce.

Formularz zamówienia zbudowałem sam, zamiast checkoutu Shopify: cztery kroki na jednej stronie i faktura na firmę, przy której NIP jest sprawdzany sumą kontrolną, a nazwa i adres firmy wczytują się z białej listy podatników VAT. Serwer liczy cenę jeszcze raz, z danych Shopify, i nie ufa kwotom z przeglądarki. Dopiero wtedy zakłada zamówienie w Shopify, a stan magazynu od razu spada.

InPost

Paczkomat wybiera się na mapie InPost (Geowidget), której skrypt ładuje się dopiero przy pierwszym otwarciu, albo wpisuje się jego kod. Kod sprawdza serwer, bo API punktów InPost nie odpowiada przeglądarkom z innych domen.

Po zamówieniu serwer zakłada przesyłkę w ShipX: do paczkomatu, z gabarytem dobranym do zawartości, albo kurierem, w kartonie na rower. Numer przesyłki trafia do zamówienia w Shopify. Rower nie zmieści się w paczkomacie, więc tę opcję blokuje i formularz, i serwer. W demie InPost działa na koncie testowym (sandbox).

Płatności

BLIK, karta, szybki przelew i raty 0% są w formularzu, ale to sklep demonstracyjny: nic nie jest pobierane. Bramkę płatności (np. Przelewy24, PayU albo Shopify Payments) podłącza się w kroku, który już istnieje. Zamówienie powstaje na serwerze po sprawdzeniu ceny, więc płatność dostaje kwotę, której nie da się zmienić w przeglądarce.

Shopify i Sanity w zgodzie

Gdy w Shopify zmieni się produkt albo stan magazynu, webhook z podpisem HMAC uruchamia Workera. Ten pobiera aktualne dane z Admin API, zapisuje je w Sanity i zleca przebudowę strony, najwyżej raz na minutę. Od zmiany w Shopify do nowej wersji sklepu mijają około 2 minuty.

Wydajność

Strona główna ładuje 20 KB JavaScriptu. three.js przychodzi dopiero ekran przed sekcją z rowerem i tylko na urządzeniach, które to udźwigną (WebGL2, co najmniej 4 GB pamięci, bez oszczędzania danych i bez ograniczonego ruchu). Pozostali widzą zdjęcie i listę części.

Przed przewinięciem strona główna pobiera 7 zdjęć zamiast 14 na telefonie i 21 na komputerze. Zdjęcie z pierwszego ekranu idzie z domeny sklepu, w AVIF. Font jest podzielony na dwa pliki: zestaw z polskimi literami (51 KB) ładuje się od razu, a reszta tylko wtedy, gdy strona jej używa.

Lighthouse na komputerze (pomiar z 2 listopada 2026): 100 za wydajność, dostępność i dobre praktyki, LCP 0,6 s, przesunięcia układu 0. W symulacji telefonu wydajność wynosi 96. SEO nie ma 100 tylko dlatego, że sklep demonstracyjny jest celowo wyłączony z wyszukiwarek; dane strukturalne produktów i ofert są gotowe. Test axe-core (WCAG 2.2 AA) nie znajduje błędów na 10 stronach w dwóch szerokościach, a logikę sklepu sprawdza ponad 170 testów automatycznych.