Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Funktionen für Fortgeschrittene
  3. CMS (ehem. Content-Verwaltung)
  4. CMS-Content mit deiner Website verknüpfen
    5. CMS Funktionsvorschlag: Dynamische Lightboxen

CMS Funktionsvorschlag: Dynamische Lightboxen

Funktionsvorschlag|Wir sammeln Stimmen zu diesem Funktionsvorschlag.
Zurzeit ist es nicht möglich, Lightboxen dynamisch zu gestalten, indem du sie mit Sammlungen des CMS verbindest. Du kannst jedoch die angehängten Elemente einer Lightbox mit dem Inhalt der CMS-Sammlung verbinden, um die Elemente dynamisch zu gestalten (z. B. Text, Bilder, Buttons).
Wir arbeiten ständig daran, unsere Produkte zu aktualisieren und zu verbessern. Dein Feedback ist uns daher sehr wichtig.

Alternative

Mit Velo kannst du eine Lightbox erstellen, die sich von einer dynamischen Elementseite öffnet und dasselbe Element anzeigt, das auf der Seite angezeigt wird, von der aus die Lightbox geöffnet wurde.

Wenn du z. B. dynamische Elementseiten hast, die die von dir angebotenen Services anzeigen, könntest du einen Button auf der Seite mit einer Lightbox verlinken. In der Lightbox kannst du Elemente wie Text, Bilder und Buttons mit einem Datensatz verknüpfen, der mit derselben Sammlung verknüpft ist. Wenn Besucher auf den Button auf deiner dynamischen Elementseite klicken, wird daher eine Lightbox mit weiteren Informationen zu demselben Element auf der Seite geöffnet.
Bevor du loslegst:
Deine Website benötigt folgende Komponenten:
Wix Editor
Studio Editor
  1. Öffne deinen Editor.
  2. Öffne die entsprechende dynamische Elementseite.
  3. Aktiviere den Velo-Dev-Modus:
    1. Klicke oben im Editor auf Dev-Modus.
    2. Klicke auf Dev-Modus aktivieren.
  4. Kopiere den folgenden Codeausschnitt und füge ihn oben in den Seitencode ein:
1import wixWindowFrontend from 'wix-window-frontend';
Screenshot, der zeigt, wie ein Codeausschnitt oben im Code einer dynamischen Elementseite hinzugefügt wird.
  1. Kopiere den folgenden Codeausschnitt und füge ihn ein nach: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id); })
2
Screenshot, der zeigt, wie der zweite Codeausschnitt in den Code der dynamischen Elementseite eingefügt wird.
  1. Ersetze in dem von dir eingefügten Beispielcode die unten aufgeführten IDs durch die auf deiner Website verwendeten IDs:
    • openLightbox: Mit der ID des Buttons ersetzen, der die Lightbox öffnet.
    • dynamic Dataset: Mit der ID des Datensatzes der dynamischen Elementseite ersetzen.
    • Dynamic Lightbox: Mit dem Namen der Lightbox ersetzen.
Screenshot, der die IDs und den Namen der Lightbox zeigt, die im Code ersetzt werden müssen.
  1. Öffne die Lightbox in deinem Editor.
  2. Füge einen Datensatz hinzu und verbinde ihn mit derselben Sammlung wie deine dynamische Elementseite:
    1. Klicke auf der linken Seite im Editor auf CMS .
    2. Klicke auf Content-Elemente hinzufügen.
    3. Klicke auf Datensatz.
    4. Klicke auf das Aufklappmenü Sammlung wählen und wähle dieselbe Sammlung aus, die mit deiner dynamischen Elementseite verbunden ist.
    5. Klicke auf Erstellen.
  3. Klicke in den Datensatzeinstellungen auf das Feld Maximale Anzahl angezeigter Elemente und gib die Zahl 1 ein.
  4. Verbinde die Elemente in deiner Lightbox (z. B. Text, Bilder, Buttons) mit dem Datensatz:
    1. Klicke auf das entsprechende Element in der Lightbox.
    2. Klicke auf das Symbol für Mit CMS verknüpfen .
    3. Klicke auf die Aufklappmenüs unter Verbindungen und wähle die entsprechenden Sammlungsfelder oder Datensatzaktionen aus.
    4. Wiederhole diese Schritte für jedes Element deiner Lightbox, das du verbinden möchtest.
  5. Kopiere den folgenden Codeausschnitt und füge ihn oben in den Lightbox-Code ein:
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
Screenshot, wie der Codeausschnitt oben im Lightbox-Code eingefügt wird.
  1. Kopiere den folgenden Codeausschnitt und füge ihn ein nach: $w.onReady(function () {
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
Screenshot, der zeigt, wie der obige Codeausschnitt zum Lightbox-Code hinzugefügt wird.
  1. Ersetze in dem eingefügten Beispielcode dataset1 durch die ID deines Lightbox-Datensatzes. 
  2. Sieh dir deine Website in der Vorschau an, um die Funktionalität zu testen. 
  3. Wenn du fertig bist, veröffentliche deine Website. 
Hinweis: Alle Informationen einschließlich geplanter Funktionen und zeitlicher Einschätzungen dienen nur der Information. Wix behält sich vor, jederzeit Änderungen oder Streichungen vorzunehmen.Die Informationen stellen keine Zusage, Verpflichtung oder Garantie hinsichtlich einer etwaigen zukünftigen Verfügbarkeit oder Umsetzung dar und sollten nicht für Kaufentscheidungen zurate gezogen werden.