Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa Moduł Slider Strony Głównej PrestaShop 8/9: Szybkie Banery WebP, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Siatka hero, a nie kolejna karuzela
Klasyczne moduły sliderów pokazują obraz za obrazem i na tym koniec. Ten odtwarza strukturę strony głównej dużych serwisów e-commerce: główny slider zajmujący trzy czwarte szerokości, dwa banery ułożone po jego prawej stronie (katalog, dostawa, obsługa) i dwa szerokie banery promocyjne poniżej (marki, aktualne oferty). Na mobile siatka czysto układa się w jedną kolumnę. Każdą strefę wypełniasz z tej samej zakładki panelu, z podglądem umieszczonych obrazów i ich wymiarów.
Zbudowany pod Core Web Vitals
Slider to niemal zawsze element LCP strony głównej i właśnie tam większość modułów zawodzi. Tutaj każdy obraz jest zmniejszany do maksymalnej szerokości swojej strefy i konwertowany do WebP przy wgrywaniu. Pierwszy slajd jest zapowiadany przeglądarce tagiem link rel preload z fetchpriority high, umieszczonym w head: zaczyna się ładować, zanim CSS zostanie w ogóle sparsowany. Wszystkie pozostałe obrazy ładują się leniwie z asynchronicznym dekodowaniem, a zapisane w bazie atrybuty width i height usuwają wszelkie przesunięcia układu. JavaScript slidera waży około 3 KB, czysty, ładowany z defer, bez żadnej biblioteki.
Zaplanuj kampanie, resztą zajmie się moduł
Każdy baner przyjmuje datę rozpoczęcia i zakończenia, z dokładnością do dnia lub godziny. Twoja akcja świąteczna powstaje w listopadzie, startuje 1 grudnia o północy i znika rankiem 26., bez logowania kogokolwiek do panelu. Cache modułu regeneruje się automatycznie zgodnie z kalendarzem, a każdy zapis w panelu czyści go natychmiast.
Mobile jako prawdziwy kanał, a nie pomniejszony ekran
Panoramiczna grafika o szerokości 1400 pikseli jest nieczytelna po zmniejszeniu na ekranie telefonu. Dlatego każdy slajd przyjmuje dedykowany obraz mobilny, kadrowany pionowo, serwowany poniżej 768 px przez element picture. Preload nadąża: dwa tagi preload z atrybutami media, każde urządzenie pobiera tylko swój wariant. A jeśli jakaś strefa nie ma sensu na mobile, przełącznik w konfiguracji wyłącza ją całkowicie: jej obrazy przechodzą w lazy i przeglądarka nigdy ich nie żąda. To kilobajty realnie zaoszczędzone, a nie tylko ukryte.
Czysto także po stronie serwera
Renderowanie hero trafia do cache Smarty per język i per sklep: w normalnej pracy wyświetlenie pięciu stref nie kosztuje żadnego zapytania SQL. Gdy cache się regeneruje, jedno zbiorcze zapytanie pobiera wszystkie banery. CSS i JS są rejestrowane tylko na kontrolerze strony głównej, reszta sklepu nie ładuje z nich ani bajta. Moduł trzyma się standardów PrestaShop: ObjectModel, dedykowany kontroler administracyjny, natywny multisklep i wielojęzyczność, czysta deinstalacja.
Na razie nie ma opinii o produkcie.