header-logo
Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst
Gestalte und verwalte deine Website mit Wix.
Verwalte Premiumpakete, Abos und Rechnungen
Führe dein Unternehmen und vernetze dich mit Mitgliedern.
Kaufe, verknüpfe oder übertrage eine Domain.
Stärke dein Unternehmen und deine Webpräsenz.
Steigere deine Sichtbarkeit mit SEO und Marketing.
Nutze erweiterte Funktionen für mehr Effizienz.
Finde Lösungen oder kontaktiere uns.
placeholder-preview-image
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image
  1. Start
  2. Deine Website erstellen
  3. Funktionen für Fortgeschrittene
  4. CMS (ehem. Content-Verwaltung)
  5. CMS-Content mit deiner Website verknüpfen
  6. CMS Funktionsvorschlag: Dynamische Pop-ups (Lightboxen)

CMS Funktionsvorschlag: Dynamische Pop-ups (Lightboxen)

Funktionsvorschlag|Wir sammeln Stimmen zu diesem Funktionsvorschlag.
Zurzeit ist es nicht möglich, Pop-ups (Lightboxen) dynamisch zu gestalten, indem du sie mit CMS-Sammlungen verknüpfst. Du kannst jedoch die angehängten Elemente eines Pop-ups (einer Lightbox) mit Inhalten der CMS-Sammlung verknüpfen und die Elemente auf diese Weise dynamisch machen (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 ein Pop-up (eine Lightbox) erstellen, das sich über eine dynamische Elementseite öffnet und genau das Element anzeigt, das auch auf der Seite angezeigt wird, von der aus das Pop-up (die Lightbox) geöffnet wurde.

Wenn du zum Beispiel dynamische Elementseiten hast, auf denen die von dir angebotenen Services angezeigt werden, könntest du einen Button auf der Seite mit einem Pop-up (Lightbox) verknüpfen. Im Pop-up (Lightbox) könntest du Elemente wie Text, Bilder und Buttons mit einem Datensatz verknüpfen, der mit derselben Sammlung verknüpft ist. Wenn dann Besucher auf den Button auf deiner dynamischen Elementseite klicken würden, würde sich ein Pop-up (Lightbox) öffnen mit weiteren Informationen über genau das Element, das auf der Seite angezeigt wird. 
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: Ersetze dies durch die ID des Buttons, der das Pop-up (die Lightbox) öffnet. 
    • dynamic Dataset: Ersetze dies durch die ID des Datensatzes der dynamischen Elementseite.
    • Dynamic Lightbox: Ersetze dies durch den Namen des Pop-ups (der Lightbox). 
Screenshot, der die IDs und den Namen des Pop-ups (der Lightbox) zeigt, die im Code ersetzt werden müssen.
  1. Öffne das Pop-up (die Lightbox) in deinem Editor. 
  2. Füge einen Datensatz hinzu und verknüpfe 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 Dropdown-Menü Sammlung wählen und wähle dieselbe Sammlung aus, die mit deiner dynamischen Elementseite verknüpft ist.
    5. Klicke auf Erstellen.
  3. Klicke in den Datensatzeinstellungen auf das Feld Elemente pro Ladevorgang und gib die Zahl 1 ein.
  4. Verknüpfe die Elemente in deinem Pop-up (deiner Lightbox) (z. B. Text, Bilder, Buttons) mit dem entsprechenden Datensatz:
    1. Klicke auf das entsprechende Element im Pop-up (in der Lightbox). 
    2. Klicke auf das Symbol für Mit CMS verknüpfen .
    3. Klicke auf die Dropdown-Menüs unter Verknüpfungen und wähle die entsprechenden Sammlungsfelder oder Datensatzaktionen aus.
    4. Wiederhole diese Schritte für jedes Element in deinem Pop-up (deiner Lightbox), das du verknüpfen möchtest. 
  5. Kopiere den folgenden Codeausschnitt und füge ihn oben in deinen Pop-up-Code (Lightbox-Code) ein: 
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
Screenshot, wie der Codeausschnitt oben im Pop-up-Code (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 Pop-up-Code (Lightbox-Code) hinzugefügt wird.
  1. Ersetze in dem Beispielcode, den du eingefügt hast, dataset1 durch die ID deines Pop-up-(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.