How to display data from a collection on the website
After creating a collection in the project, you need to display its data on the website.
You can add a block with collection elements to any part of the website, except for the 404 page and the search results page.
Collection widget is used to display collection data on the website.
The widget will appear on the canvas. It consists of a list element called Collection List, which contains individual elements called Collection Item.
Go to the Settings tab (right panel) and open Data Source dropdown. By default, the value is set to "None" because the widget is not yet linked to a collection.
Select your collection from the list.
Done! Collection widget is now linked to your collection— the names of its elements/items are displayed on the canvas.
This way, you have prepared a structure where the data from the collection will be displayed.
Now you need to add interface elements to the structure created on the canvas, where the data from the collection fields will be displayed.
For example, for the collection item "Services" you'll need two text elements (service name and price) and an image.
To do this, select Collection Item in the layers panel and add the required elements to it.
When you add the necessary interface elements to one of the collection elements/items, they will automatically be added to all the other elements/items as well.
To ensure the data from the collection is passed to the corresponding interface elements, you need to create a connection between them.
Elements inside list-based widgets (such as List, Block List, Accordion, or Tabs) cannot be linked to collection fields.
1) Select one of the elements inside Collection Item on the canvas or in the layers (e.g., Text). Go to the Settings (right panel) and, in the Dynamic data section, open the Binded field dropdown. By default, the value is set to "None" because the element is not linked to any field.
2) Select the field you want to link to the element from the list (e.g., “Title”).
- Date Field
The Date field must be linked to a text element.
- Link Field
For each collection item, you can add a link or a button to navigate to the page you specified when creating the collection.
To do this, the Link field must be linked to an element that has a link action setting, such as a button, Text Link, or Link Block.
For these elements, you don't need to create a binding through the Binded field option. Instead, you need to configure the click action. To do this, in the Action Settings option, select the Action — Navigate to Link. Then click on the collection icon and choose the Link from the list.
3) The data from the selected field will automatically populate this element on the canvas for all collection elements/items. In the corresponding layer, an icon will appear indicating that the element is linked to a collection field.
4) Similarly, link the corresponding collection fields to other elements.
Until you link a collection field to an element, it remains static, and the data in it will not update dynamically.
All set! The data for all collection elements/items is now displayed on the page. All that's left is to create the desired design.
Save the page (Ctrl + S) and click the Publish button, or use the shortcut Ctrl + Shift + S (save and publish).
You can add any number of Collection widgets to different parts of the website.
For example, on the homepage, you can display a brief list of services, while on a separate page, you can show the full collection with detailed descriptions.
You create a collection once and can link it to multiple Collection widgets placed in different parts of the website. The data only needs to be entered into the collection once, and it will automatically populate across different pages.