DF Swipe Gallery: nawigacja po produktach przez swipe

Przegląd

DF Swipe Gallery zamienia strony kategorii Twojego sklepu PrestaShop w pełnoekranową talię kart w stylu Tindera. Odwiedzający odkrywa produkty jeden po drugim: przesunięcie w prawo, aby polubić (lista życzeń), w lewo, aby pominąć, w górę, aby dodać do koszyka. Pasek postępu w stylu stories pokazuje zaawansowanie, a ekran końcowy podsumowuje ulubione produkty sesji. Każda interakcja zasila panel w zapleczu.

Instalacja

1. W zapleczu otwórz Moduły > Menedżer modułów > Załaduj moduł.
2. Wgraj plik dfswipegallery-1.3.0.zip i kliknij Zainstaluj.
3. Moduł tworzy dwie tabele (df_swipegallery_like i df_swipegallery_stat), rejestruje swoje hooki i dodaje zakładkę Katalog > Swipe Gallery.

Nie jest potrzebna żadna zmiana motywu: przycisk startowy i overlay są wstrzykiwane przez hook displayFooterAfter, niezależnie od szablonu.

Od wersji 1.3.0 przycisk i overlay są następnie przenoszone bezpośrednio do <body>: siatki motywu (np. wiersz Bootstrap w stopce Hummingbird) nie mogą już zniekształcić przycisku.

Aktualizacja

Wgraj ZIP 1.3.0 na zainstalowany moduł, z dowolnej wersji (1.0.0, 1.1.0 lub 1.2.0). Skrypty aktualizacji wykonują się kolejno: dodają brakujące kolumny, hooki i ustawienia z wartościami domyślnymi, nie zmieniając istniejących ustawień, i zachowują polubienia oraz statystyki. Następnie wyczyść pamięć podręczną PrestaShop.

Konfiguracja

Otwórz Moduły > DF Swipe Gallery > Konfiguruj. Dostępne opcje:

• Włącz swipe gallery: włącza lub wyłącza moduł globalnie.
• Tylko urządzenia mobilne: ogranicza pływający przycisk do ekranów węższych niż 992 px (domyślnie włączone). Wyłącz, aby oferować talię także na komputerze.
• Maksymalna liczba produktów w talii: od 5 do 100 (domyślnie 30).
• Kolejność talii: pozycja w kategorii, losowo (zalecane do odkrywania) lub najpierw najnowsze.
• Uwzględnij produkty z podkategorii: tak jak lista kategorii, talia pokazuje też produkty widocznych podkategorii, po produktach samej kategorii (nowość w 1.3.0, domyślnie włączone).
• Przesunięcie w górę dodaje do koszyka: włącza super-like.
• Pozwól odwiedzającemu wybrać wariant: w przypadku produktów z wariantami przesunięcie w górę otwiera panel wyboru rozmiaru, koloru itp. przed dodaniem do koszyka. Po wyłączeniu dodawany jest od razu wariant domyślny (nowość w 1.2.0, domyślnie włączone).
• Ukryj już polubione produkty: pomija w nowych taliach produkty, które odwiedzający już polubił.
• Ukryj produkty niedostępne: pomija produkty, których nie można zamówić z braku zapasu (nowość w 1.1.0).
• Pokaż cenę na kartach: pokazuje cenę, z przekreśloną ceną pierwotną przy promocji. W trybie katalogu ukrywana automatycznie.
• Pozycja przycisku startowego: na dole po prawej, po lewej lub pośrodku.
• Kolor akcentu: kolor przycisku startowego i przycisku Zacznij od nowa (nowość w 1.1.0). Kolor tekstu dostosowuje się automatycznie, aby pozostał czytelny.

Użytkowanie w sklepie

Na każdej stronie kategorii pojawia się pływający przycisk „Tryb swipe”. Po dotknięciu talia otwiera się na pełnym ekranie:

• Przesunięcie w prawo (lub przycisk serca): produkt zostaje polubiony i zapisany na liście życzeń.
• Przesunięcie w lewo (lub przycisk krzyżyka): przejście do następnego produktu.
• Przesunięcie w górę (lub przycisk koszyka): dodaje produkt do koszyka; w przypadku produktu z wariantami najpierw otwiera się panel wyboru wariantu. Przy produktach niedostępnych przycisk jest wyszarzony.
• „Zobacz produkt”: otwiera stronę produktu.

Krótki, ale szybki gest wystarczy, aby zatwierdzić przesunięcie. Karty pokazują etykiety „Już polubione” i „Niedostępny”, gdy ma to zastosowanie. Na komputerze strzałki klawiatury odtwarzają gesty (prawo: polub, lewo: pomiń, góra: koszyk), a klawisz Esc zamyka talię. Na telefonie przycisk wstecz zamyka talię zamiast opuszczać stronę.

