Ako pridať vysúvací košík AJAX do PrestaShopu 8 a 9 (bez úprav šablóny)

Keď zákazník v predvolenom obchode PrestaShop 1.7, 8 alebo 9 pridá produkt, šablóna zobrazí potvrdzovacie okno. Aby mohol zmeniť množstvo, odstrániť položku alebo zadať zľavový kód, musí otvoriť samostatnú stránku košíka a potom nájsť cestu späť k produktom.

Vysúvací košík umožní zákazníkovi urobiť všetko priamo na stránke, na ktorej sa práve nachádza. Tento návod ukazuje, čo PrestaShop ponúka v predvolenom stave, dva spôsoby, ako pridať vysúvací košík AJAX, a nastavenie krok za krokom bez zásahu do súborov šablóny.

Čo PrestaShop vie v predvolenom stave

Košík v PrestaShope zabezpečuje modul Nákupný košík, ktorý je súčasťou obchodu. V šablóne Classic funguje takto:

• Zákazník klikne na „Pridať do košíka“ a modálne okno potvrdí, že produkt bol pridaný.
• Okno ponúka dve tlačidlá: pokračovať v nákupe alebo prejsť k pokladni.
• Akákoľvek zmena v košíku (množstvo, odstránenie produktu, zľavový kupón) prebieha na stránke košíka, ktorá sa zakaždým načíta celá nanovo.
• Na telefóne okno zakryje väčšinu obrazovky a stránka košíka je samostatný krok pred pokladňou.

Takýto postup funguje, ale každá zmena v košíku zákazníka odvedie preč z výpisu produktov. Približne 70 % online košíkov je opustených, uvádza Inštitút Baymard, a kroky medzi „pridať do košíka“ a „zaplatiť“ sú jedným z miest, kde ľudia nákup vzdávajú.

Čo zmení vysúvací košík AJAX

Vysúvací košík AJAX je panel, ktorý sa po pridaní produktu vysunie z boku obrazovky. Stránka pod ním zostane tam, kde bola.

• Množstvo sa mení tlačidlami plus a mínus, bez opätovného načítania stránky.
• Produkty sa odstraňujú priamo v paneli a súčty sa hneď aktualizujú.
• Zľavové kódy sa zadávajú v tom istom paneli.
• Ukazovateľ dopravy zadarmo zobrazuje, koľko zostáva do dosiahnutia limitu.
• Tlačidlo pokladne je vždy na jedno ťuknutie.

Čítajte ďalej: košík AJAX vs. opätovné načítanie stránky v PrestaShope a čo to znamená pre konverzie →

Dva spôsoby, ako pridať vysúvací košík

Možnosť 1: zabudovať ho do šablóny

Vývojár môže nahradiť okno košíka vlastným panelom. To znamená upraviť šablóny motívu, v JavaScripte počúvať udalosti košíka PrestaShopu, volať kontrolér košíka cez AJAX a výsledok naštýlovať pre počítače aj mobily.

Dáva to plnú kontrolu, ale celá práca je vnútri šablóny. Aktualizácia šablóny ju môže prepísať a každá nová funkcia (kupóny v paneli, ukazovateľ dopravy, odporúčané produkty) je ďalší kus vlastného kódu, ktorý treba udržiavať.

Možnosť 2: nainštalovať modul

Modul vysúvacieho košíka pridá panel cez hooky PrestaShopu. Súbory šablóny zostanú nedotknuté, panel prežije aktualizácie šablóny a jednotlivé funkcie sa zapínajú v nastaveniach modulu namiesto programovania.

Vo zvyšku návodu používame Sliding Cart Block, náš modul vysúvacieho košíka AJAX pre PrestaShop 1.7.8, 8 a 9. Pri iných moduloch je postup podobný: nahrať, nastaviť, skontrolovať hooky, otestovať.

Krok za krokom: pridanie vysúvacieho košíka bez úprav šablóny

1. Skontrolujte požiadavky

• PrestaShop 1.7.8 alebo novší, vrátane PrestaShopu 8 a 9.
• PHP 7.2 alebo novšie (samotný PrestaShop 9 vyžaduje PHP 8.1 alebo novšie).
• Účet v administrácii s oprávnením spravovať moduly.

Ak v rovnakom čase plánujete prechod na PrestaShop 9, najprv skontrolujte ostatné moduly.

Bezplatná kontrola kompatibility modulov s PrestaShopom 9 →

2. Nahrajte modul

