PageBuilder
Визуальный конструктор секций для MODX 3: черновик и публикация без перезаписи content ресурса
Вопросы и ответы
Блок частых вопросов. Каждая строка содержит заголовок вопроса и текст ответа. Ответ может включать HTML из richtext.
Зачем FAQ в PageBuilder
- Вопросы правятся списком в инспекторе, порядок перетаскиванием
- Ответ может быть richtext с ссылками и списками
- Один блок закрывает типовые возражения на лендинге
Типичные страницы
- На странице поддержки или в базе знаний
- На лендинге: снятие возражений перед формой
- На карточке товара: доставка, гарантия, уход
Примеры страниц
- Лендинг: Hero → Преимущества → FAQ → Форма
- Товар: Описание → FAQ → Похожие товары
Структура repeater
Repeater Вопросы: в каждой строке Вопрос и Ответ. Порядок строк = порядок на сайте.
Похожие секции
- Вкладки для длинных текстов вместо длинного FAQ
- Текстовый блок, если нужен один текст без структуры воп/ответ
Параметры блока
| Параметр | Значение |
|---|---|
| key | faq |
| Слой | Free |
| Категория | контент (content) |
| Chunk | pagebuilder_faq |
| Требования | — |
Поля в редакторе
Заполните поля в инспекторе секции на ресурсе. Описание типов полей: справочник типов.
Заголовок (title)
Тип text. Необязательное.
Вопросы (items)
Тип repeater. Обязательное. Повторяющиеся строки. Кнопка «Добавить» в инспекторе.
В каждой строке:
| Поле | Тип | Подпись | Обязательно |
|---|---|---|---|
question | text | Вопрос | да |
answer | richtext | Ответ | да |
Что видит посетитель
Секция pb-faq со списком вопросов. Разметка готова под аккордеон через pagebuilder-sections.js или статичный список в теме.
Данные секции
Пример JSON после сохранения секции. Для media, video и map значения на выводе могут быть обогащены:
json
{
"title": "Заголовок секции",
"items": [
{
"_rowId": "00000000-0000-4000-8000-000000000001",
"question": "Как оформить заказ?",
"answer": "<p>Добавьте товар в корзину и перейдите к оформлению.</p>"
}
]
}Шаблон chunk
Fenom chunk pagebuilder_faq:
fenom
<section class="pb-section pb-section--faq pb-faq{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="faq"{if $id} id="pb-{$id|escape}"{/if}>
<div class="pb-section__inner pb-faq__inner">
{if $title}
<h2 class="pb-heading pb-faq__title">{$title|escape}</h2>
{/if}
<div class="pb-faq__list">
{foreach $items as $item}
<details class="pb-faq__item">
<summary class="pb-faq__question">{$item.question|escape}</summary>
<div class="pb-faq__answer pb-richtext__content">{$item.answer}</div>
</details>
{/foreach}
</div>
</div>
</section>JSON-определение
core/components/pagebuilder/sections/faq.json