Verschachtelte Sammellisten - Webflows Beschränkung aufheben
Technologie & Development
|

20. November 2022

Verschachtelte Sammellisten - Webflows Beschränkung aufheben

Erfahre, wie du mehrere verschachtelte Sammlungslisten mit unbegrenzten Einträgen auf einer einzigen statischen Seite in deinem Webflow-Projekt hinzufügen kannst.

Die Grenzen von Webflow

Die Funktion der verschachtelten Sammlungen, die standardmäßig im Webflow Designer verfügbar ist, ist ein mächtiges Werkzeug. Du kannst auf jeder statischen Seite eine Sammlung innerhalb einer Sammlung platzieren (z. B. Tags oder Kategorien auf der Hauptseite des Blogs anzeigen).

Webflow hat diese Funktion jedoch mit zwei drastischen Einschränkungen versehen:

  • Verschachtelte Sammelobjekte sind auf maximal 5 Objekte begrenzt.
  • Maximal eine verschachtelte Sammlungsliste pro Seite.

Webflow sagt:

Wir haben diese Einschränkungen hinzugefügt, um eine optimale Leistung deiner Website zu gewährleisten, aber wir sammeln gerade Feedback und überlegen, wie wir die Verschachtelung von Sammlungen am besten verbessern können.

Webflow Blog, Verschachtelte Sammlungslisten sind da, April 21, 2020

finsweet CMS Nest - interessante Lösung, die in das Finsweet-Ökosystem eingebettet ist.

Das finsweet-Team (ich liebe sie wirklich für ihre großartige Arbeit!) bietet eine flexiblere Lösung für verschachtelte Sammlungen. Mit dieser Lösung kannst du mehr als eine verschachtelte Sammlung auf einer Seite hinzufügen und mehr als 5 Elemente innerhalb der verschachtelten Sammlung.

Der große Vorteil dieser Lösung ist, dass sie sich perfekt in das Finsweet-Ökosystem integriert und mit anderen von Finsweet entwickelten Attributlösungen kombiniert werden kann. Finsweet stellt außerdem eine sehr gute Dokumentation zur Verfügung. Der einzige kleine Nachteil dieser Lösung ist, dass du am Ende jeder Seite, auf der die verschachtelte Sammlung verfügbar sein soll, eine zweite (versteckte) Sammlungsliste hinzufügen musst. Diese zusätzliche Sammlung enthält deine Verweise und macht deine Seite strukturell komplexer. Der HTML-Code der jeweiligen Seite enthält versteckte Sammlungen, die im Frontend nicht nötig wären und nur vorhanden sind, weil Webflow die benötigte Funktionalität nicht direkt im Backend bereitstellt. Dadurch wird die Funktionalität, die eigentlich im Backend benötigt wird, sozusagen über das Frontend vorgetäuscht.

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

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

Eine einfache und leichtgewichtige Methode, um unbegrenzte Sammlungen mit unbegrenzten Sammlungselementen auf einer einzigen dynamischen Seite zu verschachteln, ist die Verwendung eines (einfachen) jQuery-Code-Snippets. Im Grunde holt jQuery ein Multi-Referenz-Element (d.h. seine HTML-Struktur) von einer beliebigen Seite und zieht dieses Element in eine HTML-Einbettung, die wie eine verschachtelte Sammlung funktioniert.

Du kannst deine verschachtelten Sammlungen einrichten und gestalten, wo immer du willst, und sie verwenden, wo immer du willst! Im Gegensatz zur Lösung von finsweet sind keine zweiten Textfelder mit kommagetrennten Listen und keine versteckten Sammlungen notwendig.

Zusammenfassend lässt sich sagen, dass diese Lösung ausschließlich auf der leichtgewichtigen jQuery .load() -Funktion basiert - eine einfache Möglichkeit, Daten von einem Server zu holen und das zurückgegebene HTML in einem passenden Element zu platzieren. Sie überzeugt durch ihre Einfachheit und eine saubere HTML-Struktur ohne zusätzliche versteckte Sammlungen.

Demo und klonbar

Ich habe die Funktionalität der jQuery .load()-Funktion für verschachtelte Sammlungslisten in einem Demoprojekt beschrieben.

In diesem Projekt erkläre ich, wie man mehrere verschachtelte Sammlungen in eine statische Seite einbindet, ohne die Leistung der Seite zu beeinträchtigen.

Außerdem findest du eine klonbare Version dieses Projekts im Webflow Showcase.

Hier klicken und unseren Newsletter abonnieren!
Hier klicken und unseren Newsletter abonnieren!
Hier klicken und unseren Newsletter abonnieren!
Hier klicken und unseren Newsletter abonnieren!
Hier klicken und unseren Newsletter abonnieren!
Hier klicken und unseren Newsletter abonnieren!