CMS-aanvraag: Dynamische lightboxen
Functieaanvraag|We verzamelen stemmen voor dit probleem
Momenteel is het niet mogelijk om lightboxen dynamisch te maken door ze te koppelen aan CMS-verzamelingen. Je kunt de gekoppelde elementen van een lightbox echter koppelen aan de inhoud van de CMS-verzameling om de elementen dynamisch te maken (zoals tekst, afbeeldingen, knoppen).
We zijn altijd bezig met het bijwerken en verbeteren van onze producten. Jouw feedback wordt daarbij zeer gewaardeerd. Als dit een functie is die je in de toekomst graag zou willen zien, klik dan op Voor deze functie stemmen en we zullen ervoor zorgen dat je op de hoogte blijft.
Tijdelijke oplossing
Met Velo kun je een lightbox maken die wordt geopend vanaf een dynamische itempagina en hetzelfde item weergeeft als op de pagina van waaruit de lightbox is geopend.
Als je bijvoorbeeld dynamische itempagina's hebt die de diensten weergeven die je aanbiedt, kun je een knop op de pagina koppelen aan een lightbox. In de lightbox kun je elementen zoals tekst, afbeeldingen en knoppen koppelen aan een dataset die aan dezelfde verzameling koppelt. Als gevolg hiervan wordt er een lightbox geopend met meer informatie over hetzelfde item dat op de pagina wordt weergegeven wanneer bezoekers op de knop op je dynamische itempagina klikken.
Voordat je begint:
Zorg ervoor dat je website het volgende heeft:
- Een lightbox.
- Een dynamische itempagina met een knop die linkt naar de lightbox.
- Verzamelingsvelden voor de inhoud die in de lightbox-elementen zal verschijnen.
Wix Editor
Studio Editor
- Ga naar je Editor.
- Ga naar de relevante dynamische itempagina.
- Schakel Velo Dev-modus in:
- Klik bovenaan de Editor op Dev-modus.
- Klik op Dev-modus inschakelen.
- Kopieer het onderstaande codefragment en plak het bovenaan je paginacode:
1import wixWindowFrontend from 'wix-window-frontend';
- Kopieer het onderstaande codefragment en plak het na: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => {
2 const item = await $w('#dynamicDataset').getCurrentItem();
3 const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id);
4})
5
- Vervang in de voorbeeldcode die je hebt geplakt de onderstaande ID's door de ID's die door je website worden gebruikt:
- openLightbox: Vervang door de ID van de knop die de lightbox opent.
- dynamic Dataset: Vervang door de ID van de dataset van de dynamische itempagina.
- Dynamic Lightbox: Vervang deze door de naam van de lightbox.
- Ga in je Editor naar de lightbox.
- Voeg een dataset toe en koppel deze aan dezelfde verzameling als je dynamische itempagina:
- Klik links in de Editor op CMS
. - Klik op + Contentelementen.
- Klik op Dataset.
- Klik op de Koppel een verzameling-dropdown en selecteer dezelfde verzameling die gekoppeld is aan je dynamische itempagina.
- Klik op Maken.
- Klik links in de Editor op CMS
- Klik op het Maximum aantal weergegeven items-veld in de dataset-instellingen en typ het getal 1.
- Koppel de elementen in je lightbox (bijvoorbeeld tekst, afbeeldingen, knoppen) aan de dataset:
- Klik op het relevante element op de lightbox.
- Klik op het Aan CMS koppelen-pictogram
. - Klik op de dropdowns onder Koppelingen en selecteer de relevante verzamelingsvelden of dataset-acties.
- Herhaal deze stappen voor elk element op je lightbox dat je wilt koppelen.
- Kopieer het onderstaande codefragment en plak het bovenaan je lightbox-code:
1import wixWindowFrontend from 'wix-window-frontend';
2import wixData from 'wix-data';
- Kopieer het onderstaande codefragment en plak het na: $w.onReady(function () {
1const getData = async () => {
2 const id = await wixWindowFrontend.lightbox.getContext();
3 $w('#dataset1').setFilter(wixData.filter().eq('_id', id));
4}
5getData();
- Vervang in de voorbeeldcode die je hebt geplakt dataset1 door de ID van je lightbox-dataset.
- Bekijk een voorbeeld van je website om de functionaliteit te testen.
- Publiceer je website als je klaar bent om live te gaan.