Czy warto używać sliderów?

Co do zasadności używania sliderów obrazkowych na stronie - zdania są podzielone. Twierdzi się, że odwiedzający pomijają informacje zawarte na banerach, ponieważ te z reguły zmieniają się, zanim zdążą kogokolwiek zainteresować swoją treścią. Jednak w naszym sklepie zdecydowaliśmy się na użycie slidera. Pełni on rolę informacyjną jak również uatrakcyjnia stronę główną poprzez ładną prezentację treści. Na zbyt częste i szybkie zmiany znaleźliśmy rozwiązanie.

Standardowy slider dostarczony przez platformę (Shoper) posiadał zby małe możliwości konfiguracji oraz mocno obciążał stronę niepotrzebnym kodem. Zdecydowaliśmy się na "lekką" technologię przy użyciu JavaScript'u. Do projektu podszedłem obiektowo.

W konstruktorze znalazły się niezbędne elementy oraz kilka metod, w tym najważniejsze: odpowiedzialna za wygenerowanie się slidera - generateSlider(), (auto)przewijanie - changeSlide(), zatrzymanie się , gdy najeżdża się na niego kursorem - handleMouseEnter(), ręczne przesuwanie na urządzeniach mobilnych - handleMouseMove(), a także paginację - createPagination().

Głównym założeniem była prostota w użyciu, tzn. możliwość łatwej edycji treści, ponieważ późniejsze banery miały być dodawane przez osoby nieobeznane z programowaniem (Marketing). Stąd wyrósł pomysł, aby w CMS znajdował się sam HTML, a w nim div zawierający: artykuł z linkiem przenoszącym na daną podstronę oraz dwa obrazki - w rozmiarze "mobile" i "desktop".

Cała reszta jest generowana dynamicznie na podstawie "id" danego div'a.

Automatyczna zmiana slidera odbywa się za pomocą dodawania i usuwania klasy (slider-slide-active), co wpływa na właściwość "opacity" oraz "z-index" (CSS), ustawiając je odpowiednio na 1 || 0. Ten prosty zabieg daje wrażenie zanikania i pojawiania się banerów. Jest dość łagodny w odbiorze i redukuje do minimum ryzyko reakcji na nagłe przesunięcie obrazu u osób wrażliwych na tego rodzaju bodźce. Interwał zmiany ustawiłem na 5000ms. Zostaje czasowo zablokowany podczas ruchu kursorem po powierzchni grafiki (metoda clearTimeout()), co pozwala na spokojne zapoznanie się z jej treścią.

Ręczna obsługa slidera odbywa się za pomocą strzałek, które również są generowane dynamicznie (met. createPrevNext()), a po ich kliknięciu uruchomiona zostaje metoda opisana powyżej (changeSlide()), która wywoływana jest wtedy "na żądanie". Reszta, to kilka pomocniczych funkcji (metod) oraz style CSS. Pełen kod znajduje się w repozytorium GitHub (link pod nagłówkiem na samej górze).

Dlaczego warto programować obiektowo?

Użycie klasy w podejściu obiektowym umożliwiło mi łatwe wykorzystanie tych samych linii kodu w innych miejscach na stronie. Odpowienio ostylowane slidery umieściłem na przykład w kategoriach nad listą produktów. Zastosowane są tam dwa rodzaje, w zależności od potrzeb - uniwersalny ( z banerami ogólnymi, jak np. info. o darmowej przesyłce), lub dedykowany (grafiki nawiązujące do produktów z danej kategorii).

Wystarczyło posłużyć się odpowiednimi warunkami (if), by stworzyć nowe instancje do obiektu "Slider" na podstawie odmiennych "id" (graf. poniżej). W podobny sposób podszedłem do kwestii przewijalnych sliderów produktowych, gdzie użycie metody obiektowej pozwoliło mi zoptymalizować kod poprzez ograniczenie jego ilości oraz uproszczenie sposobu dodawania kolejnych sliderów. Temat ten omówię w kolenym poście.