Hide svg in repeater based on boolean value in CMS

Ask the community
, ,
1

Hello everyone,

I am trying to display a label (svg or png) in a repeater that is connected to a data collection in CMS. However, the label should only be displayed when the boolean value is true in the connected data collection. I tried to solve it with the following code, but it didn’t work. Has anyone had a similar issue or knows how to solve it?

Thaaank you so much for any kind of help.

This is the code I tried to use:

$w.onReady(function () {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {

const shouldShow = itemData.showgraphic; // field key from your dataset

if (shouldShow) {
  $item("#vectorImage8").show();      
  $item("#vectorImage8").expand();
} else {
  $item("#vectorImage8").hide();

$item(“#vectorImage8”).collapse();
}
});
});

2

You can accomplish this using a Filter with Wix Data or a Dataset Filter depending on how you populate the repeater with items.

By creating a filter that checks if a certain value in the itemData is “true” with .eq(), you can make the repeater only populate with the items you desire.

3

Thank you so much for your help. I solved it with the following code:

$w.onReady(() => {
$w(‘#yourDataset’).onReady(() => {
    $w('#yourRepeater').onItemReady(($item, itemData) => {

        if (itemData.available === true) {       // <— your boolean field key
            $item('#availabilityIcon').show();
        } else {
            $item('#availabilityIcon').hide();
        }

    });

});


});
4

This line wasn’t supposed to be here, but now it’s committed.