Katalog produktów w trzech językach i autorski CMS dla polskiej spółki Super Systems

Ofertę ułożyliśmy w trzy poziomy: grupa, podkategoria, karta produktu. Katalog ma 6 grup produktowych i 41 kart, a obok nich 6 kart systemów „pod klucz”. Mega menu od razu pokazuje wszystkie grupy z liczbą produktów.

Pełną listę można zawęzić według procesu prowadzonego w piecu (np. nawęglanie, azotowanie), normy (CQI-9, NADCAP, AMS 2750) i zakresu temperatur. Aktywne filtry widać nad wynikami, a wyniki można oglądać jako kafle albo listę.

Karta łączy galerię z miniaturami i powiększeniem, oznaczenia procesów i norm, najważniejsze parametry, dane techniczne, zastosowania i typy pieców. Przycisk „Zapytaj o ten produkt” prowadzi do formularza z wpisaną już nazwą produktu.

Formularze strony (kontakt, zapytanie z karty, zgłoszenie serwisowe i RMA) wysyłają wiadomości przez SMTP, z limitem zgłoszeń z jednego adresu IP i sprawdzaniem typu załączników.

Projekt graficzny opiera się na granacie i pomarańczowych akcentach, siatce kropek na mapach i zdjęciach maszyn w stylu przekroju. Zaprojektowaliśmy wszystkie typy podstron: katalog, kartę produktu z wersją mobilną, systemy, serwis, zgłoszenie serwisowe, RMA, zastosowania, lokalizacje i kontakt.

Lokalizacje pokazują dwie mapy: świata z sześcioma spółkami grupy i Europy z rynkami, na których klienta obsługują lokalni partnerzy. Mapy powstają podczas budowania strony, bez zewnętrznej usługi map.

Wersje angielska i niemiecka powstają z tych samych stron i komponentów co polska — zmienia się tylko plik z treścią, więc żadna podstrona nie jest napisana drugi raz. Każda z 69 podstron ma swój odpowiednik w EN i DE, razem 207 adresów. Strony mają oznaczenia hreflang, a mapa witryny podaje daty zmian kart z bazy.

Hosting klienta nie ma Node.js, więc serwis budujemy w Astro do statycznych plików HTML, a formularze obsługuje jeden skrypt PHP. Zdjęcia są w WebP, a osobny test mierzy wagę podstron w przeglądarce i wskazuje obrazy cięższe niż 300 kB.

Katalog żyje w bazie autorskiego panelu napisanego w Symfony. Redaktor klienta sam dodaje i edytuje karty produktów i systemów, przypisuje je do kategorii i podkategorii, prowadzi wersje PL, EN i DE (nową może skopiować z polskiej) i wgrywa zdjęcia z opisami dla wyszukiwarek. Każdy zapis trafia do historii, z której można przywrócić wcześniejszą wersję karty. Z panelu ustawia też baner strony głównej.

Zapis w panelu nie zmienia strony od razu. Przycisk publikacji uruchamia w GitHub Actions budowę serwisu i wysyłkę plików na hosting, a karty oznaczają się jako opublikowane dopiero wtedy, gdy paczka jest na serwerze. Zanim zbudowaliśmy własny panel, porównaliśmy na tym samym katalogu gotowe systemy Directus i Payload.