Dynamic lightbox code

Ask the community
,
1

Hi there, I need help on dynamic lightbox code.

I’ve built a dynamic page connected to a dataset. The user sees a different version depending on the URL they follow. In the page is a repeater with nine containers, each housing a button and some text. Each button should open a different lightbox.

I want to make the lightbox content dynamic, depending on the version of the dynamic page the user lands on. I only have five elements in the lightbox: title text / copy / image / image text / and a link-out URL (when tapping on the image).

I’ve managed to put some code in that partially works. It shows no errors and works in the live page based on what I’ve told it to do. But it’s not doing what I want it to do because my code is deficient.

My problems:

  1. The button opens the lightbox but shows content from the first line in the dataset. It’s not dynamic. How do I tell it to look up the line that relates to the version of the specific dynamic page the user is in?

  2. Every button I’ve added to the containers in the repeater has the same name. How do I have a different button name in each container of the repeater so each button can open a different lightbox?

  3. How do I add a URL to the image in the lightbox? I’ve added text and image. Now I need a way for the user to tap the image and link out to a web page (again, URL is from the dataset and is different depending on the version of the dynamic page)

I have other questions but these are my big ones. Please help!

Here’s where I’m at…

//dynamic page:
import wixWindow from 'wix-window';

$w.onReady(() => {
 $w("#dynamicDataset").onReady(() => {
  $w("#repeater1").onItemReady(($item, itemData, index) => {
   $item('#button45').onClick(() => {
 let item = $item('#dynamicDataset').getCurrentItem();
    wixWindow.openLightbox('TEST.Stories.6S.Explore.T4', item)
   });
  });
 });
});

//where dynamicDatset is the collection in the dynamic page
//where button45 is a button in the repeater
//where 'TEST.Stories.6S.Explore.T4' is the lightbox name

//Lightbox;
import wixWindow from 'wix-window';

$w.onReady(function () {
    let receivedData = wixWindow.lightbox.getContext()
    $w("#text285").text = receivedData.lb4Title
    $w("#text287").text = receivedData.lb4Copy
    $w("#image69").src = receivedData.lb4Image
    $w("#text286").text = receivedData.lb4ImageText
});
    
 //where text285 is the title textbox in the Lightbox
 //where lb4Title is the field ID in the dynamicDataset (from the dynamic page)
2

Use this just after the onclick()
{
let $item = $w.at(event.context);
let clickedItemData = $item(“#dynamicDataset”).getCurrentItem():
//pass the data to lightbox as you have done.
}

//now clickedItemData have the data from the field where you will click. Pass this data to the lightbox.

3

Thanks Rajjat, I appreciate your help.

I’ve done something wrong with my implementation of your suggestion. (photo below to show the red-underline errors)

Do I need to define the event?
The colon is also underlined.
Do I need to delete my original 'let item = $item(‘dynamicDataset…’ line?

1276×666 76.4 KB

4

Please pass the event in onclick like onclick((event)=>{…

Rest of the code will be same.

5

@wix-expert-velo-cert Thank you Rajjat. You speak the code language effortlessly. And I know you can see exactly how simple this is and how it should be presented.

Unfortunately, I’m an absolute beginner and don’t yet understand what the elements do, or how to interpret your suggestions. All I can do it literally add what you suggest.

I presume I’m doing something wrong that’s really basic. I’ve got the code below in my dynamic page and it’s showing no errors. In the live page the button click does nothing.

Could you explain where I’m going wrong? And how I can correct it?

//dynamic page:
import wixWindow from 'wix-window';

$w.onReady(() => {
 $w("#dynamicDataset").onReady(() => {

  $w("#repeater1").onItemReady(($item, itemData, index) => {
   $item('#button45').onClick((event) => {
     {
      let $item = $w.at(event.context);
        let clickedItemData = $item("#dynamicDataset").getCurrentItem():
     }
 let item = $item('#dynamicDataset').getCurrentItem();
    wixWindow.openLightbox('TEST.Stories.6S.Explore.T4', item)
   });
  });
 });
});
6

SOLVED…

The fabulous @victoria-shelley designed the solution for me. Highly recommended in the Wix Marketplace.