Na końcu talii ekran podsumowania wyświetla polubione produkty z ceną i linkiem do każdej strony. Przycisk Zacznij od nowa ładuje nową talię bez zamykania overlayu.

Dostępność: fokus trafia do talii po jej otwarciu i wraca do przycisku po zamknięciu, nawigacja klawiszem Tab pozostaje w talii, bieżący produkt jest ogłaszany czytnikom ekranu, a animacje są wyłączane, gdy odwiedzający ma włączone prefers-reduced-motion.

Od wersji 1.3.0 na komputerze wskazówka pod kartami przypomina skróty klawiaturowe. Produkt wymagający personalizacji (pole obowiązkowe) ma etykietę „Do personalizacji”: pozostaje widoczny i klikalny, ale do koszyka dodaje się go z jego strony.

Lista życzeń, klienci i goście

Każde polubienie jest zapisywane w tabeli modułu, niezależnie od tego, czy pochodzi od zalogowanego klienta, czy od gościa (powiązanego z jego identyfikatorem odwiedzającego PrestaShop). Unikalny klucz zapobiega duplikatom, również gdy ten sam klient korzysta z kilku urządzeń.

Jeśli oficjalny moduł blockwishlist jest zainstalowany, a klient zalogowany, produkt jest dodawany z domyślnym wariantem do jego domyślnej listy życzeń, tworzonej automatycznie w razie potrzeby. Nie jest wymagana żadna konfiguracja.

Od wersji 1.1.0, gdy gość się zaloguje lub założy konto, jego polubienia są automatycznie przenoszone na konto klienta, a następnie dodawane do listy życzeń blockwishlist. Odpowiadają za to hooki actionAuthentication i actionCustomerAccountAdd; błąd na tym etapie nigdy nie blokuje logowania.

Dodawanie do koszyka przez przesunięcie

Przesunięcie w górę dodaje produkt po stronie serwera według tych samych zasad co natywny przycisk: wariant wybrany przez odwiedzającego (lub wariant domyślny, gdy panel jest wyłączony), minimalna ilość, kontrola zapasu i praw dostępu. Koszyk jest tworzony w razie potrzeby i zachowywany w sesji odwiedzającego.

Następnie licznik koszyka motywu jest odświeżany przez standardowe zdarzenie prestashop.emit('updateCart'), bez otwierania okna „produkt dodany” motywu. Komunikat potwierdza dodanie; jeśli produktu nie można dodać, odwiedzający widzi powód.

Produkty z obowiązkowym polem personalizacji są odrzucane po stronie serwera, tak jak w natywnym koszyku: odwiedzający widzi komunikat „Ten produkt należy spersonalizować na jego stronie przed dodaniem do koszyka.” (nowość w 1.3.0).

Wybór wariantu

W przypadku produktu z wariantami przesunięcie w górę, przycisk koszyka lub strzałka w górę otwierają panel na dole ekranu. Kolory są pokazywane jako próbki (lub z teksturą, jeśli ustawiono ją w Katalog > Atrybuty), pozostałe atrybuty jako przyciski, a długa lista typu rozwijanego pozostaje listą rozwijaną. Domyślny wariant jest wstępnie zaznaczony.

Przy każdym wyborze panel aktualizuje zdjęcie, cenę (przekreśloną przy promocji) i stan magazynowy wariantu. Wartość niedostępna jest przyciemniona; wartość, która nie istnieje w połączeniu z pozostałymi wyborami, jest przekreślona, a jej wybór przełącza na najbliższy istniejący wariant, z pierwszeństwem dla dostępnego. Przycisk dodawania pozostaje nieaktywny, dopóki wariantu nie można zamówić.

Esc, krzyżyk lub przycisk wstecz w telefonie zamykają panel bez opuszczania talii. Dane są ładowane przy pierwszym otwarciu i przechowywane w pamięci przez całą sesję. Po stronie serwera przesłany wariant jest weryfikowany (musi należeć do produktu i być sprzedawany w sklepie), a stan magazynowy jest sprawdzany, łącznie z zawartością koszyka.

Statystyki w zapleczu

Zakładka Katalog > Swipe Gallery pokazuje:

• Liczniki: obejrzane karty, polubienia, pominięte, dodane do koszyka, otwarcia strony produktu.
• Wskaźnik polubień (polubienia / (polubienia + pominięte)), wskaźnik dodań do koszyka i wskaźnik otwarć strony produktu na obejrzaną kartę.
• 20 najczęściej polubionych produktów z linkiem do ich strony w zapleczu.
• Najczęściej pomijane produkty (co najmniej 5 przesunięć), posortowane według wskaźnika pominięć: dobrzy kandydaci do lepszego zdjęcia głównego lub zmiany ceny.
• Eksport CSV wszystkich statystyk i przycisk zerowania dla każdego sklepu (polubienia odwiedzających zostają zachowane).