1. V administrácii prejdite do Moduly → Správca modulov.
2. Kliknite na „Nahrať modul“ v pravom hornom rohu.
3. Presuňte ZIP súbor modulu do oblasti na nahrávanie.
4. Po dokončení inštalácie kliknite na „Konfigurovať“.

3. Zvoľte, ako sa košík otvára

Prvé nastavenia určujú, čo sa stane po kliknutí na „Pridať do košíka“:

• Automatické otvorenie panela košíka po pridaní produktu, alebo ho nechať zatvorený a aktualizovať len ikonu košíka.
• Samostatné nastavenie pre telefóny s hranicou šírky obrazovky (predvolene 480 px). Mnoho obchodov necháva panel na malých obrazovkách zatvorený a na počítačoch ho otvára.
• Panel vľavo alebo vpravo, svetlý alebo tmavý režim a rozloženie na celú šírku na telefónoch.
• Voliteľný bočný panel, ktorý zostáva otvorený na širokých obrazovkách (predvolene od 1300 px).

4. Zapnite, čo má košík zobrazovať

• Tlačidlá množstva, obrázky produktov a zvolené atribúty (veľkosť, farba).
• Pole pre zľavový kód a celková úspora.
• Ukazovateľ dopravy zadarmo. Limit pre dopravu zadarmo načítava z nastavení dopravcov, takže sumu netreba zadávať znova.
• Až tri úrovne odmien na ukazovateli, napríklad zľava, darček a doprava zadarmo.
• Odporúčané produkty v paneli a v okne po pridaní do košíka.
• Upozornenie na minimálnu hodnotu objednávky, ktoré pod minimálnou sumou zablokuje tlačidlo pokladne.

5. Skontrolujte hooky

Panel je pripojený cez hooky, takže netreba upravovať žiadnu šablónu. Ak sa košík po inštalácii nezobrazí, prejdite do Vzhľad → Pozície a overte, že je modul pripojený k displayHeader a displayNav.

Ak je aktívny iný modul košíka, môže zobrazovať druhý košík alebo druhé okno. Pred testovaním ho vypnite.

6. Vymažte vyrovnávaciu pamäť a otestujte

Vymažte vyrovnávaciu pamäť PrestaShopu v Rozšírené parametre → Výkon a potom obchod otestujte ako zákazník:

• Pridajte produkt zo stránky kategórie a zo stránky produktu.
• Zmeňte množstvo a odstráňte produkt v paneli.
• Použite zľavový kód.
• Skontrolujte ukazovateľ dopravy zadarmo pod limitom aj nad ním.
• To isté zopakujte na telefóne a potom vytvorte testovaciu objednávku.

Všetky nastavenia vysvetlené v dokumentácii Sliding Cart Block →

Čo merať po zmene

Porovnajte štyri týždne pred zmenou a po nej, zvlášť pre počítače a mobily:

• Podiel prechodov od pridania do košíka k pokladni.
• Miera opustených košíkov.
• Priemernú hodnotu objednávky, ak ste zapli ukazovateľ dopravy zadarmo alebo odporúčané produkty.

Ako merať opustené košíky v PrestaShope →

Vzory UX mobilného košíka pre PrestaShop →

Najčastejšie kladené otázky

Musím kvôli vysúvaciemu košíku upravovať šablónu?

Nie. Modul pridá panel cez hooky PrestaShopu, takže súbory šablóny zostanú bez zmien. Pri niektorých šablónach treba pár riadkov CSS na zladenie farieb alebo odsadení.

Nahrádza vysúvací košík stránku košíka?

Nie. Stránka košíka aj pokladňa fungujú rovnako ako predtým. Vysúvací košík je ďalšia vrstva, ktorá obslúži najčastejšie akcie bez opustenia stránky.

Funguje v PrestaShope 9?

Sliding Cart Block funguje v PrestaShope 1.7.8, 8 a 9. Ak aktualizujete celý obchod, skontrolujte ostatné moduly, či nepoužívajú kód, ktorý PrestaShop 9 odstránil.

Spomalí obchod?

Panel používa vlastný kontrolér AJAX a načítava len údaje, ktoré košík potrebuje. Samotná stránka produktu sa pri zmene košíka znova nenačítava.

Môžu zákazníci vo vysúvacom košíku použiť zľavové kódy?

Áno. V paneli možno zapnúť rozbaľovacie pole pre zľavový kód a súčty sa aktualizujú hneď po jeho uplatnení.