Repeater AB Design – Alternating Column Layout?

[yo7554]

I’m building out a restaurant client’s website in Wix Studio and we want to have a page with the local purveyors they work with, in the form of a dataset-connected repeater so they can add and remove easily.

It looks like only certain properties can be changed between A & B designs, but not the layout. The trouble with this is I really wanted a layout that alternates the columns so the page doesn’t look so lopsided. Current layout:

Desired layout:

For mobile, I’d like to maintain a vertically stacked layout:

[DeanAyalon]

Alternating a repeater’s layout is not natively supported
You could, however, work around this:
In the repeater’s occurrence, design both row versions, then collapse them based on index

Something like this:
#repeater contains #oddBox and #evenBox, for the odd- and even-numbered boxes, repectively

$w('#repeater').onItemReady(($item, itemData, index) => {
    if (index % 2) $item('#evenBox').collapse()
    else $item('#oddbox').collapse()
}

[yo7554]

Thank you, Dean! This didn’t seem to work. Are there values I should be switching out? I’m quite code illiterate, so I could totally be missing something obvious!

[DeanAyalon]

Each of your elements has an id (aka tag)
My code accesses a repeater with the tag #repeater, make sure yours is named that way, or change it in the code
Same goes with the boxes

Alternating Repeater | Wix SDK Demos

Editor:

[yo7554]

I believe I had the tags correct, but maybe I’m building the repeater incorrectly?

I assume each side would be in its own box, and that’s the box being referenced?

[DeanAyalon]

No. look at the picture I sent
Each repeater occurrence has those two boxes underneath each other, so that when one collapses, the other is the only one left, and the gaps between disappear

Each repeater element has both the dark and light gray boxes in my build, only they alternate based on row index