AJAXový košík vs. obnovení stránky v PrestaShop: Skutečný dopad na konverzi

Když přidáte produkt do košíku PrestaShop, stránka se standardně znovu načte. Novější řešení využívají AJAX – obsah košíku se aktualizuje přímo na stránce, aniž by došlo ke změně stránky. Pro majitele obchodů vyvstává otázka, zda řešení využívající AJAX skutečně zvyšuje tržby, nebo zda se jedná pouze o preferenci vývojářů maskovanou jako optimalizaci.

Krátká odpověď: Ano, AJAX vítězí v oblasti konverze, uživatelského zážitku i vnímané rychlosti — ale pouze za předpokladu, že je správně implementováno. Zde je srovnání v klíčových aspektech, přičemž mýtus o SEO je vyvrácen na závěr.

Jak vlastně každý z nich funguje

Obnovení stránky s košíkem (klasický PrestaShop)

1. Uživatel klikne na “Přidat do košíku”
2. Prohlížeč odešle formulář metodou POST do řadiče košíku
3. Server zpracuje požadavek, vloží položku do košíku a vrátí kompletní HTML stránku
4. Prohlížeč přijme HTML o velikosti 40–200 KB+, analyzuje jej, znovu načte všechny soubory CSS a JS a vykreslí stránku
5. Uživatel vidí stránku s košíkem (nyní v horní části obrazovky, mimo kontext produktu)

Každý krok s sebou nese riziko selhání: pomalý server, nestabilní mobilní připojení, vypršení časového limitu, omylem stisknuté tlačítko „Zpět“.

Nákupní košík AJAX

1. Uživatel klikne na “Přidat do košíku”
2. JavaScript odesílá požadavky typu POST na koncový bod AJAX (obvykle /module/slidingcartblock/ajax nebo podobné)
3. Server zpracovává a vrací malý JSON (200 bajtů – 5 KB)
4. JavaScript aktualizuje počet položek v košíku a případně otevře vysouvací panel
5. Uživatel zůstává v kontextu; produkt je stále na obrazovce

Ten rozdíl není jen technický – jde o rozdíl mezi zákazníkem, který si pomyslí “košík se aktualizoval”, a tím, který si pomyslí “nakupuju ještě?”

Přímé srovnání v klíčových aspektech

Míra konverze

Odvětvové výzkumy soustavně dokládají významné zvýšení konverze díky snížení překážek v procesu přidávání do košíku. Neexistuje sice žádná jediná definitivní studie zaměřená konkrétně na PrestaShop, avšak shodné závěry napříč platformami jsou jasné:

• Baymard Institute uvádí “příliš dlouhý / složitý proces dokončení objednávky” a “chyby / zhroucení webu” jako pět nejčastějších příčin opuštění nákupního košíku — přičemž obě tyto příčiny jsou ještě zhoršeny úplným načtením stránky (Statistiky míry opuštění nákupního košíku, Baymard 2025).
• Výzkum společnosti Google v oblasti Core Web Vitals dokumenty, které uživatelé mobilních zařízení Vyloučit stránky 53%, jejichž načítání trvá déle než 3 sekundy. Při aktualizaci obsahu nákupního košíku dochází při připojení přes 4G často k překročení této hranice, a to zejména u neoptimalizovaných šablon PrestaShop (web.dev — Largest Contentful Paint).
• Často citovaný závěr společnosti Amazon: Zpoždění o 1 sekundu snižuje konverzi o 7%. Přečtení košíku snadno přidá 1–3 sekundy oproti AJAXové odpovědi trvající několik set milisekund.
• Zprávy z různých e-commerce platforem (Shopify Plus, BigCommerce) uvádějí, že Vylepšení konverze 5-15% díky změnám v nákupních košících, které odstraňují překážky — zasouvací panely, ovládací prvky pro výběr množství v řadě, jednostránkové placení — přičemž největší nárůst byl zaznamenán na mobilních zařízeních.

Zvýšení výkonu je na mobilních zařízeních trvale větší, protože tam jsou negativní dopady opětovného načtení stránky výraznější: pomalejší připojení, menší tolerance vůči přepínání mezi kontexty a resetování posouvání stránky vyvolané opětovným načtením, při kterém dochází ke ztrátě kontextu produktu pro uživatele.

Vnímaná rychlost

Úplné obnovení stránky vyvolává moment “prázdná stránka → objeví se obsah”, který uživatelé vnímají jako zpoždění, i když je server rychlý. Odpověď serveru trvající 400 ms se při použití AJAXu jeví jako 400 ms, zatímco při úplném načtení stránky jako 1.5 sekundy, protože druhé z nich zahrnuje vykreslení, analýzu CSS, načtení písem a spuštění JavaScriptu.

Důvodem opuštění košíku je vnímání, nikoli doba odezvy serveru. Košíky, které působí rychleji, mají lepší konverzi i při stejné skutečné rychlosti.

