CMS List Nest
Verschachtle mehr als 10 Items und beliebig viele Collections auf einer Seite: der Multi-Reference-Workaround für Webflow.
CMS List Nest klont Items aus einer meist versteckten Quell-Liste in Slots deines Ziel-Items. Beliebig viele, beliebig tief. Komplett über fpu-nest-Attribute.
- Quell-ListeVersteckt auf der Seite, liefert die Items.
- SlotDiv-Block im Ziel-Item, nimmt die Kopien auf.
- ReihenfolgeSlug-Reihenfolge in refs bestimmt die Ausgabe.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · CMS List Nest -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/list-nest.js"></script>Attribute auf der Ziel-Seite setzen
Auf der Seite, auf der die verschachtelte Liste erscheinen soll, definierst du den Slot, der die Kopien aufnimmt.
Ziel-SlotDer Div-Block im Ziel-Item, der die verschachtelten Items aufnimmt.
Wähle einen Div-Block im Ziel-Item und gib ihm diese Attribute. target markiert den Slot, refs nennt die zu verschachtelnden Slugs (komma-getrennt, Reihenfolge = Render-Reihenfolge) und collection die Quell-Collection. collection ist optional, wenn nur eine Quelle auf der Seite existiert.
Binde fpu-nest-refs an ein CMS-Feld (Plain-Text mit den Multi-Reference-Slugs), damit jedes Item seine eigenen Referenzen mitbringt.
Empty-StateBleibt stehen, wenn es keine Treffer gibt, sonst wird es entfernt.
Lege ein Element in den Ziel-Slot, das angezeigt wird, wenn keine referenzierten Items gefunden werden. Bei Treffern entfernt das Script es automatisch.
Attribute an der Quell-Liste setzen
Lege irgendwo auf derselben Seite die Quell-Liste an, meist versteckt. Ihre Items werden geklont und in die Slots eingefügt.
Quell-ListeDie Collection List, aus der Items geklont werden.
Wähle die Collection List der Quell-Collection und gib ihr diese Attribute. Nach der Verarbeitung wird die Liste automatisch versteckt (display:none).
Der collection-Wert an Quell-Liste und Ziel-Slot muss exakt übereinstimmen, sonst findet das Script die Quelle nicht.
Quell-ItemJedes Item der Quell-Liste trägt seinen Slug.
Gib dem Collection Item den Slug, über den es in fpu-nest-refs referenziert wird, per CMS-Feld an das Slug-Feld binden.
Veröffentlichen und auf der Live-Seite prüfen
Attributes-Lösungen laufen nicht im Designer-, Edit- oder Vorschau-Modus. Veröffentliche dein Projekt und teste das Ergebnis auf der publizierten Seite, nach jeder Änderung neu.
OptionalWeitere Einstellungen
LimitMaximale Anzahl eingefügter Items pro Slot.
Setze dieses Attribut zusätzlich am Ziel-Slot, um die Zahl der eingefügten Items zu begrenzen.
Quelle sichtbar lassenVerhindert das automatische Ausblenden der Quell-Liste.
Standardmäßig wird die Quell-Liste nach der Verarbeitung versteckt. Mit diesem Attribut bleibt sie sichtbar, was beim Aufbauen hilft.
LoggingSchreibt eine Init-Zeile in die Konsole.
Gibt beim Initialisieren eine Zeile in der Browser-Konsole aus, was beim Debuggen hilft.
Globale DefaultsSetzt Defaults für alle Slots per Script.
Definiere in einem <script> nach der Einbindung globale Defaults. Ein Attribut am Element gewinnt immer gegen den globalen Wert. Beispiel: window.fpuListNestConfig = { limit: 6, logging: false, hideSource: true }
Zusätzliche Features
- Programmatische API
- Über window.fpuListNest stehen instances, init(), refresh() und destroyAll() bereit, z. B. um nach eigenem CMS-Nachladen neu zu verschachteln.
- Events
- Pro befüllter Ziel-Liste wird fpu:items-changed ausgelöst (detail: { solution: 'nest', list }). Umgekehrt reagiert List Nest re-render-tolerant auf Events anderer Lösungen (Load More, Filter) und befüllt neue Slots automatisch nach.
- Mehrstufiges Nesting
- Quell-Items dürfen selbst Slots enthalten; Verschachtelung wird bis Tiefe 5 aufgelöst (schützt zugleich vor zirkulären Referenzen).
- Hinweis: Interactions & IDs
- Quell-Items werden geklont (cloneNode), da mehrere Ziele dieselbe Quelle nutzen können. Webflow-Interactions (IX2) überleben das Klonen nicht; id-Attribute wandern mit, sodass bei id-basierten Ankern in Quell-Items Duplikate entstehen können.