Baner kategorii: kompletny przewodnik

Wprowadzenie i wymagania

Baner kategorii wstawia grafiki do siatki produktów na stronach kategorii, w wybranym przez Ciebie miejscu. Wskazujesz kategorię, numer produktu, po którym ma pojawić się baner, oraz obraz dla każdego języka. Resztą zajmuje się moduł, także po użyciu filtra fasetowego lub zmianie strony.

• Zgodny z PrestaShop 8.0 do 9.x, motywem Classic i motywami pochodnymi.
• PHP 7.4 do 8.3.
• Wielosklepowość i wielojęzyczność (fr, en, es, de, it, nl, pl, pt).
• Bez override’ów, bez zmian w szablonach, bez zadań CRON.
• Kod HTML baneru powstaje po stronie serwera z szablonu Smarty; JavaScript jedynie wstawia go we właściwe miejsce, bez jQuery i bez zewnętrznych bibliotek.

Instalacja

1. Pobierz archiwum datafireflycategorybanner.zip ze swojego konta klienta.
2. W panelu administracyjnym otwórz Moduły > Menedżer modułów.
3. Kliknij Wyślij moduł i upuść archiwum.
4. Kliknij Konfiguruj, aby przejść do listy banerów.

Podczas instalacji moduł tworzy trzy tabele (banery, tłumaczenia, powiązanie ze sklepami), tworzy katalog /img/datafireflycategorybanner/ i rejestruje swoje hooki.

Tworzenie baneru

Na stronie konfiguracji kliknij Dodaj nowy baner. Formularz grupuje następujące ustawienia.

Kierowanie

• Kategoria: kategoria, w której pojawia się baner. Lista odwzorowuje drzewo sklepu, a kategorie wyłączone są oznaczone.
• Zastosuj do podkategorii: rozszerza baner na wszystkie podkategorie wybranej kategorii, niezależnie od głębokości.
• Po produkcie numer: baner jest wstawiany po tym produkcie listy. Wartość 4 umieszcza baner po czwartym wyświetlonym produkcie.

Wygląd i odnośnik

