Ein Besucher durchstöbert eine Kategorie, scrollt bis zum vierzigsten Produkt, öffnet eine Produktseite, geht zurück und landet oben auf Seite 1. Er muss alles wiederholen. Das ist eine der am häufigsten gemeldeten Reibungen in großen Katalogen, und zugleich eine der günstigsten zu beheben.
Warum der Rücksprung nicht funktioniert
Drei verschiedene Ursachen, mit unterschiedlichen Lösungen.
Die Seite wird vom Server neu geladen. Beim Zurückgehen kann der Browser die Seite aus seinem Zwischenspeicher ausliefern oder sie erneut anfordern. Im zweiten Fall geht der gesamte sichtbare Zustand verloren, einschließlich der Scrollposition.
Der Inhalt wird nach dem ersten Rendern geladen. Bei einer Kategorie mit unendlichem Scrollen oder asynchronen Filtern kehrt die Seite in ihren Ausgangszustand zurück: Die durch Scrollen geladenen Produkte existieren beim Rücksprung nicht mehr.
Der Navigationszustand steht nicht in der Adresse. Wenn Paginierung, Filter und Sortierung sich nicht in der Adresse abbilden, hat der Browser keine Möglichkeit, sie wiederherzustellen.
Diese letzte Ursache ist die strukturbildende: ohne Zustand in der Adresse ist keine verlässliche Wiederherstellung möglich.
Was gemerkt werden muss
Vier Elemente, von denen nur zwei offensichtlich sind.
Die Scrollposition. Die sichtbarste und paradoxerweise die unwichtigste: Werden die richtigen Produkte angezeigt, findet ein Besucher seinen Anhaltspunkt schnell wieder.
Die aktuelle Seite oder die Zahl der geladenen Blöcke. Das ist der entscheidende Punkt. Ein Besucher, der beim sechzigsten Produkt angekommen war, muss diese sechzig Produkte wiederfinden, nicht die ersten zwanzig.
Die aktiven Filter und die Sortierung. Sie gehören in die Adresse, was das Problem unabhängig von jedem Speichermechanismus löst.
Das aufgerufene Produkt. Die Position wiederherzustellen ist gut; den Besucher genau auf die Kachel des gerade gesehenen Produkts zurückzubringen, mit einer leichten Hervorhebung, ist deutlich besser. Er nimmt seinen Faden sofort wieder auf.
Endless Scroll PrestaShop — SEO-Paginierung & PositionswiederherstellungUnendliches Scrollen auf Kategorieseiten mit SEO-schonender Paginierung und exakter Positionswiederherstellung nach dem Besuch einer Produktseite.69,00€
Die beiden technischen Ansätze
Der Zustand in der Adresse. Jede Änderung von Filter, Sortierung oder Seite aktualisiert die Adresse ohne Neuladen. Der Rücksprung stellt den Zustand von selbst wieder her, weil die Adresse ihn beschreibt.
Das ist der robustere Ansatz: Er funktioniert auch beim Teilen eines Links, beim Öffnen in einem neuen Tab und für die Indexierung. Er verlangt allerdings eine saubere Handhabung des Navigationsverlaufs, mit der Unterscheidung zwischen Änderungen, die einen Verlaufseintrag erzeugen, und solchen, die den aktuellen Eintrag ersetzen.
Die nützliche Regel: Eine Filteränderung erzeugt einen Eintrag, einfaches Scrollen ersetzt den aktuellen Eintrag. Ohne diese Unterscheidung zwingt die Zurück-Schaltfläche den Besucher durch zehn Zwischenzustände, bevor er die Kategorie verlassen kann.
Der Sitzungsspeicher. Der Zustand wird beim Verlassen der Seite auf Browserseite gespeichert und beim Rücksprung wiederhergestellt. Einfacher umzusetzen und begrenzt: Bei einem geteilten Link oder einem neuen Tab funktioniert er nicht.
Die Kombination, die trägt: Die Adresse führt Filter, Sortierung und Paginierung, der Sitzungsspeicher führt die Scrollposition und die Kennung des zuletzt aufgerufenen Produkts.
Der Fall des neuen Tabs
Ein sehr verbreitetes und selten behandeltes Verhalten: Der Besucher öffnet die Produktseiten in neuen Tabs, hält fünf davon offen und kehrt zum Tab der Kategorie zurück.
Gute Nachricht: In diesem Fall wurde der Kategorie-Tab nicht neu geladen, und sein Zustand ist unversehrt. Es braucht keinen Mechanismus.
Zwei Punkte trotzdem im Auge behalten. Wenn Ihre Seite ihren Inhalt beim Zurückkehren des Fokus automatisch neu lädt, etwa um Bestände zu aktualisieren, zerstören Sie diesen Zustand. Und die Hervorhebung des zuletzt aufgerufenen Produkts funktioniert in diesem Szenario nicht, da mehrere Produkte geöffnet wurden.
Die gute Praxis besteht darin, alle bereits aufgerufenen Produkte im Raster sichtbar zu markieren, nicht nur das letzte. Das hilft in beiden Szenarien und erleichtert dem Besucher die Orientierung in einer langen Liste.
Unendliches Scrollen oder Paginierung
Die Rückkehr zur Position ist beim unendlichen Scrollen schwieriger, und das wiegt bei der Abwägung zwischen beiden.
Bei klassischer Paginierung enthält die Adresse die Seitenzahl, der Rücksprung funktioniert von selbst, und die Indexierung ist einfach. Der Nachteil ist der zusätzliche Klick auf jeder Seite.
Beim unendlichen Scrollen ist das Durchstöbern flüssiger, es treten aber drei Probleme auf: die Rückkehr zur Position, der Zugang zur nun unerreichbaren Fußzeile und die Indexierung der dynamisch geladenen Produkte.
Die Zwischenlösung behebt die meisten dieser Punkte: ein Scrollen, das automatisch zwei oder drei Blöcke lädt, dann eine ausdrückliche Schaltfläche „mehr anzeigen“, mit Aktualisierung der Adresse bei jedem Block. Sie behalten die Flüssigkeit zu Beginn des Durchstöberns, die Adresse bleibt teilbar, und die Fußzeile wird wieder erreichbar.
Was die Wiederherstellung zerstört
Vier Situationen, die nach der Umsetzung zu prüfen sind.
Der Servercache. Eine zwischengespeicherte Seite kann in einem anderen als dem erwarteten Zustand ausgeliefert werden. Prüfen Sie das Verhalten unter realen Bedingungen, nicht nur in der Entwicklungsumgebung.
Die Bestandsänderung. Wird ein Produkt zwischen Verlassen und Rückkehr nicht mehr verfügbar, ändert sich das Raster, und die gespeicherte Position passt nicht mehr. Stellen Sie über die Produktkennung wieder her, nicht über eine Position in Pixeln.
Die responsive Darstellung. Eine am Rechner berechnete Pixelposition ergibt keinen Sinn, wenn der Besucher zwischenzeitlich sein Telefon gedreht hat. Ein weiterer Grund, in Produkten statt in Abständen zu denken.
Blöcke mit veränderlicher Höhe. Ein Werbebanner oder ein spät geladener Block verschiebt das Raster. Warten Sie das Laden der Elemente oberhalb des Rasters ab, bevor Sie wiederherstellen.
Messen
Zwei Kennzahlen genügen, und die zweite ist die entscheidende.
Die Zahl der pro Sitzung gesehenen Produkte in den betroffenen Kategorien. Ein Besucher, der seine Position nicht mehr verliert, sieht sich zwangsläufig mehr an.
Die Rückkehrrate zur Kategorie von den Produktseiten aus. Steigt sie nach der Umsetzung, funktioniert Ihr Vergleichsweg. Bleibt sie niedrig, liegt das Problem woanders, vermutlich in der Produktseite selbst.
Das Modul Unendliches Scrollen für PrestaShop behandelt dieses Verhalten in PrestaShop 8 und 9: schrittweises Laden mit Aktualisierung der Adresse bei jedem Block, Wiederherstellung von Seite und Position bei der Rückkehr von einer Produktseite, Kennzeichnung bereits aufgerufener Produkte und eine ausdrückliche Schaltfläche nach den ersten Blöcken, damit die Fußzeile erreichbar bleibt.
