Jak dodać wysuwany koszyk AJAX do PrestaShop 8 i 9 (bez edycji motywu)

Gdy klient dodaje produkt w standardowym sklepie PrestaShop 1.7, 8 lub 9, motyw wyświetla okienko z potwierdzeniem. Aby zmienić ilość, usunąć produkt lub wpisać kod rabatowy, klient musi otworzyć osobną stronę koszyka, a potem wrócić do produktów.

Wysuwany koszyk pozwala zrobić to wszystko na stronie, na której klient już jest. Ten poradnik pokazuje, jak działa PrestaShop w standardzie, dwa sposoby na dodanie wysuwanego koszyka AJAX i konfigurację krok po kroku bez ingerencji w pliki motywu.

Jak działa PrestaShop w standardzie

Koszyk w PrestaShop obsługuje moduł Koszyk dostarczany razem ze sklepem. W motywie Classic działa to tak:

• Klient klika „Dodaj do koszyka”, a okienko modalne potwierdza dodanie produktu.
• Okienko ma dwa przyciski: kontynuuj zakupy lub przejdź do realizacji zamówienia.
• Każda zmiana w koszyku (ilość, usunięcie produktu, kod rabatowy) odbywa się na stronie koszyka, która ładuje się od nowa w całości.
• Na telefonie okienko zasłania większość ekranu, a strona koszyka jest osobnym krokiem przed realizacją zamówienia.

Taki proces działa, ale każda zmiana w koszyku odsyła klienta z listy produktów. Około 70% koszyków w sklepach internetowych zostaje porzuconych według danych Instytut Baymard, a kroki między „dodaj do koszyka” a „zapłać” to jedno z miejsc, w których klienci rezygnują.

Co zmienia wysuwany koszyk AJAX

Wysuwany koszyk AJAX to panel, który wysuwa się z boku ekranu po dodaniu produktu. Strona pod spodem zostaje tam, gdzie była.

• Ilość zmienia się przyciskami plus i minus, bez przeładowania strony.
• Produkty usuwa się bezpośrednio w panelu, a sumy aktualizują się od razu.
• Kod rabatowy wpisuje się w tym samym panelu.
• Pasek darmowej dostawy pokazuje, ile brakuje do progu.
• Przycisk realizacji zamówienia jest zawsze na wyciągnięcie ręki.

Czytaj dalej: koszyk AJAX a przeładowanie strony w PrestaShop i co to oznacza dla konwersji →

Dwa sposoby na dodanie wysuwanego koszyka

Sposób 1: wbudować go w motyw

Programista może zastąpić okienko koszyka własnym panelem. Oznacza to edycję szablonów motywu, nasłuchiwanie zdarzeń koszyka PrestaShop w JavaScripcie, wywoływanie kontrolera koszyka przez AJAX i ostylowanie całości na komputery i telefony.

Daje to pełną kontrolę, ale cała praca siedzi w motywie. Aktualizacja motywu może ją nadpisać, a każda nowa funkcja (kod rabatowy w panelu, pasek dostawy, propozycje produktów) to kolejny fragment własnego kodu do utrzymania.

Sposób 2: zainstalować moduł

Moduł wysuwanego koszyka dodaje panel przez hooki PrestaShop. Pliki motywu pozostają nietknięte, panel przetrwa aktualizacje motywu, a opcje włącza się w ustawieniach modułu, zamiast je programować.

W dalszej części poradnika używamy Sliding Cart Block, naszego modułu wysuwanego koszyka AJAX dla PrestaShop 1.7.8, 8 i 9. W przypadku innych modułów kroki są podobne: wgranie, konfiguracja, sprawdzenie hooków, test.

Krok po kroku: dodanie wysuwanego koszyka bez edycji motywu

1. Sprawdź wymagania

• PrestaShop 1.7.8 lub nowszy, w tym PrestaShop 8 i 9.
• PHP 7.2 lub nowszy (sam PrestaShop 9 wymaga PHP 8.1 lub nowszego).
• Konto w panelu administracyjnym z uprawnieniami do zarządzania modułami.

Jeśli w tym samym czasie planujesz aktualizację do PrestaShop 9, najpierw przeskanuj pozostałe moduły.

Darmowy skaner zgodności modułów z PrestaShop 9 →

2. Wgraj moduł

