Różne slidery z bannerami w wersji desktop i mobilnej sklepu internetowego

Często stosowanym rozwiązaniem w sklepach internetowych jest umieszczanie na stronie głównej sklepu - pod głównym menu - sliderów z bannerami graficznymi. Taki slider wyświetla najczęściej kilka grafik / bannerów. Mogą mieć formę animowaną - np. przewijają się co określony interwał czasu.

Slider w wersji desktop może mieć szerokość sklepu (najczęściej od 1200px do 1600px) lub być rozciągnięty na całą szerokość ekranu. Takie rozwiązanie umożliwia ciekawy i atrakcyjny dla klienta sposób prezentowania oferty sklepu, np. nowości, promocji, akcji promocyjnych itd.

Problem pojawia się przy skalowaniu slidera z wersji desktop w wersji mobilnej sklepu. Ponieważ w wersji mobilnej sklep zmienia swoją szerokość - z szerokości sklepu np. 1500px zmienia się na szerokość 300-400px (w wersji pionowej ekranu telefonu). Slider przy takim przeskalowaniu staje się nieczytelny. Zmniejsza się prawie 4-krotnie jego szerokość oraz wysokość. To co jest czytelne i atrakcyjne dla klienta w wersji desktop - staje się nieczytelne i niezrozumiałe w wersji mobilnej.

Najprostszym rozwiązaniem, żeby nie było takich problemów w wersji mobilnej jest wyłączenie wyświetlania slidera z bannerami dla małych rozdzielczości. Jest to najłatwiejsze rozwiązanie - powoduje jednak, że slidery nie będą wyświetlane w wersji mobilnej.

Żeby wyłączyć wyświetlanie slidera w wersji mobilnej trzeba zmienić konfigurację modułu, który jest odpowiedzialny za wyświetlanie danego slidera. W tym celu trzeba wejść w menu Wygląd / Moduły środkowe i następnie odszukać moduł, który wyświetla slidery (aktywne w sklepie moduły są oznaczone w kolumnie "Wyświetlany w sklepie", dzięki czemu łatwiej można znaleźć moduł). Po wejściu w jego edycję w pozycji konfiguracji "Wygląd modułu przy małych rozdzielczościach" trzeba wybrać opcję "ma być niewidoczny na urządzeniach mobilnych". Przy takim ustawieniu w wersji mobilnej slider nie będzie wyświetlany.

Wyłączenie wyświetlania slidera to jedno z rozwiązań - najprostsze - jednak wyłączające slidery przy małych rozdzielczościach. Innym rozwiązaniem jest przygotowanie dwóch osobnych modułów sliderów - jeden wyświetlany w wersji desktop, drugi wyświetlany w wersji mobilnej. Takie rozwiązanie umożliwia przygotowanie osobnych grafik dla małych i dużych rozdzielczości ekranu - dzięki czemu będą one zawsze dobrze widoczne dla klienta. Dla wersji desktop grafiki będą miały szerokość min. 1200px - dla wersji mobilnej maksymalnie 1000px (najlepiej proporcje kwadratu).

Żeby uruchomić w sklepie takie rozwiązanie trzeba utworzyć dwa osobne moduły wyświetlające bannery. Bannery muszą być przypisane do różnych grup bannerów. Sposób tworzenia slidera opisujemy na stronie jak dodać slider z bannerami graficznymi. Zasada dodawania samego slidera pozostaje niezmienna jak w przypadku pojedynczego modułu.

Żeby można było wyświetlać różne bannery dla wersji desktop i mobilnej trzeba je przypisać do różnych grup bannerów. Dla przykładu dla wersji desktop może to być grupa o nazwie ANIMACJA_SLIDER_DESKTOP, a dla wersji mobilnej ANIMACJA_SLIDER_MOBILNY.

Następnie trzeba stworzyć dwa osobne moduły - jeden będzie wyświetlał bannery z grupy desktop, drugi z grupy mobilnej. Oba utworzone moduły sliderów trzeba dodać do wyświetlania na stronie sklepu zgodnie z opisem na w/w stronie.

Tworząc moduły sliderów trzeba pamiętać o odpowiednim wybraniu opcji "Wygląd modułu przy małych rozdzielczościach". Dla modułu wyświetlającego bannery w wersji desktop trzeba ustawić "ma być niewidoczny na urządzeniach mobilnych", a dla moduły wyświetlającego bannery w wersji mobilnej - "ma być widoczny tylko na urządzeniach mobilnych". Dzięki tym ustawieniom jeden moduł będzie widoczny tylko na komputerach stacjonarnych (dużych rozdzielczościach ekranu), drugi moduł - tylko na urządzeniach mobilnych.