Коллекции (CMS)

Динамические страницы коллекции

13min

Что такое динамические страницы

Динамические страницы автоматически генерируются на основе данных из коллекций. Для каждого элементы коллекции создается отдельная страница, на которую можно выводить данные из его полей.

Динамическая страница представляет собой шаблон дизайна для всех страниц элементов. Дизайн нужно сделать только для одной из страниц, ко всем остальным он применится автоматически. Таким образом, вы получите набор страниц коллекции, одинаковых по дизайну, но разных по контенту.

В Taptop вы можете сделать любой дизайн динамической страницы, полностью кастомизировав все элементы.

Пример:

1. Добавляем динамическую страницу для коллекции «Услуги». Для каждой услуги создается отдельная страница.

2. Делаем дизайн для одной из страницы услуг — он автоматически применится ко всем страницам услуг.

В чем преимущества динамических страниц

  • Автоматическое создание новых страниц. Если вы добавляете в коллекцию новый элемент, для него автоматически создается новая страница. Например, если добавить в таблицу 100 услуг, то будет создана страница для каждой из них — на сайт добавится 100 страниц.
  • Автоматическое обновление дизайна на всех страницах. Если вы поменяете дизайн на странице одного элемента, то поменяется дизайн всех страниц элементов в коллекции.

Создание динамических страниц

Если вам не нужны отдельные страницы для каждого элемента коллекции, то создавать динамические страницы не нужно.

1. Добавьте динамическую страницу

Перейдите на вкладку Страницы (левая панель) и нажмите кнопку Новая страница. Выберите в списке — CMS страница, затем — название вашей коллекции и кликните на пункт Динамическая страница.

Document image


В проекте будет создан набор динамических страниц — по одной для каждого элемента коллекции.

В структуре страниц это выгладит так — динамические страницы вложены в индексируемую страницу вашей коллекции, а также помечены специальной иконкой, показывающей связь с коллекцией.

Document image


Если для коллекции еще не создана индексируемая страница, то при добавлении динамических страниц они будут размещаться в папке с названием коллекции.

Document image


Просмотреть список всех динамических страниц коллекции, а также переключаться между ними, можно с помощью списка, расположенного над холстом.

Document image


2. Добавьте на страницу нужные элементы интерфейса

Страница элемента коллекции изначально пустая — на ней нет виджета Collection, т.к. здесь будут отображаться только поля конкретного элемента.

Вам нужно добавить на холст элементы, в которых будут отображаться данные полей коллекции. 

Чтобы создать нужный дизайн страницы, вы можете сделать любую структуру — добавить на холст блоки Section, Container и т.п., а потом разместить в них нужные элементы.

Для коллекции «Услуги» нужны два текстовых элемента и картинка.

Document image


Добавленные элементы появятся на всех динамических страницах коллекции.

3. Привяжите к элементам поля коллекции

Чтобы данные из коллекции передавались в соответствующие элементы, нужно создать между ними связь.

Для этого выберите один из элементов на холсте или в слоях (например, Text). Перейдите в Настройки (правая панель) и в разделе Динамические данные откройте список Связанное поле. По умолчанию выбрано значение «Нет», т.к. элемент не привязан к какому-либо полю.

Document image


Выберите из списка поле, которое нужно привязать к элементу (например, «Название»).

Document image


Данные из выбранного поля автоматически подтянутся в этот элемент на холсте. В соответствующем слое появится иконка, которая показывает, что элемент связан с полем коллекции.

Document image


Аналогичным образом привяжите к остальным элементам соответствующие поля коллекции.

Пока вы не привяжете к элементу поле коллекции, он остается статичным и данные в нем не будут динамически обновляться.

Document image


Готово! Динамические страницы коллекции созданы.

На каждую страницу элемента коллекции будут подтягиваться данные, которые ему соответствуют. Это можно проверить, переключаясь между динамическими страницами с помощью списка над холстом.

Document image




Document image




4. Сохраните изменения и опубликуйте страницу

Чтобы все изменения применились, сохраните страницу (Ctrl + S) и нажмите кнопку Опубликовать или воспользуйтесь горячими клавишами Ctrl + Shift + S (сохранение + публикация).

Document image


У динамических страниц нет единого URL, потому что для каждой страницы он формируется отдельно на основе слага коллекции и слага элемента. Поэтому когда вы публикуете динамическую страницу, то URL в попапе не отображается.

Настройки динамической страницы

Чтобы перейти в настройки, кликните на иконку справа от названия страницы. 

Document image


Откроется панель настроек страницы.

Document image


Чем отличаются настройки динамической страницы от стандартной

  • Есть поле Коллекция с названием коллекции, на основе которой создана страница. Его нельзя редактировать.
  • Поле Слаг нельзя изменить — значение формируется автоматически на основе слага элемента коллекции.
  • Поле Метатег Title (Название) нельзя изменить — значение берется из поля Title элемента коллекции.
  • Страницу нельзя дублировать и сделать главной.