Nested Collection Lists – Webflows Limitierung überwinden

Webflows Limitierungen

Die Funktion für verschachtelte Collections (sog. Nested Collections), die standardmässig im Webflow Designer verfügbar ist, ist ein mächtiges Werkzeug. Du kannst auf jeder statischen Seite eine Collection in einer Collection platzieren (z.B. Tags oder Kategorien auf der Hauptseite des Blogs anzeigen).

Webflow hat diese Funktion allerdings mit zwei drastischen Limitierungen versehen:

• Verschachtelte Collection-Items sind auf maximal 5 Einträge begrenzt.
• Maximal eine verschachtelte Collection List pro Seite.

Webflow sagt:

… wir haben diese Limitierungen hinzugefügt, um die optimale Performance deiner Site sicherzustellen, sammeln aber aktuell Feedback und prüfen die besten nächsten Verbesserungen für verschachtelte Collections.

Webflow Blog, Nested collection lists are here, 21. April 2020

finsweet CMS Nest – interessante Lösung, eingebettet ins Finsweet-Ökosystem.

Das finsweet-Team (ich liebe sie für ihre grossartige Arbeit!) bietet eine flexiblere Lösung für verschachtelte Collections. Mit dieser Lösung kannst du mehr als eine verschachtelte Collection auf einer Seite und mehr als 5 Einträge innerhalb der verschachtelten Collection einbinden.

Der grosse Vorteil dieser Lösung ist, dass sie sich perfekt ins Finsweet-Ökosystem integriert und sich mit anderen von Finsweet entwickelten Attribute-Lösungen kombinieren lässt. Finsweet bietet zudem eine sehr gute Dokumentation. Der einzige kleine Nachteil: Du musst am Ende jeder Seite, auf der die verschachtelte Collection verfügbar sein soll, eine zweite (versteckte) Collection List hinzufügen. Diese zusätzliche Collection enthält deine Referenz-Einträge und macht deine Seite strukturell komplexer. Das HTML der jeweiligen Seite enthält versteckte Collections, die im Frontend eigentlich nicht nötig wären und nur deshalb existieren, weil Webflow die benötigte Funktionalität nicht direkt im Backend bereitstellt. Dadurch wird die eigentlich im Backend benötigte Funktionalität sozusagen über das Frontend nachgebildet.

Je nach Projektanforderungen empfiehlt es sich, sowohl diese Lösung als auch die folgende jQuery-Lösung zu testen, um herauszufinden, welche am besten passt.

Die jQuery-.load()-Funktion – leichtgewichtig und ohne Admin-Hürden

Ein einfacher und leichtgewichtiger Weg, unbegrenzt viele Collections mit unbegrenzt vielen Collection-Items auf jeder einzelnen und dynamischen Seite zu verschachteln, ist ein (einfaches) jQuery-Code-Snippet. Im Grunde holt das jQuery ein Multi-Reference-Element (also dessen HTML-Struktur) von einer beliebigen Seite und zieht dieses Element in ein HTML-Embed, das wie eine verschachtelte Collection funktioniert.

Du kannst deine verschachtelten Collections aufbauen und gestalten, wo immer du willst, und sie überall einsetzen! Im Gegensatz zur Lösung von finsweet sind keine zweiten Plain-Text-Felder mit kommagetrennten Listen und keine versteckten Collections nötig.

Zusammengefasst basiert diese Lösung ausschliesslich auf der leichtgewichtigen jQuery-.load()-Funktion – einer einfachen Möglichkeit, Daten von einem Server zu holen und das zurückgegebene HTML in ein passendes Element einzufügen. Sie überzeugt durch ihre Einfachheit und eine saubere HTML-Struktur ohne zusätzliche versteckte Collections.

Demo und klonbar

Die Funktionsweise der jQuery-.load()-Funktion für verschachtelte Collection Lists habe ich in einem Demo-Projekt beschrieben.

In diesem Projekt erkläre ich, wie du mehrere verschachtelte Collections in eine statische Seite einbindest, ohne die Performance der Seite zu beeinträchtigen.

Ausserdem findest du eine klonbare Version dieses Projekts im Webflow Showcase.