Rychlost aktualizace košíku (přidání, odebrání, množství)

Právě v tomto ohledu AJAX naprosto dominuje. Změna počtu kusů v košíku při obnovení stránky:

• Klepněte na “+”, potvrďte, počkejte na načtení stránky a přejděte zpět k dané položce
• ~2–5 sekund na jednu změnu na mobilu

Stejný postup u košíku využívajícího AJAX:

• Klepněte na “+” – hodnota se změní okamžitě a celková částka se aktualizuje přímo v tabulce
• ~200 ms, bez obnovení stránky

V případě nákupního košíku s pěti položkami, u kterého chce uživatel upravit počty kusů, ušetří AJAX 10–20 sekund. To je rozdíl mezi “OK, hotovo” a “nechám to být”.

Mobilní uživatelské prostředí (UX)

Podrobně popsáno v Uživatelské rozhraní mobilního košíku pro PrestaShop – 7 vzorů, které skutečně vedou ke konverzi. Stručně řečeno: AJAX je základem všech funkčních mobilních vzorů (vysouvací panely, toastová oznámení, přilepené souhrny). Obnovení stránky je znemožňuje.

Využití serveru

Ačkoli by se to na první pohled nezdálo, AJAX je pro server méně náročný. Košík s obnovením stránky znamená:

• Při každé akci v košíku se provede úplné vykreslení v HTML
• Všechny soubory stránky se znovu načtou (pokud nejsou důrazně uloženy do mezipaměti)
• Databázové dotazy pro záhlaví, zápatí, nabídku, související produkty atd.

AJAXový koncový bod vrací data ve formátu JSON – obvykle to znamená 5–20krát menší náročnost na šířku pásma, méně dotazů do databáze a nižší zatížení procesoru. Na sdíleném hostingu s omezenými zdroji zvládají AJAXové nákupní košíky nárazové nárůsty návštěvnosti lépe.

Zpracování chyb

Chyby v košíku při obnovení stránky jsou kruté: vyprodáno, neplatný kupón, zamítnutá platba – každá z nich se zobrazí až po načtení nové stránky. Uživatel nemusí vědět, co se změnilo.

Chyby AJAXu lze řešit cíleně: zobrazit červený informační pruh vedle dané položky, ponechat vše ostatní beze změny, umožnit uživateli opravit jednu věc a zkusit to znovu. Lepší řešení chyb = méně opuštěných nákupů.

Chování tlačítka Zpět

AJAX může někdy narušit fungování tlačítka „Zpět“ (pokud není správně implementován – chybí záznam v historii pro akci týkající se košíku). Obnovení stránky funguje z hlediska tlačítka „Zpět“ správně, ale stránka se načítá znovu při každém kliknutí na tlačítko „Zpět“, což je další zdroj frustrace. Kvalitní implementace AJAXu využívají rozhraní History API k zachování správného chování tlačítka „Zpět“; ty nedbalé to nedělají.

Když je obnovení stránky v pořádku

Obnovení stránky nemusí být vždy na škodu. Příklady, kdy je to na místě:

• Velmi malé katalogy — 10 produktů, většina uživatelů přidává 1–2 položky, náklady na obnovení jsou zanedbatelné
• B2B obchody s pomalými a promyšlenými nákupními cykly — zákazníci přidávají položky a pečlivě je prohlížejí; očekává se a je žádoucí, aby stránka s košíkem byla plná
• Starší šablony, u nichž náklady na dodatečnou integraci AJAXu převyšují nárůst tržeb — u starého obchodu s tržbami 500 € za měsíc se migrace pravděpodobně nevyplatí
• Regulované prostředí, kde musí být každá akce v košíku auditovatelná — některá odvětví upřednostňují výslovné obnovení platnosti za každou jednotlivou akci z důvodu právní jasnosti

U typických B2C obchodů s mobilním provozem se tyto výjimky uplatňují jen zřídka. Většina obchodů, které dnes využívají funkci „znovu načíst košík“, by udělala lépe, kdyby na jiný systém přešla.

Jak implementovat košík s podporou AJAXu v systému PrestaShop

Možnost 1: Nativní košík PrestaShop s podporou AJAXu

PrestaShop 1.7+ je dodáván s ajax-cart.js a výchozí koncový bod řadiče. Mnoho šablon jej deaktivuje nebo nevyužívá v plném rozsahu. Aktivace: Nastavení obchodu → Obecné → Zapnout Ajax na stránce produktu. Výsledek je funkční, ale minimalistický – aktualizace obsahu košíku fungují, není zde vysouvací panel ani lišta s informacemi o dopravě zdarma.

Možnost 2: Přizpůsobení na úrovni motivu

Upravte šablonu svého motivu cart-detailed.tpl a přidat JavaScript, který zachytí odeslání formulářů. Funguje to, ale řešení je nestabilní; každá aktualizace šablony s sebou nese riziko, že přestane fungovat. Doporučujeme pouze v případě, že máte k dispozici vlastní vývojáře PHP/JS.

