Jak přidat vysouvací košík AJAX do PrestaShopu 8 a 9 (bez úprav šablony)

Když zákazník ve výchozím obchodě PrestaShop 1.7, 8 nebo 9 přidá produkt, šablona zobrazí potvrzovací okno. Aby mohl změnit množství, odebrat položku nebo zadat slevový kód, musí otevřít samostatnou stránku košíku a pak najít cestu zpět k produktům.

Vysouvací košík umožní zákazníkovi udělat všechno přímo na stránce, kde se právě nachází. Tento návod ukazuje, co PrestaShop nabízí ve výchozím stavu, dva způsoby, jak přidat vysouvací košík AJAX, a nastavení krok za krokem bez zásahu do souborů šablony.

Co PrestaShop umí ve výchozím stavu

Košík v PrestaShopu zajišťuje modul Nákupní košík, který je součástí obchodu. V šabloně Classic funguje takto:

• Zákazník klikne na „Přidat do košíku“ a modální okno potvrdí, že byl produkt přidán.
• Okno nabízí dvě tlačítka: pokračovat v nákupu, nebo přejít k pokladně.
• Jakákoli změna v košíku (množství, odebrání produktu, slevový kupón) probíhá na stránce košíku, která se pokaždé načte celá znovu.
• Na telefonu okno zakryje většinu obrazovky a stránka košíku je samostatný krok před pokladnou.

Takový postup funguje, ale každá změna v košíku zákazníka odvede pryč z výpisu produktů. Přibližně 70 % online košíků je opuštěno, uvádí Baymard Institute, a kroky mezi „přidat do košíku“ a „zaplatit“ jsou jedním z míst, kde lidé nákup vzdávají.

Co změní vysouvací košík AJAX

Vysouvací košík AJAX je panel, který se po přidání produktu vysune z boku obrazovky. Stránka pod ním zůstane tam, kde byla.

• Množství se mění tlačítky plus a minus, bez opětovného načtení stránky.
• Produkty se odebírají přímo v panelu a součty se hned aktualizují.
• Slevové kódy se zadávají ve stejném panelu.
• Ukazatel dopravy zdarma zobrazuje, kolik zbývá do dosažení limitu.
• Tlačítko pokladny je vždy na jedno klepnutí.

Čtěte dále: košík AJAX vs. opětovné načtení stránky v PrestaShopu a co to znamená pro konverze →

Dva způsoby, jak přidat vysouvací košík

Možnost 1: zabudovat ho do šablony

Vývojář může nahradit okno košíku vlastním panelem. To znamená upravit šablony motivu, v JavaScriptu naslouchat událostem košíku PrestaShopu, volat kontroler košíku přes AJAX a výsledek nastylovat pro počítače i mobily.

Dává to plnou kontrolu, ale celá práce je uvnitř šablony. Aktualizace šablony ji může přepsat a každá nová funkce (kupóny v panelu, ukazatel dopravy, doporučené produkty) je další kus vlastního kódu, který je třeba udržovat.

Možnost 2: nainstalovat modul

Modul vysouvacího košíku přidá panel přes hooky PrestaShopu. Soubory šablony zůstanou nedotčené, panel přežije aktualizace šablony a jednotlivé funkce se zapínají v nastavení modulu, místo aby se programovaly.

Ve zbytku návodu používáme Sliding Cart Block, náš modul vysouvacího košíku AJAX pro PrestaShop 1.7.8, 8 a 9. U jiných modulů je postup podobný: nahrát, nastavit, zkontrolovat hooky, otestovat.

Krok za krokem: přidání vysouvacího košíku bez úprav šablony

1. Zkontrolujte požadavky

• PrestaShop 1.7.8 nebo novější, včetně PrestaShopu 8 a 9.
• PHP 7.2 nebo novější (samotný PrestaShop 9 vyžaduje PHP 8.1 nebo novější).
• Účet v administraci s oprávněním spravovat moduly.

Pokud ve stejnou dobu plánujete přechod na PrestaShop 9, nejdřív zkontrolujte ostatní moduly.

Bezplatná kontrola kompatibility modulů s PrestaShopem 9 →

2. Nahrajte modul