Statystyki usuniętego produktu są czyszczone automatycznie. Żadne dane nie są wysyłane do usług zewnętrznych.

RODO

Moduł rejestruje się w oficjalnym module psgdpr: polubienia powiązane z kontem klienta pojawiają się w eksporcie danych osobowych i są usuwane na wniosek o usunięcie danych. Są też kasowane, gdy klient zostanie usunięty w zapleczu. Statystyki są agregowane per produkt i nie zawierają danych osobowych.

Multisklep i tłumaczenia

Polubienia i statystyki są zapisywane dla każdego sklepu. Moduł jest dostarczany przetłumaczony na 8 języków (angielski jako język źródłowy oraz FR, ES, DE, IT, NL, PL, PT). Aby zmienić tekst, użyj Międzynarodowe > Tłumaczenia > Tłumaczenia zainstalowanych modułów.

Rozwiązywanie problemów

• Przycisk się nie pojawia: sprawdź, czy moduł jest włączony, czy jesteś na stronie kategorii i czy opcja „Tylko urządzenia mobilne” jest wyłączona, jeśli testujesz na komputerze.
• Talia jest pusta: kategoria nie zawiera aktywnego widocznego produktu, nie jest dostępna dla grupy odwiedzającego albo wszystkie produkty są wykluczone przez „Ukryj już polubione produkty” lub „Ukryj produkty niedostępne”.
• Licznik koszyka się nie odświeża: Twój motyw może nie nasłuchiwać zdarzenia updateCart; produkt jest w koszyku, dostosuj nasłuchiwanie w motywie lub skontaktuj się z pomocą techniczną.
• Element motywu przykrywa talię: overlay używa z-index 100000; zwiększ go w CSS, jeśli zasłania go baner cookies lub czat.
• Po aktualizacji nadal działa stara wersja: wyczyść pamięć podręczną PrestaShop i przeglądarki; skrypt aktualizacji resetuje też OPcache, gdy jest dostępny.
• Talia zawiera mniej produktów niż lista kategorii: włącz „Uwzględnij produkty z podkategorii” i sprawdź maksymalną liczbę produktów w talii (domyślnie 30). Produkty widoczne tylko w wyszukiwarce nigdy nie są pokazywane.
• PrestaShop 9.1.5 po hiszpańsku z Hummingbird: błąd na stronach kategorii: to nie jest wina modułu. Oficjalny pakiet językowy es-ES zawiera błędne tłumaczenie „Subcategorías de %s%” w translations/es-ES/ShopThemeCatalog.es-ES.xlf; zamień je na „Subcategorías de %s”, a następnie wyczyść pamięć podręczną.

Lista zmian

• 1.3.0 (2026-10-29): w motywie Hummingbird (PrestaShop 9) przycisk „Tryb swipe” nie wyświetla się już jako pasek na całą szerokość; produktów z obowiązkową personalizacją nie można już dodać do koszyka bez niej (etykieta „Do personalizacji”); opcja „Uwzględnij produkty z podkategorii” (domyślnie włączona, jak lista kategorii); przy ponad 60 kartach przycisk Zamknij pozostaje widoczny na telefonie; po „Zobacz produkt” wystarczy jedno cofnięcie; wskazówka klawiaturowa na komputerze; nieprzezroczyste tło overlayu. Sprawdzono na PrestaShop 8.2.1 (Classic) i 9.1.5 (Hummingbird), PHP 7.4–8.5.
• 1.2.0 (2026-10-13): wybór wariantu przed dodaniem do koszyka (próbki kolorów, rozmiary, cena, zdjęcie i stan dla każdego wariantu, nieistniejące warianty przekreślone i automatyczne przejście do najbliższego); opcja „Pozwól odwiedzającemu wybrać wariant”; dokładny komunikat, gdy wariant jest niedostępny; wygląd niezależny od box-sizing motywu.
• 1.1.0 (2026-10-13): koszyk utworzony przesunięciem w górę jest teraz zachowywany; domyślny wariant w koszyku i na liście życzeń; okno „produkt dodany” nie otwiera się już za talią; automatyczne przenoszenie polubień gości na konto klienta; wiarygodne statystyki (faktycznie obejrzane karty, otwarcia strony produktu, najczęściej pomijane produkty, eksport CSV, zerowanie); opcje „Ukryj produkty niedostępne” i „Kolor akcentu”; przekreślona cena; przycisk wstecz w telefonie, szybki gest, zarządzanie fokusem; RODO przez psgdpr; tłumaczenia w 8 językach.
• 1.0.0 (2026-07-16): pierwsza wersja. Pełnoekranowa talia swipe, lista życzeń przez przesunięcie w prawo z mostkiem blockwishlist, dodawanie do koszyka przesunięciem w górę, obsługa gości, panel, pasek postępu stories, zgodność z PrestaShop 8 i 9, multisklep.