Zaprojektowaliśmy i wdrożyliśmy nową stronę Germania Mint — mennicy z Jeleniej Góry. Powstał katalog z filtrami, strony serii i rozbudowane karty produktów, animowana historia marki oraz strefa B2B dla dystrybutorów.
Germania Mint co roku wypuszcza kolejne serie monet i sztabek. Przy tak dużej liczbie produktów ważne było, żeby każdy z nich można było łatwo znaleźć i szybko sprawdzić jego najważniejsze parametry: wagę, metal, próbę, jakość wybicia, nominał czy nakład.
Z jednej strony stronę odwiedzają kolekcjonerzy szukający konkretnych monet, z drugiej inwestorzy zainteresowani sztabkami o określonej gramaturze.
Trzeba było więc połączyć rozbudowany katalog z charakterem marki premium. Stąd ciemne, fakturowane tła, detale monet i nawiązania do mitologii, ale przede wszystkim czytelna struktura, która nie utrudnia korzystania ze strony.
Produkty trafiły do własnego typu wpisu product z taksonomiami serii, typu, planu emisji i rodzaju sztabki. Pola ACF opisują parametry monety, a przyjazne adresy generują się automatycznie z nazwy produktu i jego wariantu.
Zaprojektowaliśmy system oparty na ciemnych, fakturowanych tłach, szeryfowym kroju i czerwonym akcencie. Makiety objęły stronę główną, katalog, serie, produkt, historię, opakowania i strefę dystrybutora — na desktop i mobile.
Własny motyw WordPress: 17 szablonów, ponad 100 sekcji, filtrowanie i sortowanie katalogu, galerie, wideo i dwujęzyczność przez Polylang.
Oś czasu i przejścia oparte na GSAP, płynne przewijanie z Lenis, integracja z GTM.
Kafelki pokazują najważniejsze parametry monet, a po najechaniu odsłaniają ich rewers. Układ siatki automatycznie dostosowuje się do szerokości ekranu.
Monety i sztabki korzystają z jednego szablonu — rozróżnia je taksonomia type. Wyniki ładuje Ajax Load More z dodatkiem Filters, po 12 produktów na stronę, bez przeładowania. Opcje filtrów tworzą się automatycznie z wartości zapisanych w bazie, więc nowy nominał czy metal pojawia się w panelu bez zmian w kodzie.
Strona serii to szablon taksonomii series. Zawiera hero z grafiką serii, opis, oś emisji pogrupowaną według taksonomii planu emisji i listę wszystkich produktów z serii. Sposób prezentacji listy redaktor wybiera w ACF dla każdej serii osobno: zwykła lista, grupowanie po roku albo po gramaturze.
Karta składa się z sekcji: awers i rewers z opisami, tabela specyfikacji, galeria, wideo i przycisk do listy dystrybutorów. Adres URL generuje się przy zapisie z tytułu i pól ACF, więc warianty tej samej monety nie dublują adresów.
Na stronie historii kolejne etapy od 1986 roku to wpisy w repeaterze ACF. Rysowanie linii, pojawianie się dat, zdjęć i opisów jest powiązane z pozycją przewinięcia przez GSAP ScrollTrigger.
Katalog opakowań ma szablon listy i szablon pojedynczego produktu. Podstrony o uszlachetnieniach, biciu i odlewaniu korzystają ze wspólnego szablonu z modułowymi sekcjami. Formularz dla dystrybutorów działa na Contact Form 7, a lista punktów sprzedaży ma wyszukiwarkę po nazwie, adresie i kraju.
Na telefonie hero korzysta z osobnych grafik, katalog układa się w dwie kolumny, a panel filtrów wysuwa się na pełną wysokość ekranu i blokuje przewijanie strony pod spodem.
Najedź na ekran telefonu i przewiń, aby zobaczyć stronę
Ponad 600 produktów w jednym typie wpisu, przypisanych do serii, typu i planu emisji. Nowy produkt to wpis z wypełnionymi polami ACF — listy, strony serii i filtry aktualizują się same.
Filtrowanie Ajax po parametrach produktu, sortowanie po pięciu kryteriach i wyszukiwarka w całym serwisie. Opcje filtrów pochodzą z bazy danych, a nie z listy wpisanej na sztywno.
Własne rozmiary obrazów, osobne grafiki hero dla telefonu i porządki w ładowaniu skryptów oraz stylów.
Szablony zbudowane z ponad 100 sekcji ACF, teksty interfejsu przetłumaczone w Polylangu i wdrożony Google Tag Manager. Nowe podstrony zespół klienta samodzielnie składa w panelu.
