Passing a repeater item to lightbox

Ask the community
,
1

Copying code snippets from examples, I’ve created an advent calendar (using a repeater tied to a dataset) that will open the current calendar day to display an image, and upon clicking that image, it will open a lightbox with the current day and a video. All of my code seems to be working, except the lightbox doesn’t get the correct countdown day or the video. It shows the last countdown day in the dataset.
Here is the code that opens the lightbox when the associated image is clicked.

1144×255 26.9 KB

The video it is showing is the default video for the video player object. I’m attempting to pass the URL for the video but that is not updating at all. Is it even possible to dynamically change the video on a lightbox? Here is the code for the lightbox itself:

1268×317 32.7 KB

Thanks in advance for any help. I’m an old cobol programmer; this stuff is new to me!

2 
$w.onReady(()=>{
	$w('#adventRepeater').onItemReady(($item,itemData,index)=>{
		$item('#giftImage').onClick(()>={
			console.log("Item-Data: ", itemData);
			wixWindow.openLightbox("Promotion", itemData);		
		});	
	});
});

import wixWindow from 'wix-window';

$w.onReady(()=>{
    let recievedData = wixWindow.lightbox.getContext();
    $w('#text1').text = recievedData.numberOfDay;
    $w('#videoPlayer1').src = recievedData.videoURL;
});

Next time please do not use IMAGES to show code, instead you can use CODE-BLOCKS.

3

It worked!
I’m going to include my full code (didn’t know about CODE-BLOCKS) because I had to change a couple things and I want to be sure I am following best practices. I had the code snippet included in another function, but deleted that and used your code as a separate function.

Then the lightbox debug showed that my item number was being passed but the video URL wasn’t - said the ‘videoURL’ was undefined. Realized my error there and now it is all good! Thanks so much!

Page with repeater:

import wixWindow from ‘wix-window’ ;

$w . onReady ( function () {
showDays ();
clickIt ();
});

function showDays ( ) {
//const currentDate = new Date(‘2022-11-05’);
const currentDate = new Date ();

$w ( "#giftDataset" ). onReady (() => { 
    $w ( "#adventRepeater" ). forEachItem (( $item ,  itemData ,  index ) => { 
        **const**  repeaterItem  =  itemData ; 
        **let**  fixedItemDate  =  $item ( '#calendarDate' ). text ; 
        **let**  dateItem  =  **new**  Date ( fixedItemDate ); 

        **if**  ( currentDate . getDate () >  dateItem . getDate ()) { 
            $item ( '#overlayBox' ). hide (); 
            $item ( '#giftImage' ). show (); 
            $item ( '#nameDateBox' ). show (); 

        }  
        **else if**  ( currentDate . getDate () ==  dateItem . getDate ()) { 
            $item ( '#redNumberText' ). show (); 
            $item ( '#blackNumberText' ). hide (); 

            **let**  slideOptionsOut  = { 
                "duration" :  1700 , 
                "delay" :  1000 , 
                "direction" :  "left" 
            }; 

            **let**  slideOptionsIn  = { 
                "duration" :  1700 , 
                "delay" :  0 , 
                "direction" :  "right" 
            }; 

            $item ( '#overlayBox' ). onClick (( event ) => { 
                $item ( '#overlayBox' ). hide ( "slide" ,  slideOptionsOut ). then (() => { 
                    $item ( '#giftImage' ). show ( "slide" ,  slideOptionsIn ); 
                    $item ( '#nameDateBox' ). show ( "slide" ,  slideOptionsIn ); 
                }); 
            }) 
        }; 
    
                //$item('#giftImage').onClick(() => { 
                //let index = $w('#adventRepeater').data.findIndex((item) => { 
                //return item.id = repeaterItem.itemId; 
                //}); 
                //wixWindow.openLightbox("Promotion",repeaterItem.itemId);             
                //});   
                
    });     

});

}

**function**  clickIt ( ) { 
    $w . onReady (()=>{ 
    $w ( '#adventRepeater' ). onItemReady (( $item , itemData , index )=>{ 
    $item ( '#giftImage' ). onClick (()=>{ 
        console . log ( "Item-Data: " ,  itemData ); 
        wixWindow . openLightbox ( "Promotion" ,  itemData );       
    });  
});

});
}

and My lightbox code:

import wixWindow from ‘wix-window’ ;

$w . onReady (()=>{
let receivedData = wixWindow . lightbox . getContext ();
$w ( ‘#text1’ ). text = receivedData . numberOfDay ;
console . log ( "numberOfDay: " , receivedData . numberOfDay );
$w ( ‘#videoPlayer1’ ). src = receivedData . newField ;
console . log ( "videoURL: " , receivedData . newField );
});

Anyway it is up and running - THANKS SO MUCH!!