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. Działa we wszystkich pięciu strefach, w sliderze i w czterech banerach: przydaje się zwłaszcza, gdy grafika desktopowa zawiera tekst nieczytelny na telefonie (na przykład szeroki baner 900×260 px).
• Użyj tego obrazu dla wszystkich języków: pole wyboru wyświetlane nad polami Obraz i drugie nad polami Obraz mobilny, gdy tylko sklep ma więcej niż jeden język. Po zaznaczeniu widoczne pozostaje tylko pole języka domyślnego: wgrany obraz jest przetwarzany raz i serwowany we wszystkich językach, bez duplikatów plików na dysku. Odznacz je, aby podać inną grafikę dla każdego języka (na przykład z przetłumaczonym tekstem na obrazie). Jest zaznaczone domyślnie dla nowego banera, a dla istniejącego banera wtedy, gdy wszystkie języki używają już tego samego pliku.
• Tytuł / tekst alternatywny: używany jako atrybut alt obrazu, per język.
• Link: wybierz typ z listy: produkt (wyszukiwanie po nazwie lub referencji), kategoria, producent i strona CMS (wyszukiwanie po nazwie) lub własny URL. URL-e produktu, kategorii, producenta i CMS PrestaShop generuje automatycznie w języku i sklepie odwiedzającego, z przepisywaniem URL. Własny URL wpisuje się per język i może pozostać pusty dla banera bez linku.
• Pozycja: kolejność wyświetlania w strefie (rosnąco).

Wgrywanie obrazów przy zapisie

Po kliknięciu Zapisz wybrane obrazy nie są wysyłane w jednym żądaniu. Każdy obraz jest najpierw zmniejszany w przeglądarce do maksymalnej szerokości swojej strefy, a następnie wysyłany osobno we własnym żądaniu AJAX i przetwarzany przez serwer (zmniejszanie i WebP), jeden po drugim. Komunikat pokazuje postęp obraz po obrazie. Gdy wszystkie obrazy są przetworzone, formularz zapisuje się bez żadnego pliku. Serwer przetwarza więc zawsze tylko jeden obraz naraz, nawet dla banera w 8 językach z obrazami mobilnymi.

Jeśli obraz się nie wgra, zapis zatrzymuje się, a komunikat wskazuje pole i przyczynę (plik zbyt duży dla limitu wgrywania, obraz zbyt duży dla pamięci PHP, nieobsługiwany format). Popraw to pole i zapisz ponownie: obrazy już wysłane nie są wgrywane drugi raz.

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.

Zapis nie udaje się przy wielu obrazach

Od wersji 1.4.0 obrazy są wgrywane po jednym i zmniejszane w przeglądarce przed wysłaniem, więc ten problem nie powinien już występować. Jeśli mimo to pojawi się komunikat błędu, wskazuje on pole i przyczynę. Dla zbyt dużego pliku zwiększ upload_max_filesize i post_max_size w konfiguracji PHP lub zmniejsz obraz. Dla obrazu zbyt dużego dla pamięci moduł próbuje automatycznie zwiększyć memory_limit; jeśli hosting na to nie pozwala, zmniejsz grafikę poniżej 3000 px szerokości przed wgraniem. Sprawdź też, czy moduł jest w wersji 1.4.0 lub nowszej.

Obraz mobilny banera nie wyświetla się na telefonie

Przed wersją 1.4.1 obrazu mobilnego używały tylko slajdy slidera, a cztery stałe banery zawsze pokazywały obraz desktopowy. Zaktualizuj moduł do wersji 1.4.1: aktualizacja czyści cache modułu. Wyczyść też ewentualny cache całych stron (LiteSpeed, Varnish, CDN), a potem przetestuj poniżej 768 px szerokości. W zakładce Sieć narzędzi deweloperskich powinien się ładować plik, którego nazwa zawiera image_mobile.

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.