Programmatische API
Über window.fpuListNest stehen instances, init(), refresh() und destroyAll() bereit, z. B. um nach eigenem CMS-Nachladen neu zu verschachteln.
CMS List Nest
data-fpu-nest
Verschachtle mehr als 10 Items und beliebig viele Collections auf einer Seite: der Multi-Reference-Workaround für Webflow.
Das Prinzip · Warum List Nest
2 × 10Webflow-Limit∞Mit List Nest
CMS List Nest klont Items aus einer meist versteckten Quell-Liste in Slots deines Ziel-Items. Beliebig viele, beliebig tief. Komplett über data-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.
PlatzhalterTutorial-Video
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 → Footer Code. Das Skript lädt verzögert und startet nur, wenn es auf der Seite ein data-fpu-Attribut findet.
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.
Tipp
Binde data-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).
Wichtig
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 data-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.
OptionalBrauchst du nur, wenn du es brauchst — aufklappen
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 }
Mehr MöglichkeitenZusätzliche Features
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.