Product Carousel Pro — Nieograniczone Karuzele Produktów (dfproductcarousel)

Product Carousel Pro tworzy nieograniczoną liczbę karuzel produktów w dowolnym miejscu Twojego sklepu PrestaShop: bestsellery, nowości, promocje, produkty z kategorii lub ręcznie ułożony wybór, wyświetlane na sześciu standardowych hookach lub na Twoich własnych hookach niestandardowych tworzonych w locie. Wyróżnik modułu: karty produktów są renderowane przez szablon miniatury Twojego aktywnego motywu, przez ProductAssembler i ProductPresenter. Ceny, etykiety, szybki podgląd i dodawanie do koszyka działają dokładnie tak jak na stronach kategorii.

Instalacja

1. W back-office PrestaShop otwórz Moduły > Menedżer modułów.
2. Kliknij Załaduj moduł i upuść plik dfproductcarousel.zip.
3. Pod menu Moduły pojawia się zakładka Product Carousel Pro: to tam wszystko się dzieje (przycisk Konfiguruj modułu również tam przekierowuje).

Moduł tworzy trzy tabele (karuzele, tytuły wielojęzyczne, przypisanie sklepów) i rejestruje sześć hooków wyświetlania oraz actionFrontControllerSetMedia dla swoich zasobów. Hooki niestandardowe tworzone później rejestrują się automatycznie przy zapisie danej karuzeli.

Tworzenie karuzeli

Z listy kliknij Dodaj karuzelę. Formularz jest podzielony na pięć bloków: Treść, Umiejscowienie, Układ, Styl i Zachowanie.

• Nazwa wewnętrzna: widoczna tylko w back-office, żeby łatwo odnaleźć się na liście.
• Tytuł i podtytuł: wielojęzyczne, wyświetlane nad karuzelą. Zostaw tytuł pusty, aby nie pokazywać nagłówka.

Lista karuzel oferuje następnie aktywację jednym kliknięciem, duplikowanie (kopia jest tworzona jako wyłączona) i masowe usuwanie.

Źródła produktów

Każda karuzela wybiera swoje źródło spośród sześciu:

• Bestsellery: najlepiej sprzedające się produkty sklepu.
• Nowości: produkty oznaczone jako nowe (okres to Twoje ustawienie PrestaShop „Liczba dni, przez które produkt jest uznawany za nowy”).
• Promocje: produkty z trwającą obniżką.
• Produkty z kategorii: wybierz kategorię w drzewie wyboru, produkty podążają za kolejnością kategorii.
• Kategoria strony głównej: produkty kategorii głównej sklepu, odpowiednik natywnych „produktów polecanych”.
• Wybór ręczny: wybierasz produkty pojedynczo.

Pole Maksymalna liczba produktów ogranicza liczbę ładowanych produktów, niezależnie od źródła.

Wybór ręczny

Wpisz co najmniej dwa znaki w polu wyszukiwania: autouzupełnianie znajduje produkty po nazwie lub referencji. Każdy kliknięty produkt trafia na listę poniżej, ze swoim uchwytem przeciągania: zmień kolejność metodą przeciągnij i upuść, a front-office wyświetli produkty dokładnie w tej kolejności. Produkty wyłączone lub ukryte w katalogu są automatycznie filtrowane przy wyświetlaniu, bez psucia karuzeli.

Wybór umiejscowienia

Hooki standardowe

Sześć hooków jest dostępnych na liście rozwijanej:

• displayHome: strona główna;
• displayContentWrapperTop i displayContentWrapperBottom: nad i pod główną treścią, na większości stron;
• displayFooterBefore: tuż przed stopką;
• displayFooterProduct: dół karty produktu, klasyczne miejsce cross-sellingu;
• displayShoppingCartFooter: pod podsumowaniem koszyka.

Kilka karuzel może dzielić ten sam hook: układają się w kolejności swojego pola Pozycja.

Hooki niestandardowe

Wybierz Hook niestandardowy z listy, a następnie wpisz nazwę w polu, które się pojawi, na przykład MojaKaruzela. Przy zapisie moduł oczyszcza nazwę (tylko litery i cyfry), w razie potrzeby dodaje przedrostek display (displayMojaKaruzela), rejestruje hook w PrestaShop i zaczyna na niego nasłuchiwać. Następnie umieść wywołanie w wybranym szablonie:

{hook h='displayMojaKaruzela'}

Utworzony hook dołącza do listy rozwijanej dla kolejnych karuzel. Możesz utworzyć tyle hooków, ile potrzebujesz.

Składnia widget

Aby wyświetlić konkretną karuzelę niezależnie od jej hooka, użyj składni widget z identyfikatorem widocznym w pierwszej kolumnie listy:

{widget name='dfproductcarousel' carousel=3}

Przydatne na stronie CMS lub w szablonie szytym na miarę. Karuzela musi być aktywna, żeby się wyświetlić.

Układ

• Produkty w rzędzie: trzy niezależne wartości, od 1 do 8, dla desktopu (992 px i więcej), tabletu (od 768 do 991 px) i telefonu (poniżej 768 px). Klasyczna konfiguracja to 4 / 3 / 1.
• Tryb przewijania: „Jeden produkt naraz” przesuwa o jedną kartę na kliknięcie, „Cały rząd” o całą stronę.
• Odstęp: odległość w pikselach między kartami (domyślnie 20 px).
• Pełna szerokość: karuzela wychodzi ze swojego kontenera i zajmuje całą szerokość ekranu, efektowna na stronie głównej w połączeniu ze skórką Ciemna sekcja.

