Ok, let’s say you have the following SETUP…
- You have a DATABASE → ID = myDatabase
- You have a page where you have your repeater (doesnt’t matter which page, even if it is a dynamic one). Your REPEATER has the ID = myRepeater.
Your repeater is connected with your database, by a dataset.
- You have created a LIGHTBOX with the ID = myLightbox.
Now let’s do some CODE…
$w.onReady(async()=>{
$w('#myDataset').onReady(()=>{
$w("#repeatedContainer").onClick((event) => {
let $item = $w.at(event.context);
let clickedItemData = $item("#myDataset").getCurrentItem();
console.log("Selected-Data: ", clickedItemData);
});
};
});
repeatedContainer ---> can be a --> BUTTON INSIDE REPEATER
So you are already able to get the current selected data out of your REPATER.
What else do you need to do ???
Anthony gave you already the right direction…
Let’s implement it into our current generated code…
But first, we should think about what to code and what would be the flow?
- Clicking a button inside REPEATER → selection of currentItem.
- We got the data of the selecte data, now we want to send this whole data-package to our LIGHBOX.
That means, we want to send our clickedItemData over to the LIGHTBOX…
wixWindow.openLightbox("LightboxNameHere", clickedItemData);
Adding it to our CODE…
$w.onReady(async()=>{
$w('#myDataset').onReady(()=>{
$w("#repeatedContainer").onClick((event) => {
let $item = $w.at(event.context);
let clickedItemData = $item("#myDataset").getCurrentItem();
console.log("Selected-Data: ", clickedItemData);
wixWindow.openLightbox("Lightbox", clickedItemData);
});
});
});
The lightbox already should be opened now.
Now you need a second code on your LIGHBOX…
How to get the DATA on your LIGHBOX, sended from your page ?
And again, you look onto the provided links by Anthony…
Your Lighbox-Code then should look something like the following…
/*****************
* Lightbox Code *
*****************/
import { lightbox } from 'wix-window';
$w.onReady(function () {
// recieving the data from your page into a variable...
let receivedData = lightbox.getContext();
$w('#greeting').text = receivedData.greeting.toUpperCase();
$w('#subject').text = receivedData.subject.toUpperCase();
$w('#blueButton').onClick(clickHandler);
$w('#greenButton').onClick(clickHandler);
$w('#pinkButton').onClick(clickHandler);
});
function clickHandler(event) {
lightbox.close(event.target.label);
}
This code is just a simple example → you will need to modify it for your own needs.
!!! Good luck and happy coding !!!
!!! May the CODING POWER be with you !!!