Jak dodać przycisk „Załaduj więcej” lub nieskończone przewijanie do stron kategorii PrestaShop

Strona kategorii w PrestaShop pokazuje stałą liczbę produktów, a na dole rząd numerów stron. Aby zobaczyć więcej, klient klika „2”, czeka na załadowanie całej strony i zaczyna przeglądać listę od początku.

Przycisk „Załaduj więcej” lub nieskończone przewijanie dokłada kolejne produkty na tej samej stronie. Ten poradnik pokazuje, jak wybrać jedno z dwóch, jak zachować widoczność stron paginacji dla Google i jak skonfigurować to w PrestaShop 1.7 i 8 bez edycji motywu.

Przycisk „Załaduj więcej” czy automatyczne nieskończone przewijanie?

Oba sposoby wczytują kolejne produkty przez AJAX. Różnica polega na tym, kto decyduje, kiedy to nastąpi.

• Załaduj więcej: klient klika przycisk pod siatką produktów. Stopka pozostaje w zasięgu, a klient sam decyduje, ile produktów wczytać.
• Nieskończone przewijanie: kolejne produkty wczytują się automatycznie, gdy klient zbliża się do końca listy. Przeglądanie na telefonach jest szybsze, ale trudniej dotrzeć do stopki.

Praktycznym ustawieniem domyślnym dla większości sklepów jest przycisk „Załaduj więcej”, a automatyczne wczytywanie warto przetestować w kategoriach, w których klienci przeglądają wiele produktów pod rząd, np. moda czy dekoracje.

Przycisk „Załaduj więcej” a automatyczne nieskończone przewijanie: pełne porównanie →

Zadbaj o dostępność stron paginacji dla robotów

Wyszukiwarki nie przewijają stron i nie klikają przycisków. Jeśli produkty ze stron 2, 3 i 4 pojawiają się dopiero po akcji w JavaScripcie, robot może ich nigdy nie zobaczyć.

Wytyczne Google dotyczące paginacji i stopniowego wczytywania stron sprowadzają się do kilku zasad:

• Każda strona kategorii ma własny adres URL, np. ?page=2.
• Każda strona linkuje do następnej zwykłym linkiem, za którym robot może podążyć.
• Wczytanie kolejnych produktów na stronie nie usuwa tych linków z HTML.

Bezpieczna konfiguracja zostawia natywną paginację PrestaShop w kodzie strony i ukrywa ją wizualnie tylko wtedy, gdy działa JavaScript. Odwiedzający widzą przycisk „Załaduj więcej”, a roboty nadal znajdują linki do każdej strony.

Paginacja a nieskończone przewijanie w PrestaShop: strona SEO →

Krok po kroku: dodanie przycisku „Załaduj więcej” lub nieskończonego przewijania do stron kategorii

Poniższe kroki opisują Infinite Scroll, nasz moduł dla PrestaShop 1.7 i 8. Działa przez hooki, więc pliki motywu pozostają nietknięte.

1. Wgraj moduł

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

2. Wybierz tryb wczytywania

• Typ wczytywania: „Przycisk Załaduj więcej” (domyślnie) lub „Podczas przewijania”.
• Styl wskaźnika ładowania: komunikat tekstowy lub jedna z sześciu animacji.
• Teksty: etykieta przycisku, komunikat „Ładowanie…” i komunikat wyświetlany, gdy nie ma więcej produktów.
• Kolory przycisku, wskaźnika ładowania i tekstu.

3. Zdecyduj, gdzie ma działać

Moduł działa na stronach kategorii, a także na stronach wyszukiwania, producentów, dostawców, nowości, bestsellerów i promocji. Opcjonalny blok na stronie głównej wczytuje produkty z wybranej kategorii, po kilka naraz.

4. Sprawdź selektory w niestandardowych motywach

Moduł musi wiedzieć, gdzie w Twoim motywie znajdują się produkty i paginacja. Wartości domyślne pasują do motywu Classic:

• Kontener produktów: #products .products.row
• Paginacja: .pagination
• Link do następnej strony: .page-list .next
• Pojedynczy produkt: .products.row article

W niestandardowym motywie otwórz stronę kategorii, kliknij produkt prawym przyciskiem myszy, wybierz „Zbadaj” i skopiuj nazwy klas używane przez motyw do ustawień modułu. Zmiany w kodzie nie są potrzebne.

5. Przetestuj z filtrami

Wyszukiwanie fasetowe to miejsce, w którym wczytywanie produktów najczęściej się psuje. Przetestuj na stronie kategorii te przypadki:

• Wczytaj więcej produktów, a potem zastosuj filtr (producent, cena lub atrybut).
• Najpierw zastosuj filtr, a potem wczytaj więcej produktów.
• Zmień sortowanie i ponownie wczytaj więcej produktów.
• Otwórz stronę 2 bezpośrednio przez jej adres URL i sprawdź, czy nadal pokazuje właściwe produkty.

Moduł odczytuje aktywne filtry i sortowanie, więc kolejne produkty odpowiadają temu, co wybrał klient.

6. Sprawdź efekt na telefonie

• Wczytaj kilka partii produktów i sprawdź, czy zdjęcia pojawiają się bez skakania strony.
• Użyj przycisku przewijania do góry, żeby wrócić do filtrów.
• Otwórz produkt, wróć i sprawdź, czy strona kategorii nadal działa.

Wszystkie ustawienia Infinite Scroll opisane w dokumentacji →

Szybkość i zdjęcia

Produkty wczytywane później nie powinny spowalniać pierwszego wyświetlenia strony. Zdjęcia dodawane przez moduł korzystają z natywnego leniwego ładowania, asynchronicznego dekodowania i niskiego priorytetu pobierania. Obsługiwane są też motywy z własnym leniwym ładowaniem przez atrybuty data-src.

Optymalizacja stron kategorii w PrestaShop: kompletny poradnik →

Najczęściej zadawane pytania

Czy nieskończone przewijanie szkodzi SEO w PrestaShop?

Nie, jeśli każda strona kategorii zachowuje swój adres URL, a linki paginacji zostają w HTML. Problemy zaczynają się, gdy do produktów z dalszych stron da się dotrzeć tylko przez przewijanie lub klikanie.

Czy działa z wyszukiwaniem fasetowym?

Tak. Kolejne produkty uwzględniają aktywne filtry i sortowanie, w tym producenta, cenę i atrybuty.

Które wersje PrestaShop są obsługiwane?

Infinite Scroll działa w PrestaShop 1.7 i 8.

Czy mogę użyć przycisku „Załaduj więcej” zamiast automatycznego wczytywania?

Tak. Przycisk to tryb domyślny. Automatyczne wczytywanie podczas przewijania włącza się jednym przełącznikiem w ustawieniach.

Czy muszę edytować motyw?

Nie. Motyw Classic działa z ustawieniami domyślnymi. W niestandardowych motywach może być potrzebne wpisanie ich selektorów CSS w ustawieniach modułu.