Blog

Koszyk AJAX a odświeżanie strony w PrestaShop: rzeczywisty wpływ na współczynnik konwersji

Zespół PrestaShopAddons Czas czytania: 8 minut
PrestaShop: Koszyk AJAX a odświeżanie strony – porównanie wpływu na współczynnik konwersji

Po dodaniu produktu do koszyka w systemie PrestaShop domyślnie następuje przeładowanie strony. Nowsze rozwiązania wykorzystują technologię AJAX — zawartość koszyka aktualizuje się na bieżąco, bez zmiany strony. Dla właścicieli sklepów pojawia się pytanie, czy rozwiązanie oparte na AJAX faktycznie przekłada się na wzrost sprzedaży, czy też jest to po prostu preferencja programistów pod pozorem optymalizacji.

Krótka odpowiedź: Tak, AJAX wygrywa pod względem konwersji, doświadczenia użytkownika i postrzeganej szybkości działania — ale tylko pod warunkiem prawidłowego wdrożenia. Poniżej przedstawiamy porównanie pod kątem najważniejszych aspektów, a na końcu obalamy mit dotyczący SEO.

Jak właściwie działa każda z nich

Odświeżanie strony z koszykiem (klasyczny PrestaShop)

  1. Użytkownik klika przycisk “Dodaj do koszyka”
  2. Przeglądarka wysyła dane z formularza metodą POST do kontrolera koszyka
  3. Procesy serwera, dodaje pozycję do koszyka, zwraca pełną stronę HTML
  4. Przeglądarka odbiera plik HTML o rozmiarze 40–200 KB+, analizuje go, ponownie ładuje wszystkie pliki CSS i JS, a następnie wyświetla stronę
  5. Użytkownik widzi stronę koszyka (znajduje się ona teraz na samej górze strony, poza kontekstem produktu)

Każdy krok wiąże się z ryzykiem niepowodzenia: powolny serwer, niestabilne połączenie mobilne, przekroczenie limitu czasu, przypadkowe naciśnięcie przycisku „Wstecz”.

Koszyk AJAX

  1. Użytkownik klika przycisk “Dodaj do koszyka”
  2. JavaScript wysyła żądania POST do punktu końcowego AJAX (zazwyczaj /module/slidingcartblock/ajax lub podobne)
  3. Serwer przetwarza dane i zwraca niewielki plik JSON (od 200 bajtów do 5 KB)
  4. JavaScript aktualizuje liczbę produktów w koszyku i, w razie potrzeby, otwiera wysuwany panel
  5. Użytkownik pozostaje w kontekście; produkt nadal jest widoczny na ekranie

Różnica nie jest tylko techniczna — to różnica między klientem, który myśli “koszyk został zaktualizowany”, a tym, który zastanawia się “czy nadal robię zakupy?”.”

Bezpośrednie porównanie pod względem najważniejszych parametrów

Współczynnik konwersji

Badania branżowe konsekwentnie wskazują na znaczący wzrost konwersji wynikający z ograniczenia przeszkód w procesie dodawania produktów do koszyka. Nie ma jednego konkretnego badania poświęconego wyłącznie modelowi PrestaShop, ale zbieżne wnioski z różnych platform są jednoznaczne:

  • Instytut Baymard wskazuje “zbyt długi / skomplikowany proces realizacji transakcji” oraz “błędy / awarie strony” jako pięć głównych przyczyn porzucania koszyków — oba te problemy pogłębiają się w wyniku odświeżania całej strony (Statystyki dotyczące wskaźnika porzucania koszyków, Baymard 2025).
  • Badania Google dotyczące wskaźników Core Web Vitals dokumenty, które użytkownicy urządzeń mobilnych należy zrezygnować z witryn typu 53%, których ładowanie trwa dłużej niż 3 sekundy. Całostronicowe odświeżanie przy aktualizacji zawartości koszyka często przekracza ten próg w przypadku połączeń 4G, zwłaszcza w przypadku niezoptymalizowanych motywów typu PrestaShop (web.dev — Largest Contentful Paint).
  • Często cytowane ustalenie firmy Amazon: 1-sekundowe opóźnienie zmniejsza współczynnik konwersji o 7%. Przeładowanie koszyka z łatwością wydłuża czas o 1–3 sekundy w porównaniu z odpowiedzią AJAX trwającą kilkaset milisekund.
  • W wielu raportach dotyczących platform e-commerce (Shopify Plus, BigCommerce) podaje się, że Ulepszenia związane z konwersją 5-15% dzięki zmianom w koszykach zmniejszającym opór — panelom wsuwanym, wbudowanym kontrolkom ilościowym, realizacji zamówień na jednej stronie — przy czym największe korzyści odnotowano na urządzeniach mobilnych.

