Endless Scroll PrestaShop — Installations- und Konfigurationsanleitung
Endless Scroll installieren und konfigurieren: Lademodi, SEO-schonende Paginierung, exakte Positionswiederherstellung und angepasste Themes.
Installation
Endless Scroll PrestaShop wird wie jedes andere PrestaShop-Modul installiert, ohne Abhängigkeit oder Drittanbieter-Bibliothek.
- Öffnen Sie im Back-Office Module > Modul-Manager und klicken Sie auf Modul hochladen.
- Wählen Sie die bereitgestellte Datei
dfinfinitescroll-1.0.0.zipund starten Sie die Installation. - Klicken Sie nach der Installation auf Konfigurieren, um zu den Einstellungen zu gelangen.
Das Modul fügt keine Datenbanktabelle hinzu und setzt keinen Override. Die Deinstallation hinterlässt keine Spuren.
Die drei Lademodi
Das Ladeverhalten wird in der Einstellung Lademodus gewählt.
Hybrid (empfohlen)
Die ersten Seiten laden beim Scrollen automatisch, dann übernimmt eine Schaltfläche „Mehr Produkte laden“, sobald die Schwelle erreicht ist. Das ist der beste Kompromiss: Das Erlebnis bleibt oben in der Liste flüssig, doch der Besucher behält die Kontrolle und die Fußzeile wird wieder erreichbar.
Rein unendlich
Alle folgenden Seiten laden automatisch, sobald sich das Ende der Liste nähert, ohne Schaltfläche. Am besten für Kataloge geeignet, bei denen der Zugang zur Fußzeile nicht entscheidend ist.
Nur Schaltfläche
Kein automatisches Laden: Der Besucher klickt für jede Seite auf „Mehr laden“. Nützlich, um die Anzahl der Anfragen zu begrenzen oder eine sehr explizite Paginierung beizubehalten.
Verfügbare Einstellungen
- Lademodus — hybrid, rein unendlich oder nur Schaltfläche.
- Automatisch geladene Seiten (hybrid) — Anzahl der geladenen Seiten, bevor die Schaltfläche erscheint. Standard: 3.
- URL und Canonical synchronisieren — aktualisiert die Adressleiste, das Canonical-Tag und die rel prev/next-Links beim Scrollen.
- Exakte Position wiederherstellen — fügt die bereits gesehenen Seiten wieder ein und richtet die Ansicht bei der Rückkehr von einer Produktseite auf das besuchte Produkt aus.
- Auf allen Listenseiten aktivieren — Kategorien, Hersteller, Lieferanten, Suche, Bestseller, Neuheiten, Preissenkungen. Deaktiviert gilt das Modul nur für Kategorien.
- Schaltflächen-Beschriftung — mehrsprachiger Text der Schaltfläche „Mehr laden“.
- Selektor der Produktliste (erweitert) und Selektor der Paginierung (erweitert) — siehe Abschnitt zu angepassten Themes.
Die Paginierung bleibt SEO-freundlich
Anders als Module, die die Paginierung durch einen unsichtbaren AJAX-Aufruf ersetzen, stützt sich Endless Scroll PrestaShop auf die nativen paginierten URLs Ihres Themes. Konkret:
- Ohne JavaScript (Bots inbegriffen) zeigt der Shop genau Ihre übliche serverseitige Paginierung, vollständig crawlbar.
- Mit JavaScript werden das Canonical-Tag und die rel prev/next-Links aktualisiert, um die tatsächlich angezeigte Seite widerzuspiegeln, in beide Scroll-Richtungen.
Lassen Sie die Option „URL und Canonical synchronisieren“ aktiviert: Sie sorgt dafür, dass die von einem Besucher, der bis Seite 4 gescrollt hat, geteilte URL tatsächlich auf diese Seite verweist.
Die exakte Positionswiederherstellung
Das ist das Herzstück des Moduls. Klickt ein Besucher nach dem Scrollen auf ein Produkt, speichert das Modul im Session Storage: die geladenen Seiten, die exakte URL jeder einzelnen, die Scroll-Position und die ID des angeklickten Produkts. Es cacht außerdem den Inhalt der Seiten, mit einer Größenbegrenzung.
Bei der Rückkehr (Zurück-Schaltfläche des Browsers oder interne Navigation von der Produktseite) tut das Modul Folgendes:
- Es fügt die Seiten sofort aus dem Cache wieder ein oder lädt sie parallel erneut, falls der Cache zu groß war;
- es richtet die Ansicht präzise auf das besuchte Produkt aus, über dessen ID, mit Rückfall auf die Scroll-Position.
Der Wiederherstellungszustand läuft nach 30 Minuten ab und wird bei einem direkten Aufruf einer URL im Stil von Seite 3 nie angewendet: In diesem Fall verhält sich die Seite normal.
Angepasste Themes: erweiterte Selektoren
Standardmäßig zielt das Modul auf die Selektoren des Classic-Themes: #js-product-list .products für die Produktliste und .pagination für den Paginierungsblock. Wenn Ihr Theme eine andere Struktur verwendet, füllen Sie die beiden erweiterten Felder aus:
- Selektor der Produktliste — der direkte Container der Produktkarten.
- Selektor der Paginierung — der Block mit dem „Weiter“-Link (rel next oder next-Klasse).
Keine Codeänderung nötig. Das Modul hängt die Verhaltensweisen der eingefügten Produkte über Anwendungsereignisse wieder an, sodass Ihr Theme oder andere Module ihre Widgets an den neuen Karten neu verdrahten können.
Kompatibilität mit der Facettensuche
Das Modul ist mit dem Facettensuche-Modul kompatibel. Es lauscht auf das bei jeder Filteränderung ausgelöste Ereignis zur Aktualisierung der Produktliste, initialisiert sich sauber neu und startet erneut von den gefilterten paginierten URLs. Keine zusätzliche Einstellung erforderlich.
Fehlerbehebung
Das unendliche Scrollen wird nicht ausgelöst
Prüfen Sie, ob die erweiterten Selektoren zu Ihrem Theme passen und ob auf der Listenseite eine native Paginierung (mit einem „Weiter“-Link) vorhanden ist.
Die Rückkehr richtet sich nicht auf das richtige Produkt aus
Stellen Sie sicher, dass die Produktkarten Ihres Themes das Produkt-ID-Attribut bereitstellen. Bei einem stark angepassten Theme, das es nicht bereitstellt, fällt das Modul auf die Scroll-Position zurück.
Bei Netzwerkfehler
Das Modul fällt automatisch auf die nativen Paginierungslinks zurück: Die Navigation bleibt immer möglich.