Webflow-Paginierung: Nahtlos blättern in CMS-Listen, ohne Sprung

NOCHMAL AKTUALISIERT (18.02.2022): Die unten beschriebene Methode funktioniert nach wie vor einwandfrei, du kannst aber auch die Finsweet-Attribute-Methode verwenden. Sehr einfach: eine einzige Codezeile im Head der Seite oder des Projekts, und dann musst du nur noch ein paar Attribute zu den Elementen hinzufügen, die du paginieren möchtest. Wir mögen diese Variante, weil sie einfach und schnell ist (was die Ladezeiten der Paginierung angeht). Als kleines Webflow-Studio haben uns die Webflow-Profis von Finsweet damit ein echtes Geschenk gemacht. Die Anleitung findest du in den List-Load-Docs von Finsweet. Füge zuerst die erforderlichen Attribute hinzu, wir empfehlen außerdem die Speed-Boost-Option (sie steckt heute im Pagination-Element als Show Page Count), und scrolle dann nach unten zur Pagination-Option und füge diese Attribute hinzu. Für eine schnelle Umsetzung ist die folgende Methode wahrscheinlich flotter, aber das überlassen wir dir.

AKTUALISIERT FÜR DIE PAGINIERUNG MEHRERER COLLECTION-LISTEN: Das hier ist super schnell und einfach, also geben wir deiner Webflow-Collection eine nahtlose Paginierung.

Falls du nicht weißt, was nahtlose Paginierung ist: Wenn du heute Collection-Listen in Webflow verwendest, lädt die Seite beim Klick auf "Weiter" neu und der Besucher landet ganz oben auf der Seite. Das ist nicht schön, wenn deine Blogbeitrags-Collection oder was auch immer mitten auf der Seite sitzt. Mit diesem Hack springt der Besucher beim Wechsel zur nächsten "Seite" nicht nach oben, sondern bleibt genau dort, wo er war. Praktisch, oder? Und ziemlich einfach.

Schritt 1: Ein bisschen Code zu deiner Seite hinzufügen

Öffne die Seiteneinstellungen, scrolle zu Custom Code und füge den folgenden Code in den Bereich Before the </body> tag ein:

Embed-Code für nahtlose Paginierung

Wenn du deinen Custom Code etwas aufgeräumter halten möchtest, füge einfach unser Script-Tag ein:

<script async src="https://cdn.jsdelivr.net/gh/J8kesVanEeden/milk-moon-studio_webflow-projects@main/seemless-pagination.js"></script>

Falls die Embeds oben bei dir nicht laden, findest du den Code in unseren CodePen-Pens: die Version für eine einzelne Collection-Liste, die Script-Tag-Version und die Version für mehrere Collection-Listen.

Wenn du den Code inline eingefügt hast, klicke jetzt im Designer auf die Collection-Liste, wechsle rechts in das Panel Collection List Settings und trage "seamless-replace" als ID ein. Wenn du das Script-Tag verwendet hast, überspringe das und nimm stattdessen die nummerierten IDs aus dem nächsten Absatz.

Wenn du dich für das Script-Tag entschieden hast, beachte eines: Es sucht nur nach nummerierten IDs. Gib der Collection-Liste also statt "seamless-replace" die ID seamless-replace1 und dem Pagination-Element in ihrem Collection List Wrapper die ID w-pagination-wrapper1. Es verarbeitet bis zu drei Collection-Listen pro Seite (seamless-replace2 und w-pagination-wrapper2 für die zweite, seamless-replace3 und w-pagination-wrapper3 für die dritte), bei mehr als drei muss das Script erweitert werden.

Veröffentliche die Seite, und schon hast du eine nahtlose Paginierung.

Wrapper-ID

Wenn du Fragen hast, schreib sie uns in die Kommentare, und schau dir auch den How-To-Bereich unseres Blogs für weitere Tutorials an.

UPDATE

Wir haben einige Fragen dazu bekommen, was zu tun ist, wenn mehr als eine Collection-Liste paginiert werden soll. Hier ist deshalb etwas Code, der zeigt, wie es geht, wenn du zum Beispiel 3 Collection-Listen hast, die paginiert werden sollen und in verschiedenen Sections derselben Seite liegen.

Der Code:

Die IDs

Trage jetzt die IDs in der Reihenfolge ihres Auftretens für die Container der Collection-Listen ein: seamless-replace1, seamless-replace2, seamless-replace3
Trage dann in der Reihenfolge ihres Auftretens die Pagination-IDs innerhalb des Collection List Wrapper ein: w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3

Und fertig. Veröffentliche, und du kannst mehrere Collection-Listen auf derselben Seite paginieren.

Fragen zur Webflow-Paginierung

Warum springt die Webflow-Paginierung zurück an den Seitenanfang?

Weil die native Paginierung von Webflow die nächste Seite als vollständigen Seiten-Reload lädt, sodass der Browser wieder ganz oben beginnt. Wenn deine Collection-Liste mitten auf der Seite sitzt, ist das ein miserables Erlebnis. Das Script für nahtlose Paginierung oben holt die nächste Seite im Hintergrund und tauscht nur die Collection-Liste aus, sodass der Besucher genau dort bleibt, wo er war.

Kann ich mehr als eine Collection-Liste auf derselben Seite paginieren?

Ja. Verwende den Code für mehrere Collection-Listen im Abschnitt UPDATE, gib jeder Liste ihre eigene ID (seamless-replace1, seamless-replace2, seamless-replace3) und jedem Pagination-Wrapper die passende ID (w-pagination-wrapper1, w-pagination-wrapper2, w-pagination-wrapper3).

Gibt es noch eine andere Möglichkeit, eine Webflow-Collection-Liste ohne Seiten-Reload zu paginieren?

Ja, das Finsweet-List-Load-Attribut. Der Pagination-Modus zeigt die Inhalte auf derselben Seite an, und du kannst einen Scroll-Anker hinzufügen, damit der Besucher am Anfang der Liste landet. Die Einrichtung ist am Anfang dieses Beitrags beschrieben.

Warum funktioniert meine nahtlose Paginierung nicht?

Prüfe, ob die IDs exakt so geschrieben sind wie oben (bei der Script-Tag-Version heißt das: die nummerierten IDs, seamless-replace1 und w-pagination-wrapper1, und bei drei Listen ist Schluss), ob das Script im Bereich Before </body> tag der Seite steht und ob du die Site veröffentlicht hast, denn Custom Code läuft im Designer nicht. Wenn du Webflow-Interaktionen auf der Liste verwendest, müssen sie nach jedem Seitenwechsel eventuell neu initialisiert werden. Nach unserer Erfahrung hat das gehostete Script dafür weiter unten eine auskommentierte Zeile. Wenn du den Code inline eingefügt hast, such sie also und kommentiere sie wieder ein. Die Script-Tag-Version ist eine gehostete Datei, die du nicht bearbeiten kannst. Um diese Zeile zu aktivieren, müsstest du den Code stattdessen inline kopieren.

Wenn du solche CMS-Tricks magst: Wir haben auch darüber geschrieben, wie du Text-Spans in dynamischem CMS-Text hinzufügst, wie du das CMS-Grid mit einem Flexbox-Muster sprengst, wie du eine Blog-Zusammenfassung ohne Summary-Feld erstellst und wie du ein CMS-gesteuertes Ticker-Tape baust.