Blog
Jak přidat tlačítko „Načíst další“ nebo nekonečné posouvání na stránky kategorií PrestaShopu
Stránka kategorie v PrestaShopu zobrazuje pevný počet produktů a dole řadu čísel stránek. Pokud chce zákazník vidět další, klikne na „2“, počká na načtení celé stránky a začne znovu od začátku výpisu.
Tlačítko „Načíst další“ nebo nekonečné posouvání místo toho přidá další produkty na stejnou stránku. Tento návod ukazuje, jak si mezi nimi vybrat, jak zachovat stránkované stránky viditelné pro Google a jak vše nastavit v PrestaShopu 1.7 a 8 bez úprav šablony.
Tlačítko „Načíst další“, nebo automatické nekonečné posouvání?
Oba způsoby načítají další produkty přes AJAX. Rozdíl je v tom, kdo rozhoduje, kdy k tomu dojde.
- Načíst další: zákazník klikne na tlačítko pod mřížkou produktů. Patička zůstává dosažitelná a zákazník sám určuje, kolik se toho načte.
- Nekonečné posouvání: další produkty se načtou automaticky, když se zákazník přiblíží ke konci výpisu. Procházení na telefonech je rychlejší, ale k patičce se hůř dostává.
Praktickou výchozí volbou pro většinu obchodů je tlačítko „Načíst další“; automatické načítání se vyplatí vyzkoušet v kategoriích, kde zákazníci procházejí mnoho produktů za sebou, například móda nebo dekorace.
Tlačítko „Načíst další“ vs. automatické nekonečné posouvání: úplné srovnání →
Udržte stránkování dostupné pro roboty
Vyhledávače neposouvají stránky ani neklikají na tlačítka. Pokud se produkty ze stránek 2, 3 a 4 zobrazí až po akci v JavaScriptu, robot je nemusí nikdy uvidět.
Doporučení společnosti Google ke stránkování a postupnému načítání stránek se dají shrnout do několika pravidel:
- Každá stránka kategorie má vlastní URL, například ?page=2.
- Každá stránka odkazuje na další běžným odkazem, který robot může následovat.
- Načtení dalších produktů na stránce tyto odkazy z HTML neodstraní.
Bezpečné nastavení ponechá nativní stránkování PrestaShopu v kódu stránky a vizuálně ho skryje jen tehdy, když běží JavaScript. Návštěvníci vidí tlačítko „Načíst další“ a roboti stále najdou odkazy na každou stránku.
Stránkování vs. nekonečné posouvání v PrestaShopu: pohled SEO →
Krok za krokem: přidání tlačítka „Načíst další“ nebo nekonečného posouvání na stránky kategorií
Následující kroky popisují Infinite Scroll, náš modul pro PrestaShop 1.7 a 8. Funguje přes hooky, takže soubory šablony zůstanou nedotčené.
1. Nahrajte modul
- V administraci přejděte do Moduly → Správce modulů.
- Klikněte na „Nahrát modul“.
- Přetáhněte ZIP soubor modulu do oblasti pro nahrání.
- Po dokončení instalace klikněte na „Konfigurovat“.
2. Zvolte režim načítání
- Typ načítání: „Tlačítko Načíst další“ (výchozí) nebo „Při posouvání“.
- Styl indikátoru načítání: textová zpráva nebo jedna ze šesti animací.
- Texty: popisek tlačítka, zpráva „Načítání…“ a zpráva, která se zobrazí, když už nejsou další produkty.
- Barvy tlačítka, indikátoru načítání a textu.
3. Rozhodněte, kde má fungovat
Modul funguje na stránkách kategorií a také na stránkách vyhledávání, výrobců, dodavatelů, novinek, nejprodávanějších produktů a slev. Volitelný blok na úvodní stránce načítá produkty ze zvolené kategorie, vždy po několika.
4. Zkontrolujte selektory u vlastních šablon
Modul potřebuje vědět, kde se ve vaší šabloně nacházejí produkty a stránkování. Výchozí hodnoty odpovídají šabloně Classic:
- Kontejner produktů: #products .products.row
- Stránkování: .pagination
- Odkaz na další stránku: .page-list .next
- Jednotlivý produkt: .products.row article
U vlastní šablony otevřete stránku kategorie, klikněte pravým tlačítkem na produkt, zvolte „Prozkoumat“ a zkopírujte názvy tříd, které vaše šablona používá, do nastavení modulu. Žádné změny v kódu nejsou potřeba.
5. Otestujte s filtry
Fasetové vyhledávání je místo, kde se načítání produktů nejčastěji rozbije. Na stránce kategorie otestujte tyto případy:
- Načtěte další produkty a potom použijte filtr (výrobce, cena nebo atribut).
- Nejdřív použijte filtr a potom načtěte další produkty.
- Změňte řazení a znovu načtěte další produkty.
- Otevřete stránku 2 přímo přes její URL a ověřte, že stále zobrazuje správné produkty.
Modul čte aktivní filtry a řazení, takže další produkty odpovídají tomu, co zákazník zvolil.
6. Zkontrolujte výsledek na telefonu
- Načtěte několik dávek a ověřte, že se obrázky zobrazují, aniž by stránka poskakovala.
- Pomocí tlačítka pro posun nahoru se vraťte k filtrům.
- Otevřete produkt, vraťte se zpět a ověřte, že stránka kategorie stále funguje.
Všechna nastavení Infinite Scroll vysvětlená v dokumentaci →
Rychlost a obrázky
Produkty načtené později by neměly zpomalovat první zobrazení stránky. Obrázky přidané modulem používají nativní líné načítání, asynchronní dekódování a nízkou prioritu stahování. Podporovány jsou i šablony s vlastním líným načítáním přes atributy data-src.
Optimalizace stránek kategorií v PrestaShopu: kompletní návod →
Často kladené otázky
Škodí nekonečné posouvání SEO v PrestaShopu?
Ne, pokud si každá stránka kategorie ponechá svou URL a odkazy stránkování zůstanou v HTML. Problémy začínají, když se k produktům z dalších stránek dá dostat jen posouváním nebo klikáním.
Funguje s fasetovým vyhledáváním?
Ano. Další produkty respektují aktivní filtry a řazení, včetně výrobce, ceny a atributů.
Které verze PrestaShopu jsou podporovány?
Infinite Scroll funguje v PrestaShopu 1.7 a 8.
Mohu místo automatického načítání použít tlačítko „Načíst další“?
Ano. Tlačítko je výchozí režim. Automatické načítání při posouvání se zapíná jedním přepínačem v nastavení.
Musím upravovat šablonu?
Ne. Šablona Classic funguje s výchozím nastavením. U vlastních šablon může být nutné zadat jejich selektory CSS v nastavení modulu.