Как отобразить данные из коллекции на сайте
После того как вы создали в проекте коллекцию, нужно отобразить ее данные на сайте.
Вы можете добавить блок с элементами коллекции в любое место сайта. Исключение — страница 404 и страница с результатами поиска.
Для отображения данных коллекции на сайте используется виджет Collection.
Виджет отобразится на холсте. Он состоит из спискового элемента Collection List, в котором находятся элементы Collection Item.
Перейдите на вкладку Настройки (правая панель) и откройте список Источник данных. По умолчанию выбрано значение «Нет», т.к. виджет не привязан к коллекции.
Выберите в списке вашу коллекцию.
Готово! Виджет Collection привязан к вашей коллекции — на холсте отображаются названия ее элементов.
Таким образом, вы подготовили структуру, в которой будут размещаться данные из коллекции.
Теперь в созданную на холсте структуру нужно добавить элементы интерфейса, в которых будут отображаться данные полей коллекции.
Например, для элемента коллекции «Услуги» понадобятся два текстовых элемента (название услуги и стоимость) и картинка.
Для этого выберите в слоях Collection Item и добавьте в него нужные элементы.
Когда вы добавите нужные элементы интерфейса в один из элементов коллекции, они автоматически добавятся и во все остальные.
Чтобы данные из коллекции передавались в соответствующие элементы интерфейса, нужно создать между ними связь.
Элементы внутри списковых виджетов (List, Block List, Accordion, Tabs) нельзя привязать к полям коллекции.
1) Выберите один из элементов внутри Collection Item на холсте или в слоях (например, Text). Перейдите в Настройки (правая панель) и в разделе Динамические данные откройте список Связанное поле. По умолчанию выбрано значение «Нет», т.к. элемент не привязан к какому-либо полю.
2) Выберите из списка поле, которое нужно привязать к элементу (например, «Название»).
- Поле типа Дата
Поле типа Дата нужно привязывать к текстовому элементу.
- Поле типа Ссылка
Для каждого элемента коллекции можно добавить ссылку или кнопку для перехода на страницу, ссылку на которую вы задали при создании коллекции.
Для этого поле типа Ссылка нужно связать с элементом, для которого есть настройка перехода по ссылке — кнопкой, Text Link или Link Block.
Для этих элементов не нужно делать привязку через опцию Связанное поле, а нужно настроить действие при клике. Для этого в опции Настройки действия выберите Действие — Переход по ссылке. Далее кликните на иконку коллекции и выберите из списка поле Ссылка.
3) Данные из выбранного поля автоматически подтянутся в этот элемент на холсте для всех элементов коллекции. В соответствующем слое отобразится иконка, которая показывает, что элемент связан с полем коллекции.
4) Аналогичным образом привяжите к остальным элементам соответствующие поля коллекции.
Пока вы не привяжете к элементу поле коллекции, он остается статичным и данные в нем не будут динамически обновляться.
Готово! Данные всех элементов коллекции отображаются на странице. Остается сделать нужный дизайн.
Сохраните страницу (Ctrl + S) и нажмите кнопку Опубликовать или воспользуйтесь горячими клавишами Ctrl + Shift + S (сохранение + публикация).
Вы можете добавлять любое количество виджетов Collection в разные места сайта.
Например, на главной странице можно отобразить краткий список услуг, а на отдельной странице — полную коллекцию с подробным описанием.
Вы создаете коллекцию один раз и можете привязать ее к нескольким виджетам Collection, размещенным в разных местах сайта. При этом данные в коллекцию нужно будет внести только один раз — они будут автоматически подтягиваться на разные страницы.