Verschachtelte Sammlungslisten – Webflows Grenzen überwinden
Technologie & Entwicklung
|

20. November 2022

Verschachtelte Sammlungslisten – Webflows Grenzen überwinden

Lerne, wie du mehrere verschachtelte Sammlungslisten mit unbegrenzt vielen Elementen auf einer einzigen statischen Seite in deinem Webflow-Projekt hinzufügen kannst

Webflows Grenzen

Die Funktion für verschachtelte Sammlungen, die standardmässig im Webflow Designer verfügbar ist, ist ein starkes Werkzeug. Du kannst auf jeder statischen Seite eine Sammlung in eine Sammlung einfügen (z. B. Tags oder Kategorien auf der Hauptseite des Blogs anzeigen).

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

  • Verschachtelte Sammlungselemente sind auf maximal 5 Elemente beschränkt.
  • Maximal eine verschachtelte Sammlungsliste pro Seite.

Webflow sagt:

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

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

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

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

Der Hauptvorteil 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 bietet auch eine sehr gute Dokumentation. 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 Referenzelemente und macht deine Seite strukturell komplexer. Der HTML-Code der jeweiligen Seite enthält versteckte Sammlungen, die im Frontend nicht notwendig wären und nur vorhanden sind, 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 simuliert.

Abhängig von den Projektanforderungen empfiehlt es sich, diese Lösung sowie 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 leichte Möglichkeit, unbegrenzt viele Sammlungen mit unbegrenzt vielen Sammlungselementen auf einer einzelnen und dynamischen Seite zu verschachteln, ist die Verwendung eines (einfachen) jQuery-Code-Schnipsels. Im Grunde ruft das jQuery ein Multi-Referenz-Element (d. h. seine HTML-Struktur) von einer beliebigen Seite ab und zieht dieses Element in ein HTML-Einbettungselement, das wie eine verschachtelte Sammlung funktioniert.

Du kannst deine verschachtelten Sammlungen überall einrichten und stylen und sie überall verwenden! Im Gegensatz zu der von finsweet bereitgestellten Lösung sind keine zweiten Klartextfelder mit kommaseparierten Listen und keine versteckten Sammlungen notwendig.

Zusammenfassend lässt sich sagen, dass diese Lösung ausschliesslich auf der leichtgewichtigen jQuery .load()-Funktion basiert – eine einfache Möglichkeit, Daten von einem Server abzurufen und den zurückgegebenen HTML-Code in ein passendes Element einzufügen. Sie überzeugt durch ihre Einfachheit und eine saubere HTML-Struktur ohne zusätzliche versteckte Sammlungen.

Demo und zum Klonen

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

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

Ausserdem findest du im Webflow Showcase eine Version dieses Projekts zum Klonen.

Klick hier und abonniere unseren Newsletter!
Klick hier und abonniere unseren Newsletter!
Klick hier und abonniere unseren Newsletter!
Klick hier und abonniere unseren Newsletter!
Klick hier und abonniere unseren Newsletter!
Klick hier und abonniere unseren Newsletter!