Commmerce Docs

What it is

The declarative loop primitive — repeats its template once per item in a parent data source. Equivalent to v-for or map() in framework code.

When to use

  • Product grids from a collection source
  • Repeating reviews, blog posts, etc.

Attributes

AttributeTypeDefaultDescription
data-asstringitemVariable name exposed to children via {{ }} interpolation.
data-limitnumberMaximum items to render.
idstringUnique element identifier.
classstringCustom CSS class list.
hiddenbooleanfalseHide the element without removing it from the DOM.

Examples

Product grid

One product card per item in the collection.

<mmm-data-source data-type="collection" data-id="new">
  <mmm-loop>
    <mmm-product-card></mmm-product-card>
  </mmm-loop>
</mmm-data-source>