Wzrost wydajności jest wyraźnie większy na urządzeniach mobilnych, ponieważ koszty związane z ponownym ładowaniem strony są tam wyższe: wolniejsze połączenia, mniejsza tolerancja na zmiany kontekstu oraz resetowanie przewijania spowodowane ponownym ładowaniem, co prowadzi do utraty kontekstu produktu przez użytkownika.

Postrzegana prędkość

Pełne odświeżenie strony powoduje, że pojawia się efekt “pusta strona → pojawia się treść”, który użytkownicy odbierają jako opóźnienie, nawet jeśli serwer działa szybko. Odpowiedź serwera trwająca 400 ms wydaje się trwać 400 ms w przypadku AJAX, a 1.5 sekundy w przypadku pełnego odświeżenia, ponieważ to ostatnie obejmuje renderowanie, analizę CSS, ładowanie czcionek i wykonanie kodu JavaScript.

To postrzeganie użytkownika, a nie czas serwera, decyduje o porzucaniu koszyków. Koszyki, które sprawiają wrażenie szybszych, generują wyższy współczynnik konwersji nawet przy tej samej rzeczywistej prędkości.

Szybkość aktualizacji koszyka (dodawanie, usuwanie, ilość)

Właśnie w tym zakresie technologia AJAX zdecydowanie dominuje. Zmiana ilości w koszyku po odświeżeniu strony:

  • Naciśnij “+”, kliknij opcję potwierdzenia, poczekaj na odświeżenie strony, przewiń z powrotem do pozycji
  • ~2–5 sekund na każdą zmianę na urządzeniu mobilnym

Ta sama operacja w koszyku opartym na AJAX:

  • Naciśnij “+” – wartość zmienia się natychmiast, a suma aktualizuje się na bieżąco
  • ~200 ms, bez odświeżania

W przypadku koszyka zawierającego pięć produktów, w którym użytkownik chce zmienić ilości, technologia AJAX pozwala zaoszczędzić 10–20 sekund. To właśnie różnica między “OK, skończyłem” a “niech to szlag”.

UX w urządzeniach mobilnych

Szczegółowo omówiono w UX mobilnego koszyka w PrestaShop — 7 wzorców, które faktycznie zwiększają konwersję. W skrócie: AJAX stanowi podstawę każdego sprawdzonego wzorca mobilnego (wysuwane panele, powiadomienia typu „toast”, przyklejone podsumowania). Odświeżanie strony uniemożliwia ich działanie.

Obciążenie serwera

Wbrew pozorom technologia AJAX jest mniej obciążająca dla serwera. Koszyk wymagający odświeżenia strony oznacza:

  • Pełne renderowanie HTML przy każdej czynności wykonywanej w koszyku
  • Wszystkie zasoby strony są ponownie pobierane (o ile nie zostały trwale zapisane w pamięci podręcznej)
  • Zapytania do bazy danych dotyczące nagłówka, stopki, menu, powiązanych produktów itp.

Punkt końcowy AJAX zwraca dane w formacie JSON — zazwyczaj zużywa to 5–20 razy mniej przepustowości, generuje mniej zapytań do bazy danych i obciąża procesor w mniejszym stopniu. W przypadku planu hostingu współdzielonego o ograniczonych zasobach koszyki oparte na technologii AJAX lepiej radzą sobie ze skokami ruchu.

Obsługa błędów

Błędy związane z koszykiem pojawiające się po odświeżeniu strony są bardzo uciążliwe: brak towaru, nieprawidłowy kupon, odrzucona płatność — każdy z nich powoduje wyświetlenie nowej strony. Użytkownik może nie wiedzieć, co się zmieniło.

Błędy AJAX można traktować w sposób ukierunkowany: wyświetlić czerwony komunikat typu „toast” obok danego elementu, pozostawiając resztę strony bez zmian, umożliwić użytkownikowi poprawienie jednego elementu i ponowienie próby. Lepsza obsługa błędów = mniej porzuconych transakcji.

