В HTML-блоке можно разместить собственную разметку и подставить данные ресурсов. Те же выражения работают в режиме Своя вёрстка, который оформляет всю страницу.
Добавьте HTML-блок
- Откройте модуль бронирования и выберите страницу.
- В режиме Конструктор добавьте блок HTML в нужную колонку.
- Выберите блок, откройте его настройки и нажмите Редактировать HTML.
- Введите разметку. Нажмите Внести в черновик, затем примените настройки группы.
- Сохраните модуль и проверьте результат в предпросмотре.
В режиме Своя вёрстка HTML редактируется непосредственно в редакторе страницы. Для вставки календаря, формы и других системных элементов используйте кнопку Блок: как работать со своей вёрсткой.
Посмотрите доступные данные
Нажмите Доступные данные в диалоге редактирования HTML-блока или над редактором Своей вёрстки.
В окне доступны:
- описание переменных;
- JSON одного ресурса для примера и кнопка Копировать JSON;
- примеры вывода текста, характеристик, фотографий, услуг, списка ресурсов и условий;
- кнопки копирования каждого примера.
Вставьте скопированный пример в HTML и замените разметку вокруг выражений на свою. Закрытие окна данных не изменяет HTML. Если копирование недоступно, выделите нужный текст и скопируйте вручную.
Какие переменные использовать
| Переменная | Содержимое |
|---|---|
page |
Название текущей страницы, её адрес и этап. Например, page.title. |
module |
Название и описание модуля: module.name, module.description. |
resource |
Текущий ресурс: название, описание, адрес, фото, характеристики, услуги, правила гостей и цены. На странице Поиск и список значение равно null. |
resources |
Первые 50 ресурсов подборки модуля для вывода циклом. В редакторе массив содержит только один пример. На публичной странице цикл обрабатывает подборку. |
Точные имена и доступные значения смотрите в JSON. Незаполненные данные могут быть пустой строкой, null или пустым массивом.
Выведите название и адрес домика
На странице Бронирование используйте resource:
<h1>{{resource.name}}</h1>
<p>{{resource.description}}</p>
{{#if resource.address}}
<p>Адрес: {{resource.address}}</p>
{{/if}}
{{resource.name}} заменяется названием. Условие if выводит абзац с адресом только при наличии значения. Отсутствующее поле выводится как пустая строка.
Выведите характеристики и фотографии
Для характеристик используйте массив resource.resource_attributes. Поле value_label содержит значение, подготовленное для показа, включая единицу измерения, если она задана.
<ul>
{{#each resource.resource_attributes}}
<li>{{name}}: {{value_label}}</li>
{{/each}}
</ul>
{{#each resource.images}}
<img src="{{url}}" alt="Фото ресурса">
{{/each}}
Внутри each имена полей относятся к текущему элементу массива. Если массив пуст, его содержимое не выводится.
Выведите услуги
{{#each resource.service_links}}
<p>{{service.name}} — {{price}} ₽</p>
{{/each}}
price — цена подключённой услуги для ресурса. Пример показывает перечень услуг; для выбора услуг при оформлении используйте стандартные блоки бронирования.
Выведите список ресурсов
На странице Поиск и список используйте resources:
{{#each resources}}
<article>
<h2>{{name}}</h2>
<p>{{price_from_formatted}}</p>
{{#each resource_attributes}}
<p>{{name}}: {{value_label}}</p>
{{/each}}
</article>
{{else}}
<p>Нет ресурсов для отображения.</p>
{{/each}}
Внешний цикл перебирает ресурсы, вложенный — характеристики каждого из них. В админке показан один пример, поэтому проверяйте результат на странице модуля. На публичной странице выводятся первые 50 ресурсов в порядке подборки, затем по названию; остальные доступны через стандартный Список вариантов с пагинацией.
Как обновляется содержимое
Данные подставляются на сервере при подготовке страницы. Посетитель получает готовый HTML; дополнительных запросов из браузера для подстановок нет.
HTML-шаблон не обновляется при изменении дат, гостей или услуг. Цикл resources не заменяет интерактивный Список вариантов с фильтрами и пагинацией. Для актуального расчёта стоимости, доступности и создания брони сохраняйте стандартные системные блоки.
Обычные выражения {{...}} выводят значения как текст с HTML-экранированием. Разметку пишите вокруг выражений. Не используйте подстановки для генерации JavaScript или CSS.
Если редактор сообщает Ошибка HTML-шаблона, проверьте парность {{#each}} / {{/each}}, {{#if}} / {{/if}} и фигурные скобки. Ошибочный фрагмент не выводится на публичной странице. Исходный код сохраняется с выражениями, поэтому его можно исправить и сохранить снова.