Blog
Ako pridať tlačidlo „Načítať ďalšie“ alebo nekonečné posúvanie na stránky kategórií PrestaShopu
Stránka kategórie v PrestaShope zobrazuje pevný počet produktov a dole rad čísel stránok. Ak chce zákazník vidieť ďalšie, klikne na „2“, počká na načítanie celej stránky a začne znova od začiatku výpisu.
Tlačidlo „Načítať ďalšie“ alebo nekonečné posúvanie namiesto toho pridá ďalšie produkty na tú istú stránku. Tento návod ukazuje, ako si medzi nimi vybrať, ako zachovať stránkované stránky viditeľné pre Google a ako všetko nastaviť v PrestaShope 1.7 a 8 bez úprav šablóny.
Tlačidlo „Načítať ďalšie“, alebo automatické nekonečné posúvanie?
Oba spôsoby načítavajú ďalšie produkty cez AJAX. Rozdiel je v tom, kto rozhoduje, kedy k tomu dôjde.
- Načítať ďalšie: zákazník klikne na tlačidlo pod mriežkou produktov. Päta stránky zostáva dosiahnuteľná a zákazník sám určuje, koľko sa toho načíta.
- Nekonečné posúvanie: ďalšie produkty sa načítajú automaticky, keď sa zákazník priblíži ku koncu výpisu. Prehliadanie na telefónoch je rýchlejšie, ale k päte stránky sa ťažšie dostáva.
Praktickou predvolenou voľbou pre väčšinu obchodov je tlačidlo „Načítať ďalšie“; automatické načítavanie sa oplatí vyskúšať v kategóriách, kde zákazníci prechádzajú mnoho produktov za sebou, napríklad móda alebo dekorácie.
Tlačidlo „Načítať ďalšie“ vs. automatické nekonečné posúvanie: úplné porovnanie →
Udržte stránkovanie dostupné pre roboty
Vyhľadávače neposúvajú stránky ani neklikajú na tlačidlá. Ak sa produkty zo stránok 2, 3 a 4 zobrazia až po akcii v JavaScripte, robot ich nemusí nikdy uvidieť.
Odporúčania spoločnosti Google k stránkovaniu a postupnému načítavaniu stránok sa dajú zhrnúť do niekoľkých pravidiel:
- Každá stránka kategórie má vlastnú URL, napríklad ?page=2.
- Každá stránka odkazuje na ďalšiu bežným odkazom, ktorý robot môže nasledovať.
- Načítanie ďalších produktov na stránke tieto odkazy z HTML neodstráni.
Bezpečné nastavenie ponechá natívne stránkovanie PrestaShopu v kóde stránky a vizuálne ho skryje len vtedy, keď beží JavaScript. Návštevníci vidia tlačidlo „Načítať ďalšie“ a roboty stále nájdu odkazy na každú stránku.
Stránkovanie vs. nekonečné posúvanie v PrestaShope: pohľad SEO →
Krok za krokom: pridanie tlačidla „Načítať ďalšie“ alebo nekonečného posúvania na stránky kategórií
Nasledujúce kroky opisujú Infinite Scroll, náš modul pre PrestaShop 1.7 a 8. Funguje cez hooky, takže súbory šablóny zostanú nedotknuté.
1. Nahrajte modul
- V administrácii prejdite do Moduly → Správca modulov.
- Kliknite na „Nahrať modul“.
- Presuňte ZIP súbor modulu do oblasti na nahrávanie.
- Po dokončení inštalácie kliknite na „Konfigurovať“.
2. Zvoľte režim načítavania
- Typ načítavania: „Tlačidlo Načítať ďalšie“ (predvolené) alebo „Pri posúvaní“.
- Štýl indikátora načítavania: textová správa alebo jedna zo šiestich animácií.
- Texty: popis tlačidla, správa „Načítava sa…“ a správa, ktorá sa zobrazí, keď už nie sú ďalšie produkty.
- Farby tlačidla, indikátora načítavania a textu.
3. Rozhodnite, kde má fungovať
Modul funguje na stránkach kategórií a tiež na stránkach vyhľadávania, výrobcov, dodávateľov, noviniek, najpredávanejších produktov a zliav. Voliteľný blok na úvodnej stránke načítava produkty zo zvolenej kategórie, vždy po niekoľkých.
4. Skontrolujte selektory pri vlastných šablónach
Modul potrebuje vedieť, kde sa vo vašej šablóne nachádzajú produkty a stránkovanie. Predvolené hodnoty zodpovedajú šablóne Classic:
- Kontajner produktov: #products .products.row
- Stránkovanie: .pagination
- Odkaz na ďalšiu stránku: .page-list .next
- Jednotlivý produkt: .products.row article
Pri vlastnej šablóne otvorte stránku kategórie, kliknite pravým tlačidlom na produkt, zvoľte „Preskúmať“ a skopírujte názvy tried, ktoré vaša šablóna používa, do nastavení modulu. Žiadne zmeny v kóde nie sú potrebné.
5. Otestujte s filtrami
Fazetové vyhľadávanie je miesto, kde sa načítavanie produktov najčastejšie pokazí. Na stránke kategórie otestujte tieto prípady:
- Načítajte ďalšie produkty a potom použite filter (výrobca, cena alebo atribút).
- Najprv použite filter a potom načítajte ďalšie produkty.
- Zmeňte zoradenie a znova načítajte ďalšie produkty.
- Otvorte stránku 2 priamo cez jej URL a overte, že stále zobrazuje správne produkty.
Modul číta aktívne filtre a zoradenie, takže ďalšie produkty zodpovedajú tomu, čo zákazník zvolil.
6. Skontrolujte výsledok na telefóne
- Načítajte niekoľko dávok a overte, že sa obrázky zobrazujú bez toho, aby stránka poskakovala.
- Pomocou tlačidla na posun nahor sa vráťte k filtrom.
- Otvorte produkt, vráťte sa späť a overte, že stránka kategórie stále funguje.
Všetky nastavenia Infinite Scroll vysvetlené v dokumentácii →
Rýchlosť a obrázky
Produkty načítané neskôr by nemali spomaľovať prvé zobrazenie stránky. Obrázky pridané modulom používajú natívne lenivé načítavanie, asynchrónne dekódovanie a nízku prioritu sťahovania. Podporované sú aj šablóny s vlastným lenivým načítavaním cez atribúty data-src.
Optimalizácia stránok kategórií v PrestaShope: kompletný návod →
Najčastejšie kladené otázky
Škodí nekonečné posúvanie SEO v PrestaShope?
Nie, ak si každá stránka kategórie ponechá svoju URL a odkazy stránkovania zostanú v HTML. Problémy začínajú, keď sa k produktom z ďalších stránok dá dostať len posúvaním alebo klikaním.
Funguje s fazetovým vyhľadávaním?
Áno. Ďalšie produkty rešpektujú aktívne filtre a zoradenie, vrátane výrobcu, ceny a atribútov.
Ktoré verzie PrestaShopu sú podporované?
Infinite Scroll funguje v PrestaShope 1.7 a 8.
Môžem namiesto automatického načítavania použiť tlačidlo „Načítať ďalšie“?
Áno. Tlačidlo je predvolený režim. Automatické načítavanie pri posúvaní sa zapína jedným prepínačom v nastaveniach.
Musím upravovať šablónu?
Nie. Šablóna Classic funguje s predvoleným nastavením. Pri vlastných šablónach môže byť potrebné zadať ich selektory CSS v nastaveniach modulu.