Bind a product list

Show real rows from a DocType on a page, with a filter.

1. Create a collection

Under Collections press New. Choose DocType mode, pick your DocType (Item, Blog Post, or your own), tick the fields to expose, and add a default filter such as disabled = 0. Mark it guest-readable so visitors can see it. Preview shows the rows.

2. Add a repeater

In the builder, insert a Repeater and pick the collection as its source. Inside it, add an Image, a Heading and a Text. Select each one, open Content and bind it to the row's field (item_name, image, description).

3. Add a filter

Insert a Filter element above the repeater. Set its parameter name to category and its options to your categories. On the repeater, add a filter rule item_group = {{ route.query.category }}. Clicking a filter now rewrites the URL and refetches the list.

4. Empty state and count

On the repeater, set a count variable and an empty text such as "No products found". Bind a heading above the list to the count.

5. Detail page

Create a page with route /products/:slug. Bind its data to the same collection with name = {{ route.params.slug }}. Link each card in the repeater to /products/{{ row.name }}.

Your first landing page

A contact form that creates leads

On this page

1. Create a collection

2. Add a repeater

3. Add a filter

4. Empty state and count

5. Detail page