Homepage Banner Grid - klikalny kolaż zdjęć, trzy responsywne układy, bez edycji szablonu

Twoja strona główna ma jakieś trzy sekundy, żeby wskazać kierunek

Slider, który wszyscy przewijają, i rządek „polecanych produktów” to jeszcze nie merchandising. Siatka banerów już tak: kilka zdjęć, z których każde świadomie prowadzi do tej części asortymentu, w której naprawdę chcesz mieć klientów. Właśnie taką siatkę buduje ten moduł — z poziomu zaplecza, bez dotykania choćby jednego pliku szablonu.

Trzy układy gotowe do wypełnienia

• Feature Split (dominujący kafel główny) — jeden duży kafel wiodący i cztery uzupełniające. Pięć kafelków dla sklepu z jednym głównym przekazem i kilkoma pobocznymi ścieżkami.
• Mosaic (mozaika) — gęsta siatka szesnastu kafelków w stylu magazynu, dla asortymentów z wieloma kategoriami wartymi wyeksponowania.
• Showcase (wyważona ekspozycja) — redakcyjny układ pięciu kafelków, gdy nic nie ma przytłaczać reszty.

Każdy układ ma podgląd na żywo na stronie konfiguracji, więc wybierasz oczami, a nie na wyczucie.

Jak to działa

• 1. Wybierz układ — kliknij jedną z trzech kart podglądu; strona przeładuje się i pokaże miejsca na zdjęcia w tym układzie.
• 2. Ustaw opcje wyglądu — powiększenie po najechaniu, podpisy na zdjęciu, zaokrąglone rogi, otwieranie w nowej karcie oraz odstęp między kafelkami od 0 do 16 px.
• 3. Wypełnij kafelki — wgraj zdjęcie do każdego z nich, ustal link, który ma otwierać, i dodaj tytuł, jeśli chcesz mieć podpis. Zapisz — i już jest na stronie głównej.

Każdy kafelek to prawdziwy link

Kafelek może otwierać kategorię, markę, produkt albo dowolną stronę — wewnętrzną ścieżkę w rodzaju /3-clothes lub pełny adres https://. Linki są walidowane: akceptowane są wyłącznie ścieżki wewnętrzne i adresy http(s), a wszystko inne zostaje zignorowane. Tytuły pełnią jednocześnie rolę podpisu na zdjęciu i etykiety dostępności dla linku.

Responsywność z jednego arkusza stylów

Wersja 1.x dostarczała osobny arkusz stylów dla każdej sztywnej szerokości w pikselach — 980, 1000, 1110, 1170 — i osobny szablon dla każdej wersji PrestaShop. Wszystkie dziesięć arkuszy i siedem szablonów zniknęło, zastąpił je jeden arkusz CSS-Grid i jeden szablon sterowany danymi. Każdy układ sam przechodzi z desktopu przez dwukolumnową siatkę na tablecie do pojedynczej kolumny na telefonie. Nie musisz już wybierać szerokości w pikselach dla swojego sklepu.

Moduł sam sprawdza swoją konfigurację

Panel Status na górze strony konfiguracji pokazuje, czy siatka faktycznie jest podpięta do strony głównej i czy folder na zdjęcia ma prawo zapisu — wraz z przyciskiem Pokaż na stronie głównej, który załatwia to jednym kliknięciem. Dawne instrukcje „ustaw folderowi uprawnienia 777” i „przenieś moduł na pierwszą pozycję” zastąpiły prawdziwe testy.

Bezpieczniejszy niż moduł, który zastępuje

Wgrywane zdjęcia są weryfikowane jako prawdziwe obrazy w oparciu o listę dozwolonych rozszerzeń i zapisywane w libs/custom/ pod odrębnymi nazwami, więc przyszła aktualizacja modułu nigdy nie nadpisze Twoich banerów dołączonymi przykładami — a to błąd konstrukcyjny, który drzemał w wersji 1.x. Arkusz stylów ładuje się przez actionFrontControllerSetMedia zamiast przez przestarzały hak displayHeader, a blok renderuje się przez interfejs widżetów PrestaShop, dzięki czemu możesz go umieścić także w dowolnym innym miejscu za pomocą {widget name='blockpicturecollagepro'}.

Zgodność

PrestaShop 1.7, 8 i 9, w ośmiu językach: angielskim, francuskim, hiszpańskim, holenderskim, niemieckim, polskim, tureckim i włoskim. Obsługuje tryb wielosklepowy, więc do każdego sklepu wgrasz inne banery. Podczas instalacji podpina się do haka Home i nigdy nie zmienia ani nie nadpisuje pliku szablonu — odinstalowanie usuwa jego ustawienia, linki, tytuły i wgrane zdjęcia, a szablon zostaje dokładnie taki, jaki był.

Najczęściej zadawane pytania

Jakiej wielkości powinny być moje banery?

Kafelki kadrują zdjęcie tak, by wypełniło całą przestrzeń, więc dokładne wymiary nie są kluczowe. Około 1200×800 px dla dużych kafelków i 600×400 px dla małych wygląda ostro. Akceptowane są JPG, PNG, GIF i WEBP.

Czy każdy kafelek może prowadzić gdzie indziej?

Tak — każdy kafelek ma własne zdjęcie, własny link i opcjonalny tytuł, i może wskazywać dowolną kategorię, markę, produkt lub stronę.

Czy zadziała na telefonie?

Tak. Jeden arkusz CSS-Grid przeprowadza każdy układ z desktopu przez dwukolumnową siatkę na tablecie do pojedynczej kolumny na telefonie.

Czy muszę edytować szablon?

Nie. Moduł podpina się przy instalacji do haka Home. Jeśli Twój szablon korzysta z własnego haka strony głównej, umieść go zamiast tego przez {widget name='blockpicturecollagepro'}.

Siatka nie pokazuje się na mojej stronie głównej — co teraz?

Panel Status powie Ci, czy jest podpięta, i zaproponuje przycisk „Pokaż na stronie głównej” działający jednym kliknięciem. Możesz też sprawdzić hak displayHome w Wygląd → Pozycje i przesunąć siatkę ponad swój slider.

Czy mogę mieć różne banery w różnych sklepach?

Tak, moduł obsługuje tryb wielosklepowy — banery wgrywa się osobno dla każdego sklepu.

Co stanie się z moimi banerami przy aktualizacji modułu?

Nic. Wgrane pliki trafiają do libs/custom/ pod odrębnymi nazwami właśnie po to, żeby żadna aktualizacja nie podmieniła ich na dołączone przykłady.