• Link baneru: docelowy adres URL, bezwzględny (https://…) lub zaczynający się od ukośnika (/nowosci). Pozostaw puste, aby baner nie był klikalny.
• Klasa CSS: klasy siatki nadawane komórce baneru, na przykład col-12 lub col-12 col-md-6. Pozostaw puste, aby automatycznie przejąć klasy komórek produktów Twojego motywu.
• Własny CSS: deklaracje stosowane tylko do tego baneru, na przykład border-radius: 12px; padding: 10px;.

Harmonogram i status

• Data rozpoczęcia i Data zakończenia: okno wyświetlania w formacie RRRR-MM-DD GG:MM:SS. Puste pole oznacza brak ograniczenia po tej stronie.
• Aktywny: pokazuje lub zawiesza baner bez usuwania go.
• Przypisanie do sklepów: w trybie wielosklepowym zaznacz odpowiednie sklepy.

Obrazy dla każdego języka

Pola Obraz baneru i Tekst alternatywny istnieją dla każdego aktywnego języka. Zakładki języków u góry formularza pokazują pola wybranego języka. Gdy obraz już istnieje, pojawia się podgląd wraz z przełącznikiem Usuń obraz, który dotyczy tylko tego języka.

Jak obliczana jest pozycja

Pozycja wyrażana jest w liczbie produktów i obowiązuje na każdej stronie listy. Baner ustawiony na 4 pojawia się po czwartym produkcie bieżącej strony, niezależnie od tego, czy odwiedzający jest na stronie 1 czy 3.

Kilka banerów może dotyczyć tej samej kategorii, każdy na swojej pozycji. Gdy dwa banery mają tę samą pozycję, są wstawiane jeden po drugim w kolejności zapisu. Jeśli pozycja przekracza liczbę produktów wyświetlonych na stronie, baner jest po prostu pomijany na tej stronie, bez przesuwania pozostałych.

Domyślnie baner przyjmuje szerokość komórki produktu: moduł odczytuje klasy siatki pierwszego produktu listy i nadaje je banerowi. Wypełnij pole Klasa CSS, aby wymusić inną szerokość, na przykład baner na pełną szerokość z col-12.

Planowanie akcji

Ustaw datę rozpoczęcia i datę zakończenia, aby baner pojawiał się i znikał sam. To właściwe narzędzie do przygotowania wyprzedaży, Black Friday czy akcji na koniec roku z wielotygodniowym wyprzedzeniem.

• Tylko data rozpoczęcia: baner pojawia się w tym dniu i pozostaje widoczny.
• Tylko data zakończenia: baner jest widoczny od razu i znika w tym dniu.
• Obie daty: baner jest widoczny wyłącznie w tym oknie.
• Brak dat: baner jest stały.

Objęcie całego drzewa

Opcja Zastosuj do podkategorii oszczędza tworzenia tego samego baneru w każdym dziale. Ustawiona na kategorii nadrzędnej sprawia, że baner pojawia się w tej kategorii i we wszystkich jej potomkach.

Wyszukiwanie opiera się na natywnym drzewie zagnieżdżonym PrestaShop (kolumny nleft i nright), więc nie generuje dodatkowych zapytań na stronę. Po przeniesieniu kategorii PrestaShop przelicza te wartości, a zasięg dostosowuje się automatycznie.

Obrazy i języki

Każdy baner przyjmuje grafikę i tekst alternatywny dla każdego języka, co pozwala dopasować komunikat lub cenę do rynku. Jeśli język nie otrzymał własnej grafiki, moduł pokazuje grafikę języka domyślnego sklepu zamiast ukrywać baner.

Wymiary obrazu są odczytywane przy przesyłaniu i zapisywane w atrybutach width i height w HTML, co eliminuje przesunięcie układu podczas ładowania. Pliki są zmieniane na nazwy z losowym przyrostkiem i zapisywane w /img/datafireflycategorybanner/.

Tryb wielosklepowy

Gdy funkcja wielosklepowa jest włączona, formularz pokazuje blok Przypisanie do sklepów. Baner pojawia się tylko w zaznaczonych sklepach, a lista w panelu pokazuje wyłącznie banery widoczne w bieżącym kontekście sklepu.

Jeśli nie zaznaczysz żadnego sklepu, moduł przypisze baner do bieżącego kontekstu, aby nigdy nie powstał baner bez sklepu.

Filtry fasetowe, sortowanie i stronicowanie

W PrestaShop 8 i 9 filtry fasetowe, sortowanie i stronicowanie przeładowują listę produktów przez AJAX bez przeładowania strony. Moduł nasłuchuje zdarzenia updateProductList PrestaShop, usuwa poprzednie banery i wstawia je ponownie na właściwych pozycjach po każdym odświeżeniu DOM.

CSS i JavaScript ładują się tylko na stronach kategorii i tylko wtedy, gdy bieżąca kategoria ma co najmniej jeden aktywny i możliwy do wyświetlenia baner.

Aktualizacja z wersji 1.0.0

Po prostu zainstaluj nowe archiwum na starym z poziomu menedżera modułów. Skrypt aktualizacji zajmie się:

• dodaniem kolumn zasięgu, harmonogramu i wymiarów obrazu;
• utworzeniem tabeli powiązań ze sklepami i przeniesieniem do niej pierwotnego sklepu każdego baneru;
• przeniesieniem istniejących obrazów z views/img/banners/ do /img/datafireflycategorybanner/ i odczytaniem ich wymiarów;
• usunięciem zbędnego już hooka.

Twoje banery, ich pozycje i grafiki zostają zachowane.

FAQ i rozwiązywanie problemów

Baner nie pojawia się na stronie kategorii

Sprawdź po kolei: baner jest aktywny; dzisiejsza data mieści się w oknie harmonogramu; wskazana kategoria to ta przeglądana albo włączony jest zasięg na podkategorie; wyświetlany język ma obraz, albo ma go język domyślny; w trybie wielosklepowym bieżący sklep jest zaznaczony. Na końcu wyczyść pamięć podręczną PrestaShop.

Baner pojawia się w złym miejscu

Pozycja liczy produkty bieżącej strony. Jeśli lista pokazuje 12 produktów na stronę, baner na pozycji 20 nie pojawi się nigdzie. Zmniejsz wartość lub zwiększ liczbę produktów na stronę.

Baner psuje układ siatki

Wyczyść pole Klasa CSS, aby baner przejął klasy komórek produktów Twojego motywu. Dla baneru na pełną szerokość wpisz col-12. Nie mieszaj klas z różnych systemów siatki.

Baner znika po filtrowaniu

Moduł podpina się ponownie do zdarzenia updateProductList. Jeśli Twój motyw lub zewnętrzny moduł filtrów zastępuje cały kontener listy produktów bez wywołania tego zdarzenia, ponowne wstawienie nie może nastąpić. Skontaktuj się ze wsparciem, podając używany motyw i moduł filtrów.

Obraz nie chce się przesłać

Moduł przyjmuje pliki JPG, PNG, GIF, WebP i SVG do 4 MB. Sprawdź też, czy katalog /img/datafireflycategorybanner/ ma prawo zapisu oraz czy dyrektywy PHP upload_max_filesize i post_max_size są większe od rozmiaru pliku.

Link baneru jest odrzucany

Akceptowane są wyłącznie adresy zaczynające się od http://, https:// lub od ukośnika. To zabezpieczenie przed wstrzyknięciem adresów javascript: lub data:.

Co dzieje się przy odinstalowaniu?

Moduł usuwa swoje tabele oraz katalog /img/datafireflycategorybanner/ wraz z zawartymi w nim grafikami. Zrób kopię obrazów, jeśli planujesz późniejszą ponowną instalację.