Styl

Pięć skórek

• Klasyczna: karty produktów motywu całkowicie nietknięte. Wybór domyślny i najbezpieczniejszy.
• Minimalna: usuwa cienie i obramowania dla płaskiego wyglądu.
• Karta: cień, zaokrąglone rogi i lekkie uniesienie po najechaniu.
• Obrys: cienka ramka wokół każdej karty, przyjmująca kolor akcentu po najechaniu.
• Ciemna sekcja: kładzie całą karuzelę na ciemnym tle, z dopasowanym tytułem i paginacją.

Ustawienia dodatkowe

• Wyrównanie tytułu: lewo, środek lub prawo, podkreślenie akcentowe podąża za nim.
• Kolor akcentu: używany dla strzałek po najechaniu, aktywnej paginacji i podkreślenia tytułu. Zostaw puste, aby odziedziczyć główny kolor motywu.
• Strzałki: widoczne lub ukryte, w trzech stylach (koło, kwadrat, minimalny bez tła).
• Paginacja: kropki lub paski, generowana automatycznie według liczby stron.

Zachowanie

• Autoplay: automatyczne przewijanie z konfigurowalnym opóźnieniem (domyślnie 5 000 ms, minimum 1 000 ms). Odtwarzanie pauzuje, gdy karta przeglądarki jest ukryta.
• Pauza po najechaniu: wstrzymuje autoplay, dopóki kursor znajduje się nad karuzelą.
• Nieskończona pętla: karuzela wraca na początek bez szarpnięcia, dzięki przezroczystemu klonowaniu krańców. Bez tej opcji strzałki wyłączają się na końcach.

Niezależnie od ustawień karuzelę obsłużysz palcem (swipe dotykowy i myszką, z ochroną przed przypadkowymi kliknięciami na końcu gestu), klawiaturą (strzałki lewo i prawo, gdy karuzela ma fokus), a moduł respektuje kierunek czytania RTL oraz systemową preferencję prefers-reduced-motion.

Renderowanie natywne dla motywu: jak to działa

• Produkty są składane i prezentowane przez ProductAssembler i ProductPresenter, mechanizmy, których sam PrestaShop używa do swoich list.
• Każda karta jest następnie renderowana przez szablon catalog/_partials/miniatures/product.tpl Twojego aktywnego motywu: ceny, rabaty, etykiety, szybki podgląd i dodawanie do koszyka są te same co w motywie, bez żadnej adaptacji.
• Moduł nigdy nie zapisuje niczego w plikach motywu: ładuje własny arkusz stylów dla mechaniki karuzeli, po CSS motywu.
• Produkt z błędem jest pomijany po cichu, zamiast psuć całą karuzelę.

Multisklep

Każda karuzela jest przypisywana do sklepów kontekstu w momencie zapisu. Aby utworzyć karuzelę dla konkretnego sklepu, przełącz się na jego kontekst selektorem multisklepu przed jej utworzeniem. Karuzela zapisana w kontekście „Wszystkie sklepy” wyświetla się wszędzie.

Rozwiązywanie problemów

• Karuzela się nie pojawia: sprawdź po kolei, czy karuzela jest aktywna, czy jej źródło zwraca co najmniej jeden produkt (pusta kategoria lub ręczny wybór wyłączonych produktów daje niemą karuzelę), czy wybrany hook istnieje na odwiedzanej stronie, i wyczyść cache PrestaShop (Zaawansowane > Wydajność).
• Hook niestandardowy nic nie wyświetla: nazwa w {hook h='...'} musi dokładnie odpowiadać zarejestrowanej nazwie, wraz z przedrostkiem display, widocznej w kolumnie Hook na liście. Po dodaniu wywołania do szablonu wyczyść cache Smarty.
• Strzałki się nie pojawiają: ukrywają się automatycznie, gdy wszystkie produkty mieszczą się w jednym rzędzie. Dodaj produkty lub zmniejsz liczbę kolumn.
• Skórka Karta lub Obrys źle wygląda z moim motywem: niektóre motywy już stosują cienie i obramowania do swoich miniatur. Wróć do skórki Klasycznej, która niczego nie dotyka, lub Minimalnej, która neutralizuje efekty motywu.
• Dwie karuzele w złej kolejności na tym samym hooku: dostosuj ich pole Pozycja, wyświetlanie podąża za rosnącą kolejnością.
• Wyszukiwarka produktów nic nie podpowiada: wyszukiwanie startuje od dwóch znaków i przeszukuje nazwy oraz referencje edytowanego właśnie języka.

Odinstalowanie

Odinstalowanie usuwa trzy tabele, zakładkę back-office i zarejestrowane hooki. Twój motyw i szablony pozostają nietknięte; jedynie wywołania {hook h='...'}, które sam dodałeś do szablonów, usuwasz ręcznie (hook bez nasłuchującego modułu po prostu nic nie wyświetla i nie generuje żadnego błędu).