Slider i Banery Strony Głównej: dokumentacja

Omówienie

DF Home Banners wyświetla kompletną siatkę hero na stronie głównej sklepu, złożoną z pięciu stref: głównego slidera (wiele slajdów), górnego banera bocznego, dolnego banera bocznego, szerokiego banera lewego i szerokiego banera prawego. Na desktopie slider zajmuje około 75% szerokości, dwa banery boczne są ułożone po jego prawej stronie, a dwa szerokie banery wyświetlają się poniżej. Na mobile siatka układa się w jedną kolumnę.

Moduł jest zbudowany pod szybkość: konwersja WebP przy wgrywaniu, preload obrazu LCP, lazy loading, atrybuty wymiarów przeciw CLS, 3 KB czystego JavaScriptu i cache Smarty. Bez zależności: bez Composera i bez jQuery.

Instalacja

1. W panelu PrestaShop przejdź do Moduły > Menedżer modułów > Załaduj moduł.
2. Wybierz plik dfhomebanners.zip pobrany z konta DataFirefly.
3. Moduł instaluje się i tworzy zakładkę DF Home Banners w menu Ulepszenia, wraz ze swoimi tabelami i folderem wgrywania obrazów.

Konfiguracja modułu

Strona konfiguracji (Moduły > DF Home Banners > Konfiguruj) zawiera:

• Opóźnienie autoplay slidera w milisekundach, minimum 2000. Slider pauzuje przy najechaniu, gdy karta przeglądarki jest ukryta, i respektuje systemową preferencję prefers-reduced-motion.
• Pięć przełączników wyświetlania mobilnego, po jednym na strefę. Wyłączona strefa jest ukrywana poniżej 768 px, a jej obrazy nigdy nie są pobierane przez mobilnych odwiedzających: przechodzą w lazy loading, a ukryty leniwy obraz nie jest żądany przez przeglądarkę. Jeśli slider jest wyłączony na mobile, jego preload LCP jest automatycznie ograniczany do desktopu.

Każdy zapis konfiguracji czyści cache modułu, efekt na froncie jest natychmiastowy.

Zarządzanie banerami

Zarządzanie odbywa się w zakładce DF Home Banners menu Ulepszenia. Lista pokazuje wszystkie banery ze strefą, tytułem, datami, pozycją i statusem, z filtrami i aktywacją jednym kliknięciem.

Tworzenie banera

Kliknij Dodaj i wypełnij:

• Strefa: główny slider przyjmuje wiele banerów (po jednym na slajd); każda z czterech stałych stref pokazuje pierwszy aktywny baner według kolejności pozycji.
• Obraz: jedno pole na język. Akceptowane formaty: JPEG, PNG, WebP. Obraz jest zmniejszany do maksymalnej szerokości swojej strefy (1400 px dla slidera, 560 px dla bocznych, 900 px dla szerokich), a następnie konwertowany do WebP w jakości 82, z zachowaniem pliku zapasowego JPEG lub PNG. Końcowe wymiary są zapisywane i wstrzykiwane jako atrybuty width / height, aby wyeliminować CLS.
• Obraz mobilny: opcjonalny, jedno pole na język. Kadruj go pionowo; jest zmniejszany do 768 px, konwertowany do WebP i serwowany poniżej 768 px viewportu przez element picture. Przydatny głównie dla slajdów slidera.
• Tytuł / tekst alternatywny: używany jako atrybut alt obrazu, per język.
• URL linku: per język, opcjonalny.
• Pozycja: kolejność wyświetlania w strefie (rosnąco).

Planowanie z datami rozpoczęcia i zakończenia

Oba pola dat są opcjonalne. Akceptowany format: RRRR-MM-DD lub RRRR-MM-DD HH:MM:SS. Sama data rozpoczęcia publikuje baner od tego momentu; sama data zakończenia usuwa go w tym momencie; obie razem wyznaczają ramy kampanii. Puste pola: baner jest wyświetlany stale, dopóki jest aktywny.

Multisklep i wielojęzyczność

W kontekście multisklepu każdy baner przypisuje się do wybranych sklepów przez pola wyboru w formularzu. Obraz, obraz mobilny, link i tekst alternatywny definiuje się per język; język bez obrazu po prostu nic nie pokazuje (baner pozostaje ukryty w tym języku, dopóki nie zostanie wgrany obraz). Cache jest izolowany per język i per sklep.

Wydajność: co robi moduł

• LCP: pierwszy aktywny slajd slidera jest zapowiadany w head tagiem link rel="preload" z fetchpriority="high". Z obrazem mobilnym emitowane są dwa tagi preload z atrybutami media: każde urządzenie preloaduje tylko swój wariant.
• CLS: atrybuty width i height są ustawiane na każdym obrazie, miejsce jest rezerwowane przed załadowaniem.
• Waga: WebP na wyjściu, lazy loading na każdym obrazie poza LCP, wszędzie decoding="async".
• JavaScript: około 3 KB czystego JS ładowanego z defer na dole strony. Strzałki, kropki, swipe dotykowy, autoplay.
• Serwer: renderowanie w cache Smarty per język i sklep, jedno zbiorcze zapytanie SQL przy regeneracji. CSS i JS rejestrowane tylko na kontrolerze strony głównej.

Rozwiązywanie problemów

Banery nie pojawiają się na froncie

• Sprawdź, czy baner jest aktywny, czy obraz jest wgrany dla przeglądanego języka i czy dzisiejsza data mieści się w zdefiniowanym zakresie.
• Sprawdź przypisanie sklepu banera w multisklepie.
• Szablon musi udostępniać hook displayHome, obecny w każdym szablonie opartym na Classic. Jeśli natywny moduł slidera zajmuje już ten obszar (ps_imageslider), wyłącz go, aby uniknąć wizualnego dubletu.

Konwersja WebP nie działa

Twoje PHP prawdopodobnie nie ma imagewebp. Moduł serwuje wtedy zmniejszone oryginalne pliki JPEG / PNG. Poproś hosting o włączenie obsługi WebP w GD.

Zmiana nie pojawia się od razu

Zapisz dowolny baner lub konfigurację: cache modułu jest czyszczony przy każdym zapisie. Wyczyść też globalny cache Smarty PrestaShop, jeśli sklep stoi za cache całej strony (Varnish, LiteSpeed, CDN).

Deinstalacja

Deinstalacja usuwa zakładkę administracyjną, tabele modułu i jego wartości konfiguracyjne. Wgrane pliki obrazów pozostają w folderze modułu, dopóki nie zostanie on usunięty z dysku.