Działanie przycisku „Wstecz”

Technologia AJAX może czasami zakłócać działanie przycisku „Wstecz” (jeśli nie została prawidłowo zaimplementowana — brak wpisu w historii dla akcji związanej z koszykiem). Odświeżanie strony zapewnia prawidłowe działanie przycisku „Wstecz”, ale powoduje ponowne ładowanie strony przy każdym kliknięciu tego przycisku, co stanowi inną niedogodność. Dobre implementacje AJAX wykorzystują interfejs API historii (History API) w celu zachowania prawidłowego działania przycisku „Wstecz”; te niedopracowane tego nie robią.

Gdy odświeżanie strony przebiega prawidłowo

Odświeżenie strony nie zawsze jest błędem. Przykłady uzasadnionych sytuacji:

  • Bardzo małe katalogi — 10 produktów, większość użytkowników dodaje 1–2 pozycje, koszt ponownego załadowania jest znikomy
  • Sklepy B2B charakteryzujące się powolnymi, przemyślanymi cyklami zakupowymi — klienci dodają produkty i dokładnie je przeglądają; oczekuje się, że koszyk będzie pełny, i jest to pożądane
  • Starsze szablony, w przypadku których koszt modernizacji z wykorzystaniem AJAX przewyższa wzrost sprzedaży — stary sklep, którego przychody wynoszą 500 euro miesięcznie, prawdopodobnie nie uzasadnia przeprowadzenia migracji
  • Konteksty regulacyjne, w których każda operacja w koszyku musi podlegać audytowi — niektóre branże preferują wyraźne odświeżanie po każdej czynności ze względu na jasność prawną

W przypadku typowych sklepów B2C, które generują ruch z urządzeń mobilnych, wyjątki te rzadko mają zastosowanie. Większości sklepów korzystających obecnie z funkcji „przeładuj koszyk” opłacałoby się przejść na inne rozwiązanie.

Jak zaimplementować koszyk AJAX w PrestaShop

Opcja 1: Natywny koszyk AJAX PrestaShop

Model PrestaShop 1.7+ jest dostarczany z ajax-cart.js oraz domyślny punkt końcowy kontrolera. Wiele motywów wyłącza tę funkcję lub nie wykorzystuje jej w pełni. Włączanie: Ustawienia sklepu → Ogólne → Włącz Ajax na stronie produktu. Efekt jest funkcjonalny, ale minimalistyczny — aktualizacje koszyka działają, nie ma wysuwanego panelu ani paska z informacją o bezpłatnej dostawie.

Opcja 2: Dostosowywanie na poziomie motywu

Zmodyfikuj plik motywu cart-detailed.tpl oraz dodać kod JavaScript, aby przechwytywać wysyłane formularze. Działa, ale jest to rozwiązanie niestabilne; każda aktualizacja motywu grozi jego uszkodzeniem. Zalecane tylko wtedy, gdy dysponujesz własnym zespołem programistów PHP/JS.

Opcja 3: dedykowany moduł wysuwanego koszyka

Moduł zawierający wszystkie wzorce AJAX (wysuwany panel, elementy sterujące dla urządzeń mobilnych, pasek z informacją o bezpłatnej dostawie, sprzedaż krzyżowa) w ramach jednej instalacji. Sliding Cart Block to nasz moduł w tej kategorii — oparty przede wszystkim na AJAX, zgodny z PS 1.7 i 8.x, współpracujący z większością motywów bez konieczności ich dostosowywania.

Mit dotyczący SEO: czy koszyk oparty na AJAX negatywnie wpływa na pozycję w wynikach wyszukiwania?

Często powtarzająca się obawa: “Jeśli koszyk korzysta z JavaScriptu, Google go nie widzi, a moja strona będzie miała gorszą pozycję w wynikach wyszukiwania”. To nieprawda i nie jest to prawdą już od około 2015 roku.

Fakty:

  • Google renderuje kod JavaScript podczas indeksowania (od 2019 r. robot Googlebot korzysta z najnowszej wersji silnika Chromium)
  • Sama strona koszyka zazwyczaj jest noindex lub pominięte podczas indeksowania — nie ma to wpływu na pozycję w wynikach wyszukiwania
  • Dla pozycjonowania stron (SEO) liczą się strony produktów i strony kategorii, a nie koszyk
  • Dane strukturalne Schema.org (Product, Offer, FAQ) są całkowicie niezależne od sposobu realizacji koszyka

