So fügen Sie PrestaShop-Kategorieseiten einen „Mehr laden“-Button oder Infinite Scroll hinzu

Eine PrestaShop-Kategorieseite zeigt eine feste Anzahl von Produkten und unten eine Reihe von Seitenzahlen. Um mehr zu sehen, klickt der Kunde auf „2“, wartet, bis die ganze Seite geladen ist, und beginnt wieder oben in der Liste.

Ein „Mehr laden“-Button oder Infinite Scroll fügt die nächsten Produkte stattdessen auf derselben Seite hinzu. Diese Anleitung zeigt, wie Sie zwischen beiden wählen, wie die paginierten Seiten für Google sichtbar bleiben und wie Sie das Ganze in PrestaShop 1.7 und 8 einrichten, ohne das Theme zu bearbeiten.

„Mehr laden“-Button oder automatischer Infinite Scroll?

Beide laden die nächsten Produkte per AJAX. Der Unterschied liegt darin, wer entscheidet, wann das passiert.

• „Mehr laden“: Der Kunde klickt auf einen Button unter dem Produktraster. Der Footer bleibt erreichbar, und der Kunde behält die Kontrolle darüber, wie viel geladen wird.
• Infinite Scroll: Die nächsten Produkte werden automatisch geladen, sobald sich der Kunde dem Ende der Liste nähert. Auf Smartphones geht das Stöbern schneller, aber der Footer ist schwerer zu erreichen.

Für die meisten Shops ist der „Mehr laden“-Button eine praktische Standardwahl; automatisches Laden lohnt einen Test in Kategorien, in denen Kunden viele Produkte hintereinander ansehen, etwa Mode oder Deko.

„Mehr laden“-Button vs. automatischer Infinite Scroll: der vollständige Vergleich →

Paginierte Seiten crawlbar halten

Suchmaschinen scrollen nicht und klicken nicht auf Buttons. Wenn Produkte von Seite 2, 3 und 4 erst nach einer JavaScript-Aktion erscheinen, sieht ein Crawler sie möglicherweise nie.

Die Empfehlungen von Google zur Paginierung und zum inkrementellen Laden von Seiten lassen sich in wenigen Regeln zusammenfassen:

• Jede Seite der Kategorie behält ihre eigene URL, zum Beispiel ?page=2.
• Jede Seite verlinkt mit einem normalen Link, dem ein Crawler folgen kann, auf die nächste.
• Das Nachladen weiterer Produkte auf der Seite entfernt diese Links nicht aus dem HTML.

Bei der sicheren Einrichtung bleibt die native Paginierung von PrestaShop in der Seite und wird nur dann visuell ausgeblendet, wenn JavaScript läuft. Besucher sehen den „Mehr laden“-Button, und Crawler finden weiterhin die Links zu jeder Seite.

Paginierung vs. Infinite Scroll in PrestaShop: die SEO-Seite →

Schritt für Schritt: „Mehr laden“ oder Infinite Scroll für Kategorieseiten einrichten

Die folgenden Schritte verwenden Infinite Scroll, unser Modul für PrestaShop 1.7 und 8. Es arbeitet über Hooks, die Theme-Dateien bleiben also unangetastet.

1. Modul hochladen

1. Gehen Sie im Back Office zu Module → Modulmanager.
2. Klicken Sie auf „Modul hochladen“.
3. Ziehen Sie die ZIP-Datei des Moduls in den Upload-Bereich.
4. Wenn die Installation abgeschlossen ist, klicken Sie auf „Konfigurieren“.

2. Lademodus wählen

• Infinite loading type: „Load more button“ (Standard) oder „On scroll“.
• Loader-Stil: eine Textnachricht oder eine von sechs Animationen.
• Texte: die Beschriftung des Buttons, die Meldung „Wird geladen…“ und die Meldung, die erscheint, wenn keine weiteren Produkte vorhanden sind.
• Farben des Buttons, des Loaders und des Textes.

3. Festlegen, wo das Modul aktiv ist

Das Modul funktioniert auf Kategorieseiten und außerdem auf den Seiten für Suche, Marken, Lieferanten, neue Produkte, Bestseller und Preisnachlässe. Ein optionaler Block auf der Startseite lädt Produkte aus einer Kategorie Ihrer Wahl, jeweils einige auf einmal.

4. Selektoren bei individuellen Themes prüfen

Das Modul muss wissen, wo sich die Produkte und die Paginierung in Ihrem Theme befinden. Die Standardwerte passen zum Classic-Theme:

• Produkt-Container: #products .products.row
• Paginierung: .pagination
• Link zur nächsten Seite: .page-list .next
• Einzelnes Produkt: .products.row article

Öffnen Sie bei einem individuellen Theme eine Kategorieseite, klicken Sie mit der rechten Maustaste auf ein Produkt, wählen Sie „Untersuchen“ und übernehmen Sie die Klassennamen Ihres Themes in die Moduleinstellungen. Änderungen am Code sind nicht nötig.

5. Mit Filtern testen

Bei der Facettensuche treten Probleme beim Nachladen von Produkten am häufigsten auf. Testen Sie diese Fälle auf einer Kategorieseite:

• Weitere Produkte laden und dann einen Filter anwenden (Marke, Preis oder ein Attribut).
• Zuerst einen Filter anwenden und dann weitere Produkte laden.
• Die Sortierung ändern und erneut weitere Produkte laden.
• Seite 2 direkt über ihre URL öffnen und prüfen, ob sie weiterhin die richtigen Produkte zeigt.

Das Modul liest die aktiven Filter und die Sortierung aus, sodass die nächsten Produkte zur Auswahl des Kunden passen.

6. Ergebnis auf dem Smartphone prüfen

• Einige Durchgänge laden und prüfen, ob die Bilder erscheinen, ohne dass die Seite springt.
• Mit dem Button „Nach oben“ zu den Filtern zurückkehren.
• Ein Produkt öffnen, zurückgehen und prüfen, ob die Kategorieseite weiterhin funktioniert.

Alle Einstellungen von Infinite Scroll erklärt in der Dokumentation →

Geschwindigkeit und Bilder

Später geladene Produkte sollten die erste Ansicht der Seite nicht verlangsamen. Vom Modul hinzugefügte Bilder nutzen natives Lazy Loading, asynchrone Dekodierung und eine niedrige Abrufpriorität. Themes mit eigenem Lazy Loading über data-src-Attribute werden ebenfalls unterstützt.

Optimierung von PrestaShop-Kategorieseiten: der vollständige Leitfaden →

Häufig gestellte Fragen

Schadet Infinite Scroll der SEO in PrestaShop?

Nicht, wenn jede Seite der Kategorie ihre URL behält und die Paginierungslinks im HTML bleiben. Probleme entstehen, wenn Produkte späterer Seiten nur durch Scrollen oder Klicken erreichbar sind.

Funktioniert es mit der Facettensuche?

Ja. Die nächsten Produkte folgen den aktiven Filtern und der Sortierung, einschließlich Marke, Preis und Attributen.

Welche PrestaShop-Versionen werden unterstützt?

Infinite Scroll funktioniert mit PrestaShop 1.7 und 8.

Kann ich statt des automatischen Ladens einen „Mehr laden“-Button verwenden?

Ja. Der Button ist der Standardmodus. Automatisches Laden beim Scrollen lässt sich mit einem einzigen Schalter in den Einstellungen aktivieren.

Muss ich mein Theme bearbeiten?

Nein. Das Classic-Theme funktioniert mit den Standardeinstellungen. Bei individuellen Themes müssen eventuell die CSS-Selektoren in den Moduleinstellungen eingetragen werden.