Lightbox with Dynamic Content via Button

Discussion Ask a question
,
1

Hello all, I’m trying to connect a Lightbox with Dynamic content from a Repeater. I have a repeater that has a button so people can learn more about the content. I want to call a Lightbox upon clicking that button and it Dynamicly changes the content based on the selected data.

I already have a Dynamic Page for that purpose that works fine, but I prefer a lightbox instead.

PS: Every answer from previous posts are not complete enough for a Step-by-Step.

Thanks everyone in advance.

2

Hi,
You can use onItemReady, onClick, openLightboxand getContext methods.
It should look something like this:

import wixWindow from 'wix-window';
$.onReady(() => {
  $w("#myRepeater").onItemReady( ($w, itemData, index) => { 
    $w("#buttonElement").onClick(() => {
      const repeaterItem = itemData;
      wixWindow.openLightbox("LightboxName", repeaterItem);
    });
  });
});

In the Lightbox side:

import wixWindow from 'wix-window';
$.onReady(() => {
  let receivedData = wixWindow.lightbox.getContext(); // will be equal to itemData
});

Checkout this thread:

Good luck!
Roi.

3

Thanks fot the answer Roi , but it does’nt work with my website.

Heres the code adapted to my context:

import wixWindow from 'wix-window';
$w.onReady(() => {
  $w("#repeater1").onItemReady( ($w, itemData, index) => { 
    $w("#button1").onClick(() => {
      const repeaterItem = itemData;
      wixWindow.openLightbox("Escolas Preview", repeaterItem);
    });
  });
});

And here is the Lightbox:

import wixWindow from 'wix-window';
$w.onReady(() => {
  let receivedData = wixWindow.lightbox.getContext(); // will be equal to itemData
});

It does show some data, but it shows the first line of the database, regardless of the button pressed.

Do I have to do something else? Can you explain this code so I can figure it out by myself? Do I have to say what repeaterItem is?

Thanks in advance.

4

Roi , I got it. The code you provided really sent the data from the repeater to the Lightbox. What was missing? How to handle the DATA!

I figured it out that you don’t need a DATASET inside de Lightbox, you just have to define its properties with data received using receivedData. After that it was really easy!

I’m going to post my code so anyone can see what was done.

import wixWindow from 'wix-window';
import wixLocation from "wix-location";
$w.onReady(() => {
	let receivedData = wixWindow.lightbox.getContext(); // will be equal to itemData
	console.log(receivedData);
	$w('#logoescola').src = receivedData.foto; // Photo from Collection
  	$w("#nome").text = receivedData.title; // Title from Collection
  	$w("#endereco").text = receivedData.endereco; // and so forth
  	$w("#email").text = receivedData.email;
  	$w("#telefone").text = receivedData.telefone;
  	$w("#gmaps").location = { // this is to set the location on the maps object
		"latitude": receivedData.latitude,
		"longitude": receivedData.longitude, 
		"description": receivedData.title,
	};
	$w("#whatsapp").text = receivedData.whatsApp; // this is a text with hyperlink to a WhatsApp chat page
	$w("#whatsapp").onClick(()=> {
  		wixLocation.to("https://api.whatsapp.com/send?phone="+ receivedData.whatsApp+"");
	});
});

Thanks everyone, especially Roi!

2 Likes
5

There’s a mistake in the code blocks you wrote, you are missing a “w” before the on ready function:

$w.onReady(() => {
  let receivedData = wixWindow.lightbox.getContext(); // will be equal to itemData
});
6

Thanks for this.

I have a question here>

Like you used .src for image and .text for text to display
so the question is how to display the video, rich text, button text, media gallery?