Using tags in a repeater to set image collapse status

Ask the community
,
1

I am displaying some data from a collection in a repeater.

The collection has a tag field and I want to display an image, in each item of the repeater for each of the tags that ware present. The images $w ( ‘#XTile’) all start out collapsed…and this is my code to only show the images for the where there is a tag.

For each item in the repeater, quickly do a loop through the array that contains the tags, expanding the image element where a tag is present but leaving it collapsed if the tag is not present.

$w.onReady( () => {
    $w("#products").onReady( () => {
        $w("#productsRepeater").forEachItem( ($item, itemData, index ) => {
            let tiles = itemData.tiles
            let i = tiles.length
            while (i>0) {
                let tile = tiles[i-1]
                //console.log(element)
                if (tile === "A") {$w('#ATile').expand()}
                if (tile === "B") {$w('#BTile').expand()}
                if (tile === "C") {$w('#CTile').expand()}
                if (tile === "D") {$w('#DTile').expand()}
                if (tile === "E") {$w('#ETile').expand()}
                if (tile === "F") {$w('#FTile').expand()}
                i--
            }
        })
    })
})

It couldn’t really be any simpler but, this code is actually expanding all the images so I can see them all in each item of the repeater.

The console log statement, that I’ve commented out here, was showing the elements as I’d expected but all the image elements are expanded…but I can’t see what I’m doing wrong.

If I comment out the whole code block, the images are all collapsed correctly, as expected.

Can anyone throw any light on what I am doing wrong here??

Simon.

2

Hey Simon, I see at least one place to start here that could be the whole issue. You are not actually targeting your repeater items here in your expand calls.

Take a look at this article which will explain how to get to the scope of each item within a repeater https://support.wix.com/en/article/velo-repeaters-understanding-the-scope-of-selector-functions

In addition, one of the developers here created an npm package that makes it a little easier (imo) to alos do this. Both technicques are valid. https://github.com/shoonia/repeater-scope

3

Thanks Amanda…I used the first option…very easy fix. I guess I should have read the detail in the intro section on repeaters before coming here!

I’ll take a look at the npm when I have time…I am always open to something that makes life easier.

Final code:

$w.onReady( () => {
    $w("#products").onReady( () => {
        $w("#productsRepeater").forEachItem( ($item, itemData, index ) => {
            let tiles = itemData.tiles
            let i = tiles.length
            while (i>0) {
                let tile = tiles[i-1]
                //console.log(element)
                if (tile === "A") {$item('#ATile').expand()}
                if (tile === "B") {$item('#BTile').expand()}
                if (tile === "C") {$item('#CTile').expand()}
                if (tile === "D") {$item('#DTile').expand()}
                if (tile === "E") {$item('#ETile').expand()}
                if (tile === "F") {$item('#FTile').expand()}
                i--
            }
        })
    })
})

Simon.

4

glad you got it working! I use both methods depending on what I’m doing with a repeater. Whatever makes it less verbose is how I decide, but all comes down to preference truly.