Katalog 630 kabli z filtrami i zapytaniem ofertowym na TYPO3

Po audycie UX najwięcej uwagi w projekcie poświęciliśmy temu, jak znaleźć właściwy kabel wśród 630 pozycji: nawigacji i filtrom. Na liście produktów filtry stoją w kolumnie po lewej: typ kabla, żyły, izolacja, powłoka, napięcie i właściwości (np. bezhalogenowość, odporność na UV, niska emisja dymów), a do tego suwaki temperatury pracy i minimalnej temperatury otoczenia przy układaniu.

Nad listą są pole wyszukiwania produktu i skróty do czterech głównych grup kabli, a licznik pokazuje, ile produktów spełnia wybrane warunki. Na telefonie filtry chowają się pod przyciskiem „Filtrowanie” i rozwijają się nad listą.

Menu „Produkty” rozwija kolejne poziomy oferty: grupę kabli, podgrupę (np. średniego napięcia) i napięcie, a obok pokazuje miniatury kabli z wybranego poziomu. Przycisk „Przeglądaj wszystkie produkty” prowadzi do pełnej listy. Na telefonie te same poziomy otwierają się jeden po drugim, z przyciskiem „Cofnij”.

Kolory firmowe — czerwień i antracyt — prowadzą cały projekt graficzny. Czerwone zaokrąglone linie obramowują nagłówki i tabele, a w tle sekcji powtarzają się łuki ze znaku firmy. Zdjęcia branż na stronie głównej są czarno-białe, a kolor niosą czerwone akcenty.

Stronę wdrożyliśmy na TYPO3. Produkty są w nim osobnymi rekordami, a bazę produktów połączyliśmy z CRM firmy. Każdy kabel ma swoją kartę: ikony oznaczeń CE, norm i właściwości, budowę, zastosowania, właściwości i parametry techniczne oraz pliki do pobrania — np. karty katalogowe po polsku i angielsku i deklarację zgodności — osobno albo jednym przyciskiem „Pobierz wszystko”.

Na dole karty jest tabela przekrojów z numerem katalogowym, średnicą zewnętrzną i masą kabla. Na telefonie przycisk „Wybierz przekrój” przenosi od razu do tabeli.

Przy każdym przekroju w tabeli jest przycisk „Dodaj”. Okno z nazwą kabla i przekrojem pyta tylko o liczbę metrów, a w nagłówku strony pojawia się przycisk „Zapytanie ofertowe” z liczbą pozycji — klient może dalej przeglądać katalog i dokładać kolejne kable.

Na stronie zapytania klient widzi zebrane pozycje z numerami katalogowymi, może zmienić długość albo usunąć pozycję, a na koniec podaje dane firmy: imię i nazwisko, nazwę firmy, NIP, telefon i e-mail. Moduł zapytań przygotowaliśmy dla tej strony: każda pozycja zapytania ma numer katalogowy, przekrój i długość.