Lets look at an example first
<div class="all-products">
{ repeater(id: '{{ component_id_0 }}') }
<div class="product">
<sf-image3 id=":1" width="475" height="535"></sf-image3>
<sf-oneline id=":2" class="name"></sf-oneline>
</div>
{ repeater_end() }
</div>
Everything inside repeater is possible to repeat within the UI with a plus icon. If a user repeats this part of the code, the final HTML output will look like this:
<div class="all-products">
<div class="product">
<img src="..." />
<span class="name">Example 1</span>
</div>
<div class="product">
<img src="..." />
<span class="name">Example 2</span>
</div>
</div>
Rule 1
Every repeater needs to have a unique id number. If your block contains multiple repeaters, change component_id_0 to component_id_1, component_id_2 and so on.
Rule 2
Every repeater needs to have at least one component inside of it. I.e. a <sf-something>.
Rule 3
This isn't really a rule, but we strongly recommend you to always use a wrapping div and set its position to relative. This will make the UI behave nice and ensure the manage repeaters buttons inside the admin works well.
In the example above we would add this style:
.all-products {
position: relative;
}
This is how the UI currently looks when a user has repeated the element three times. To the right you see the plus sign to add an additional instänce, and a more button to sort and remove instances.
