Jak zbudowany jest ten sklep

Model danych

Trzy byty i dwa powiązania. Produkt wskazuje substancje czynne wraz ze stężeniem, substancja wskazuje dolegliwości, a dolegliwość zbiera preparaty przez substancje. Żadna z tych list nie jest pisana ręcznie: dołożenie preparatu aktualizuje spis substancji, spis dolegliwości, filtr katalogu i kreator naraz.

Na Shopify 2.0

• Substancja czynna i dolegliwość to metaobiekty z własnymi szablonami (metaobject/substancja.json, metaobject/dolegliwosc.json). Kolejna pozycja to wpis w panelu, nie nowa podstrona w kodzie.
• Powiązanie produktu z substancją to metapole typu lista referencji ze stężeniem w polu towarzyszącym.
• Filtr katalogu stoi na filter.p.m.* po metapolach, więc działa po stronie kolekcji, a nie w skrypcie po stronie przeglądarki.
• Kontrola łączenia substancji jest jedną sekcją z blokami: każdy blok to jedna para i powód. Ta sama sekcja obsługuje kartę produktu i podsumowanie koszyka.

Warstwa stylu

SCSS kompilowany lokalnie do jednego arkusza, bo Sass wbudowany w motywy Shopify jest wycofywany, więc kompilacja idzie po stronie repozytorium, a do motywu trafia gotowy .css. Wartości mieszkają w tokenach; przy zmianie palety zmienia się jeden plik, nie trzydzieści sekcji.

Ruch

Cztery animacje w całym serwisie, każda z wariantem dla prefers-reduced-motion: dorysowanie podziałki nasilenia, wjazd panelu koszyka, wejście wierszy spisu i przenikanie kadru. Treść jest widoczna od pierwszej klatki; reveal sterowany klasą znika w renderze bez skryptu, więc go tu nie ma.

Wydajność

• Dokument powstaje przy budowaniu, łącznie z kaflami i rysunkami opakowań. Skrypt dokłada wyłącznie stan koszyka i filtra.
• Kroje przycięte do polskiego zakresu znaków: dwa pliki, ~37 kB łącznie, bez drugiego żądania na latin-ext.
• Opakowania są rysowane wektorowo i osadzone w dokumencie: zero żądań na obrazki produktowe i zero przesunięcia układu po ich doczytaniu.
• Zdjęcia w trzech szerokościach, format WebP, wymiary podane w znaczniku.

Dane strukturalne

Product z ofertą i dostępnością na karcie preparatu, Article w dzienniku, FAQPage na stronie pytań, Organization na stronie głównej. Bez oznaczeń ocen i opinii, bo tych nie ma.