1. W panelu administracyjnym przejdź do Moduły → Menedżer modułów.
2. Kliknij „Załaduj moduł” w prawym górnym rogu.
3. Upuść plik ZIP modułu w obszarze wgrywania.
4. Po zakończeniu instalacji kliknij „Konfiguruj”.

3. Wybierz, jak otwiera się koszyk

Pierwsze ustawienia decydują o tym, co dzieje się po kliknięciu „Dodaj do koszyka”:

• Automatyczne otwieranie panelu koszyka po dodaniu produktu albo pozostawienie go zamkniętym i aktualizowanie tylko ikony koszyka.
• Osobne ustawienie dla telefonów, z progiem szerokości ekranu (domyślnie 480 px). Wiele sklepów zostawia panel zamknięty na małych ekranach, a otwiera go na komputerach.
• Panel po lewej lub prawej stronie, tryb jasny lub ciemny oraz układ na całą szerokość na telefonach.
• Opcjonalny panel boczny, który pozostaje otwarty na szerokich ekranach (domyślnie od 1300 px).

4. Włącz to, co ma pokazywać koszyk

• Przyciski ilości, zdjęcia produktów i wybrane atrybuty (rozmiar, kolor).
• Pole kodu rabatowego i łączna oszczędność.
• Pasek darmowej dostawy. Odczytuje próg darmowej dostawy z ustawień przewoźnika, więc nie trzeba ponownie wpisywać kwoty.
• Do trzech progów nagród na pasku, na przykład rabat, prezent i darmowa dostawa.
• Propozycje produktów w panelu i w okienku po dodaniu do koszyka.
• Komunikat o minimalnej wartości zamówienia, który blokuje przycisk realizacji zamówienia poniżej minimalnej kwoty.

5. Sprawdź hooki

Panel jest podpięty przez hooki, więc nie trzeba edytować żadnego szablonu. Jeśli koszyk nie pojawia się po instalacji, przejdź do Wygląd → Pozycje i upewnij się, że moduł jest podpięty pod displayHeader i displayNav.

Jeśli aktywny jest inny moduł koszyka, może wyświetlać drugi koszyk lub drugie okienko. Przed testami wyłącz ten drugi moduł.

6. Wyczyść pamięć podręczną i przetestuj

Wyczyść pamięć podręczną PrestaShop w Zaawansowane → Wydajność, a potem przetestuj sklep jako klient:

• Dodaj produkt ze strony kategorii i ze strony produktu.
• Zmień ilość i usuń produkt w panelu.
• Użyj kodu rabatowego.
• Sprawdź pasek darmowej dostawy poniżej i powyżej progu.
• Powtórz to samo na telefonie, a potem złóż zamówienie testowe.

Wszystkie ustawienia opisane w dokumentacji Sliding Cart Block →

Co mierzyć po zmianie

Porównaj cztery tygodnie przed zmianą i po niej, osobno na komputerach i telefonach:

• Odsetek przejść od dodania do koszyka do realizacji zamówienia.
• Odsetek porzuconych koszyków.
• Średnią wartość zamówienia, jeśli włączono pasek darmowej dostawy lub propozycje produktów.

Jak mierzyć porzucanie koszyków w PrestaShop →

Wzorce UX koszyka na telefonach w PrestaShop →

Najczęściej zadawane pytania

Czy muszę edytować motyw, żeby dodać wysuwany koszyk?

Nie. Moduł dodaje panel przez hooki PrestaShop, więc pliki motywu zostają bez zmian. Niektóre motywy potrzebują kilku linijek CSS, żeby dopasować kolory lub odstępy.

Czy wysuwany koszyk zastępuje stronę koszyka?

Nie. Strona koszyka i proces zamówienia działają tak jak wcześniej. Wysuwany koszyk to dodatkowa warstwa, która obsługuje najczęstsze czynności bez opuszczania strony.

Czy działa w PrestaShop 9?

Sliding Cart Block działa w PrestaShop 1.7.8, 8 i 9. Jeśli aktualizujesz cały sklep, sprawdź pozostałe moduły pod kątem kodu, który PrestaShop 9 usunął.

Czy spowolni sklep?

Panel korzysta z własnego kontrolera AJAX i pobiera tylko dane potrzebne koszykowi. Sama strona produktu nie przeładowuje się, gdy koszyk się zmienia.

Czy klienci mogą używać kodów rabatowych w wysuwanym koszyku?

Tak. W panelu można włączyć zwijane pole kodu rabatowego, a sumy aktualizują się zaraz po użyciu kodu.