1. V administraci přejděte do Moduly → Správce modulů.
2. Klikněte na „Nahrát modul“ v pravém horním rohu.
3. Přetáhněte ZIP soubor modulu do oblasti pro nahrání.
4. Po dokončení instalace klikněte na „Konfigurovat“.

3. Zvolte, jak se košík otevírá

První nastavení určují, co se stane po kliknutí na „Přidat do košíku“:

• Automatické otevření panelu košíku po přidání produktu, nebo ponechat ho zavřený a aktualizovat jen ikonu košíku.
• Samostatné nastavení pro telefony s hranicí šířky obrazovky (výchozí 480 px). Mnoho obchodů nechává panel na malých obrazovkách zavřený a na počítačích ho otevírá.
• Panel vlevo nebo vpravo, světlý nebo tmavý režim a rozložení na celou šířku na telefonech.
• Volitelný postranní panel, který zůstává otevřený na širokých obrazovkách (výchozí od 1300 px).

4. Zapněte, co má košík zobrazovat

• Tlačítka množství, obrázky produktů a zvolené atributy (velikost, barva).
• Pole pro slevový kód a celková úspora.
• Ukazatel dopravy zdarma. Limit pro dopravu zdarma načítá z nastavení dopravců, takže není nutné částku zadávat znovu.
• Až tři úrovně odměn na ukazateli, například sleva, dárek a doprava zdarma.
• Doporučené produkty v panelu a v okně po přidání do košíku.
• Upozornění na minimální hodnotu objednávky, které pod minimální částkou zablokuje tlačítko pokladny.

5. Zkontrolujte hooky

Panel je připojen přes hooky, takže není nutné upravovat žádnou šablonu. Pokud se košík po instalaci nezobrazí, přejděte do Vzhled → Pozice a ověřte, že je modul připojen k displayHeader a displayNav.

Pokud je aktivní jiný modul košíku, může zobrazovat druhý košík nebo druhé okno. Před testováním ho vypněte.

6. Vymažte mezipaměť a otestujte

Vymažte mezipaměť PrestaShopu v Rozšířené parametry → Výkon a potom obchod otestujte jako zákazník:

• Přidejte produkt ze stránky kategorie a ze stránky produktu.
• Změňte množství a odeberte produkt v panelu.
• Použijte slevový kód.
• Zkontrolujte ukazatel dopravy zdarma pod limitem i nad ním.
• Totéž zopakujte na telefonu a potom vytvořte testovací objednávku.

Všechna nastavení vysvětlená v dokumentaci Sliding Cart Block →

Co měřit po změně

Porovnejte čtyři týdny před změnou a po ní, zvlášť pro počítače a mobily:

• Podíl přechodů od přidání do košíku k pokladně.
• Míra opuštěných košíků.
• Průměrnou hodnotu objednávky, pokud jste zapnuli ukazatel dopravy zdarma nebo doporučené produkty.

Jak měřit opuštěné košíky v PrestaShopu →

Vzory UX mobilního košíku pro PrestaShop →

Často kladené otázky

Musím kvůli vysouvacímu košíku upravovat šablonu?

Ne. Modul přidá panel přes hooky PrestaShopu, takže soubory šablony zůstanou beze změn. U některých šablon je potřeba pár řádků CSS pro sladění barev nebo odsazení.

Nahrazuje vysouvací košík stránku košíku?

Ne. Stránka košíku i pokladna fungují stejně jako dřív. Vysouvací košík je další vrstva, která obslouží nejčastější akce bez opuštění stránky.

Funguje v PrestaShopu 9?

Sliding Cart Block funguje v PrestaShopu 1.7.8, 8 a 9. Pokud aktualizujete celý obchod, zkontrolujte ostatní moduly, zda nepoužívají kód, který PrestaShop 9 odstranil.

Zpomalí obchod?

Panel používá vlastní kontroler AJAX a načítá jen data, která košík potřebuje. Samotná stránka produktu se při změně košíku znovu nenačítá.

Mohou zákazníci ve vysouvacím košíku použít slevové kódy?

Ano. V panelu lze zapnout rozbalovací pole pro slevový kód a součty se aktualizují hned po jeho uplatnění.