jbm.pl - slidery produktowe

2023-05-09

jbm.pl - slidery produktowe

Slidery produktowe - czyli podstawa sklepu e-commerce

W poprzednim poście opisałem pokrótce proces tworzenia slider-bannerów na przykładzie sklepu internetowego www.jbm.pl. Dziś pragnę przybliżyć, w jaki sposób podszedłem do przeprojektowania sliderów produktowych. Zacznę od wytłumaczenia, skąd w ogóle wzięła się taka potrzeba. Przecież Shoper dostarcza w swoim środowisku przewijane slidery z produktami. Więc o co tyle zachodu?

- Owszem dostarcza, jednak w podstawowej wersji (a nie jestem pewien czy istnieje jakaś inna) slidery przewijają po jednym produkcie na jeden "click" w strzałkę. Wyobraźmy sobie, że w pojedynczym sliderze chcielibyśmy wyświetlić np. całą kategorie monitorów, lub wszystkie produkty danego producenta. Liczba pozycji może być spora, a przewinięcie do ostatniego potrwa "wieki" i tylko nieliczni odwiedzający zdecydują się tak długo klikać w strzałkę 😉.

Co zatem można z tym zrobić?

Można nie używać sliderów, a wszystkie produkty wyświetlać np. w formie tabeli przewijanej w dół, lub... napisać je od nowa i "uzbroić" we wszystkie oczekiwane cechy. Ja wybrałem tę drugą ścieżkę. Postanowiłem w tym celu skorzystać z podobnego rozwiązania jak przy tworzeniu slider-bannerów. Musiałem jedynie nieco "skomplikować" kod, aby sprostał wszystkim stawianym oczekiwaniom, ale po kolei. W konstruktorze znalazło się trochę więcej elementów, niż poprzednio.

Article content

Również funkcja generująca została lekko zmodyfikowana. Dodałem warunki nadające sliderom zachowania responsywne, tj. różne w zależności od szerokości ekranu, na którym są wyświetlane. Znajdują się tam też elementy ("sliderCoffeeProps, wiosnaMpm, landing"), które są dedykowane innym podstronom, jak np. "sekcja kawy", gdzie silnikiem dla przewijania jest ta sama funkcja, ale zachowanie różni się w szczegółach - to temat na osobny wpis...

Article content

Dodanie responsywności było istotne, ponieważ slidery wyświetlają w pełnym rozmiarze (tzn. gdy szerokość ekranu wynosi powyżej 1200px) - 4 produkty, pomiędzy 1199px a 980px - 3 prod., a na mniejszych ekranach 2 prod. Dla urządzeń mobilnych (poniżej 768px) zastosowałem inną, dotykową obsługę. Odrębne zachowanie uzależnione od szerokości wyświetlacza wymagało dodania pomocniczej metody (slidesMoveResponsive), która uwzględnia zróżnicowane ilości elementów do przewinięcia.

Article content

Problemem pozostało właśnie to, że z założenia każdy slider mógł zawierać zupełnie inną liczbę produktów. W dodatku, z UX'owego punktu widzenia ważne było, aby nie przewijały się za każdym razem np. 4 długości, ale tylko tyle, ile było wymagane, tzn. aby slider reagował dynamicznie zarówno na ilość produktów do przewinięcia jak i na szerokość ekranu. Warunków do spełnienia było więc sporo. Metodą prób i błędów wypracowałem w końcu odpowiednią składnię, która sprostała naszym (czyt. biznesu 😊) oczekiwaniom. Parametr "moduloNum" wskazuje "o ile jeszcze" elementów należy przesunąć. Jest to różnica, która występuje wtedy, gdy np. liczba produktów === 5, a na szerokości ekranu pow. 1200px widoczne są 4 prod. Slider powinien się wtedy przesunąć dokładnie o szerokość jednego elementu.

Article content

Atutem takiego rozwiązania jest obsługiwanie przez tę samą funkcję wielu sliderów jednocześnie, bez względu na to, ile produktów posiadają, a dodanie każdego kolejnego odbywa się poprzez dopisanie kilku linijek kodu. Poniżej znajdują się instancje do 10 osobnych sliderów produktowych wraz z walidacją - czyli sprawdzeniem, czy dany element jest obecnie używany na stronie. To nie ostatnia modyfikacja tej funkcji, jaka przydała mi się w tworzeniu jbm.pl. W następnym wpisie przedstawię jeszcze jeden przypadek użycia, tym razem w klimacie związanym z pyszną kawą Speciality Salvatti (dostępną w naszej ofercie 😁)

Article content

Pełen kod znajduje się w repozytorium na GitHub (link pod nagłówkiem na samej górze).