Loop grid: repeats its content for every item of a source (products, posts…) in a responsive grid. The blocks inside bind their props to the fields of the item (see ElementorexCms.Dynamic), so one card designed in the editor becomes the card of every product.

The query: how many items, from which one, the order and filters on the fields of the source. In the template of an item (a product page), Same as the current item filters and Leave out the current item make lists of related items.

Pagination and visitors' filters

The state of the loop goes in the query string of the page under its key, its CSS ID (Advanced tab) or its node id: ?catalog[page]=2. Filters forms (ElementorexCms.Blocks.Filters) add the visitor's search, order and filters there (see ElementorexCms.Filters), and the loop applies them on top of its own query.

Numbers, Previous / Next (or both) link to the other pages, keeping the filters, and swap only the grid for the one of that page. Load more button and Infinite scroll fetch the next page in the background and append its items. Both run in the runtime of the site (the ElementorexRuntime hook or initElementorex()); without JavaScript they are links to the other page. The page the loop shows comes from the params of the document:

<ElementorexCms.Components.document document={@page.body} params={@params} />

Numbered pages need to count the items: sources without ElementorexCms.Source.count/2 get Previous and Next instead.

On the canvas the first item can be edited and the others follow it; without items, the content is shown once with its own values as placeholders. Loops render inside at most one other loop, and only loops that are in no other loop have pages.