Show/Collapse several dynamic items in lightbox

Ask the community
,
1

Dear All,

I use a lightbox to give information about several different products, and I use a dataset connected repeater to fill this lightbox with different information. In this lightbox I also want to show icons of the PDF brochure and a youtube video, however not all of the products have a brochure(s) and/or a video. For these I would like to hide or collapse the empty elements.

So far so good, I have followed the tutorial:
https://support.wix.com/en/article/corvid-tutorial-hiding-a-video-player-when-there-is-no-video-to-play

But it seems that I am still making a mistake that I cannot find out.

For your reference:

  • the dataset is called: dataset1
  • image30 is connected to “broch1Klein” in the database
  • image31 is connected to “broch2Klein” in the database
  • videoPlayer1 is connected to “video” in the database

All above connections have been connected in the lightbox.

I use this code in the page section of the lightbox:

$w.onReady(() => {
$w("#dataset1").onReady(() => {
    const item = $w("#dataset1").getCurrentItem();
        if (!item.video) {
            $w("#videoPlayer1").collapse();
}
        if (!item.broch1Klein){
            $w("#image30").collapse();
}
        if (!item.broch2Klein) {
            $w("#image31").collapse();
}
});
});

If I do not use any code, this gives me all the videos and icons that I have set, but it fills the pages where I have not got a video and or an icon with the standard repeater video/image. Using this code will hide the video and icons on all results, even those with a video and/or an icon.

I have also tried to make individual const(ances) like const video, const image1 and const image2. All beneath each other or declared in their specific part. No results that would make it better.

Could someone please review my faulty code and point me where I am going wrong?

2

I have just used your code on a lightbox and it all works fine.

The only difference being that I have changed the dataset with the field names to Video, Image1 and Image 2, so my field keys are video, image1 and image2

$w.onReady(() => {
$w("#dataset1").onReady(() => {
    const item = $w("#dataset1").getCurrentItem();
        if (!item.video) {
            $w("#videoPlayer1").collapse();
}
        if (!item.image1){
            $w("#image1").collapse();
}
        if (!item.image2) {
            $w("#image2").collapse();
}
});
});

Lightbox Template in Editor

996×753 491 KB

With video and both images

1271×825 138 KB

With no video in the dataset.

1109×741 227 KB

With no images in the dataset.

1160×773 263 KB

Finally, just note that with collapse function, you will need to check where you place your video and images as even if something has been collapsed, another element might still be affecting the lightbox and it won’t change size.

Like here where there is just the one image and image2 is collapsed, yet as image1 is still being shown the lightbox will stay the same size and you will just have a large gap on your right side.

1055×848 384 KB

3

Hi GOS,

Thanks for your detailed message. I will recheck all item-names and dataset-names just to be sure it isn’t in those. If I can find out what was wrong there I will let you know, as the code itself seems to be correct.

I’ll give a heads-up tomorrow.

4

Hi GOS,

I have managed to find out why it would work at your test and gives problems with mine. The fact that the repeater can have more than 1 product seems to be the problem.

If product A has a video and 1 or 2 icons, product B will also show a video and 1 or 2 icons (empty spaceholders if product B doesn’t has these in the dataset).
If product A has no video and no icons, product B will also not show these although they may contain these in the dataset.

Have you got any idea how I can specify the code to work individualy for every product in the repeater instead of using the first item in the repeater as default for other products?
I already tried to duplicate the repeaterbox to see if it would start a new configuration on the second, but this doesn’t help.

5

I think I found out myself :slight_smile:
A forEachItem updates the whole product-configuration and gives the exact wished-for output.

$w.onReady(() => {
$w("#dataset1").onReady(() => {
    $w("#repeater1").forEachItem(($w) => {
    const item = $w("#dataset1").getCurrentItem();
        if (!item.video) {
            $w("#videoPlayer1").collapse();
}
        if (!item.image1){
            $w("#image1").collapse();
}
        if (!item.image2) {
            $w("#image2").collapse();
}
});
});