Wix Blocks: Connecting a Repeater to a Database Collection

2 min read
Wix Blocks is currently open to a limited number of users.
Blocks allows you to connect a collection to a repeater. Note that Blocks collections are placeholders that allow you to interact with similar structured collections on your site later. To connect a repeater to a collection:
  1. Create or open a Blocks widget through the Widgets and Design menu.
  2. Add a repeater to your widget: go to the Add add panel and click LAYOUT > REPEATERS.
  3. Create a collection in Blocks. 
  4. Go to the code section of the widget and import the wix-data module:
1import wixData from 'wix-data';
5. Query the data in the collection with this syntax (learn more about your app namespace):

@<yourAppNamespace>/<yourCollecitonName>

For example, the following function gets strings from a collection named "Titles" and assign them to the text elements in a repeater:

1$w.onReady(function () {
2 wixData.query('@daphnet2/simple-repeater-app/Titles')
3 .find()
4       .then((results) => {
5           $w('#repeater1').data = results.items
6       })
7       .catch((err) => {
8           console.log(err)
9           throw new Error(err)
10       });
11    $w("#repeater1").onItemReady(($item, itemData, index) => {
12       $item("#text1").text = itemData.title;
13   });
14});
Find the repeater ID
An element's ID is displayed in several places:
  • In the Design tab, when you hover over or select an element.
  • In the Layers layers icon panel, when you select an element.
  • In the Properties & Events panel properties and events icon, when you select an element.

Did this help?

|