Co mógłby Czynnik obniżający pozycję w rankingu: powolny JavaScript, który negatywnie wpływa na wskaźniki Core Web Vitals. Źle zaimplementowany koszyk AJAX, który blokuje główny wątek podczas ładowania strony, może negatywnie wpływać na wyniki wskaźników LCP i INP. Jednak dobrze zaimplementowany koszyk (z opóźnionym ładowaniem, odroczonym wykonaniem i modułową strukturą) nie ma negatywnego wpływu na SEO — a często poprawia pozycje w wynikach wyszukiwania poprzez wydłużenie czasu przebywania na stronie, zmniejszenie współczynnika odrzuceń oraz zwiększenie sygnałów konwersji.

Pełny kontekst SEO dla koszyków w PrestaShop opisujemy w Przewodnik PrestaShop dotyczący porzuconych koszyków.

Najczęściej zadawane pytania

Czy domyślny koszyk AJAX w PrestaShop działa poprawnie?

Działa, ale w ograniczonym zakresie. Aktualizuje liczbę produktów w koszyku i umożliwia dodanie produktu do koszyka bez konieczności odświeżania strony. Nie zawiera wysuwanego panelu, paska z informacją o bezpłatnej dostawie, bloku z produktami powiązanymi ani zoptymalizowanych pod kątem urządzeń mobilnych elementów sterujących ilością. W większości sklepów ten moduł jest zastępowany lub uzupełniany przez dedykowany moduł koszyka.

Czy koszyk oparty na AJAX-ie zakłóci działanie mojego niestandardowego motywu?

To zależy od sposobu implementacji. Modyfikacje na poziomie motywu mogą przestać działać po aktualizacji motywu. Koszyki AJAX na poziomie modułu (takie jak moduł wysuwanego koszyka) są wdrażane za pośrednictwem hooks i nie wymagają modyfikacji motywu — aktualizacje motywu nie mają na nie wpływu, a aktualizacje modułu nie wymagają zmian w motywie.

O ile szybciej działa koszyk AJAX w liczbach?

Średni czas operacji aktualizacji koszyka w systemie PrestaShop:

  • Czas odświeżania strony: 800–2500 ms (w zależności od serwera i wielkości motywu)
  • AJAX: 150–400 ms

To o 5–10 razy szybsze wykonanie każdej operacji. Jeśli pomnożymy to przez 3–5 zmian w koszyku na sesję, łączna różnica jest znacząca.

Czy koszyk AJAX jest dostępny dla czytników ekranu?

Tak, pod warunkiem zastosowania regionów aktywnych ARIA. Aktualizacja koszyka powinna wyświetlać komunikat “Produkt dodany do koszyka” za pomocą aria-live="polite". Dobre moduły koszyka zawierają tę funkcję; w samodzielnie tworzonych motywach często jej brakuje.

Czy przy użyciu AJAX-u nadal mogę mieć pełną stronę koszyka?

Tak — w większości implementacji koszyka opartego na AJAX pełna strona koszyka pozostaje dostępna jako opcja dodatkowa (dostępna poprzez link “Zobacz koszyk”). Wysuwane okienko jest domyślnym sposobem wyświetlania; pełna strona jest przeznaczona dla użytkowników, którzy chcą przejrzeć zawartość koszyka przed sfinalizowaniem zamówienia. Obie opcje funkcjonują równolegle.

Podsumowując

Dla każdego sklepu PrestaShop, który odnotowuje znaczący ruch z urządzeń mobilnych (obecnie jest to 70%+ sklepów), koszyk AJAX to absolutna konieczność. Przewidywany wzrost konwersji o 9–13% pozwala na zwrot kosztów wdrożenia w ciągu kilku tygodni w przypadku każdego sklepu osiągającego sprzedaż na poziomie co najmniej 5 000 euro miesięcznie.

Najłatwiejszy punkt wyjścia: a dedykowany moduł wysuwanego koszyka która obsługuje AJAX, bezpłatną wysyłkę, szablony mobilne i sprzedaż krzyżową w ramach jednej instalacji, bez konieczności wprowadzania zmian w motywie.