Možnost 3: specializovaný modul výsuvného košíku

Modul, který v rámci jedné instalace obsahuje všechny AJAXové šablony (vysouvací panel, ovládací prvky pro mobilní zařízení, lišta s informacemi o dopravě zdarma, křížový prodej). Sliding Cart Block je náš modul v této kategorii — využívá především AJAX, je kompatibilní s PS 1.7 a 8.x a funguje s většinou šablon bez nutnosti jejich úpravy.

Mýtus o SEO: má nákupní košík využívající AJAX negativní vliv na hodnocení?

Často se opakující obava: “Pokud nákupní košík využívá JavaScript, Google jej nevidí a moje stránka bude mít horší pozici ve výsledcích vyhledávání.” To není pravda a není to pravda už zhruba od roku 2015.

Fakta:

• Google při procházení stránek vykresluje JavaScript (Googlebot od roku 2019 využívá nejnovější jádro Chromium)
• Samotná stránka košíku obvykle noindex nebo vyřazeny z procházení — na tom nezáleží pro umístění ve výsledcích vyhledávání
• Pro SEO jsou důležité stránky produktů a kategorií, nikoli nákupní košík
• Strukturovaná data Schema.org (Product, Offer, FAQ) jsou zcela nezávislá na implementaci nákupního košíku

Co mohl by Negativní vliv na hodnocení: pomalý JavaScript, který zhoršuje ukazatele Core Web Vitals. Špatně implementovaný AJAXový košík, který během načítání stránky blokuje hlavní vlákno, může negativně ovlivnit skóre LCP a INP. Dobře implementovaný košík (s odloženým načítáním, odloženým spuštěním a modulární strukturou) však nemá žádný negativní dopad na SEO – a často dokonce zlepšuje hodnocení tím, že prodlužuje dobu setrvání na stránce, snižuje míru okamžitého opuštění a zvyšuje signály konverze.

Celý kontext SEO pro košíky v PrestaShopu popisujeme v Průvodce opuštěnými košíky PrestaShop.

Často kladené otázky

Funguje standardní AJAXový košík v šabloně PrestaShop správně?

Funguje to, ale jen v omezené míře. Aktualizuje počet položek v košíku a umožňuje přidání do košíku bez nutnosti obnovit stránku. Neobsahuje vysouvací panel, lištu s informacemi o dopravě zdarma, blok pro křížový prodej ani ovládací prvky pro zadávání množství optimalizované pro mobilní zařízení. Ve většině obchodů jej nahrazuje nebo doplňuje specializovaný modul košíku.

Může nákupní košík využívající AJAX narušit fungování mého vlastního šablony?

Záleží na tom, jak to přidáte. Úpravy na úrovni šablony se mohou při aktualizacích šablony pokazit. AJAXové košíky na úrovni modulu (jako například modul s vysouvacím košíkem) se vkládají přes hooks a nevyžadují úpravy šablony – aktualizace šablony na ně nemají vliv a aktualizace modulu nevyžadují změny v šabloně.

O kolik je AJAXový košík v reálných číslech rychlejší?

Průměrná operace aktualizace košíku na PrestaShop:

• Obnovení stránky: 800–2500 ms (v závislosti na serveru a velikosti šablony)
• AJAX: 150–400 ms

To znamená 5–10násobné zrychlení na jednu operaci. Vynásobíme-li to 3–5 úpravami košíku za jednu relaci, celkový rozdíl je značný.

Je nákupní košík AJAX přístupný pro čtečky obrazovky?

Ano, pokud je to implementováno pomocí živých oblastí ARIA. Při aktualizaci košíku by se mělo ozvat hlášení “Položka přidána do košíku” prostřednictvím aria-live="polite". Kvalitní moduly košíku tuto funkci obsahují; u vlastních implementací šablon však často chybí.

Mohu i s AJAXem mít stránku s plným košíkem?

Ano – většina implementací nákupního košíku s technologií AJAX zachovává plnou stránku košíku jako sekundární možnost (přístupnou přes odkaz “Zobrazit košík”). Vysouvací okno je výchozí způsob zobrazení; plná stránka je určena pro uživatele, kteří si chtějí před dokončením objednávky obsah košíku zkontrolovat. Obě možnosti fungují souběžně.

Závěrem

Pro každý obchod typu PrestaShop s významnou mobilní návštěvností (v současnosti 70%+ obchodů) je košík s technologií AJAX naprostou samozřejmostí. Očekávané zvýšení konverze o 9–13% zajistí návratnost nákladů na implementaci během několika týdnů u všech obchodů s obratem 5 000 € za měsíc nebo více.

Nejjednodušší vstupní bod: a specializovaný modul výsuvného košíku který v rámci jedné instalace zvládá AJAX, dopravu zdarma, responzivní design a křížový prodej, aniž by bylo třeba zasahovat do vašeho šablony.