К содержимому
Вывод в теме

Вывод в теме

Обновлено

Квиз на странице

Добавьте вызов в Smarty-шаблон темы дизайна. Во всех примерах 3 — пример ID формы; замените его своим.

{if !empty($wa->requests->quizformsPlugin->version())}
    {$wa->requests->quizformsPlugin->render(3)}
{/if}

render() выводит форму и подключает ресурсы приложения. Обёртка version() проверяет доступность плагина. Если форма отсутствует или не находится в режиме квиза, этот хелпер возвращает пустую строку.

Квиз подбора освещения на странице Встроенный квиз показывает третий шаг из пяти, варианты работ и кнопки навигации.

Квиз в модальном окне

{if !empty($wa->requests->quizformsPlugin->version())}
    {$wa->requests->quizformsPlugin->modal(3, [
        'button_text' => 'Подобрать товар',
        'width' => '720px'
    ])}
{/if}
Параметр modal() Назначение По умолчанию
show_button Показывать встроенную кнопку открытия true
button_text Текст встроенной кнопки Название формы
button_class Дополнительный CSS-класс встроенной кнопки Пустая строка
trigger CSS-селектор или массив селекторов собственных элементов открытия Не задан
width Ширина окна: compact, default, wide, xwide либо размер с единицей, например 720px Из настроек формы; если подходящей ширины нет — default

Для размера поддерживаются единицы px, %, rem, em, vw, vh, vmin, vmax. Корректный width из вызова имеет приоритет над настройками формы; некорректное значение пропускается.

Своя кнопка открытия

{if !empty($wa->requests->quizformsPlugin->version())}
    <button type="button" class="js-quiz-open">Начать подбор</button>
    {$wa->requests->quizformsPlugin->modal(3, [
        'show_button' => false,
        'trigger' => '.js-quiz-open',
        'width' => 'wide'
    ])}
{/if}

trigger подключается полным хелпером modal(). Одного добавления кнопки в тему без вывода окна недостаточно.

Последний шаг квиза в окне В модальном окне показаны контактные поля последнего шага и кнопка отправки.

Проверка режима формы

{if !empty($wa->requests->quizformsPlugin->version())}
    {if $wa->requests->quizformsPlugin->isQuiz(3)}
        {$wa->requests->quizformsPlugin->render(3)}
    {/if}
{/if}

isQuiz() проверяет существование формы и её режим. Проверка активности и вывод формы выполняются приложением при рендеринге.

Переопределение шаблонов

В корне активной темы создайте копию нужного шаблона плагина:

Исходный шаблон в каталоге плагина Файл в корне темы
templates/FrontendQuiz.html quizforms_plugin.quiz.html
templates/FrontendQuizModal.html quizforms_plugin.modal.html

Код плагина ищет эти переопределения в темах приложений «Магазин» (shop) и «Сайт» (site). Сохраните структуру исходного шаблона: идентификаторы формы, классы полей и разделителей, конфигурацию квиза и подключение скриптов. JavaScript использует их для построения шагов.

Основные переменные: $form — форма, $fields — подготовленные поля, $form_settings — настройки плоским массивом, $captcha_html — готовая капча, $captcha_enabled — признак её включения, $app_url — адрес статики приложения, $css_disabled — запрет подключения CSS. Для окна также назначаются $show_button, $button_text, $button_class, $modal_width, $modal_width_custom.

Удаление файла переопределения возвращает стандартный шаблон плагина. После обновления плагина сравнивайте свою копию с актуальным шаблоном.

Несколько квизов и стили

На одной странице используйте разные ID форм для разных квизов. JavaScript хранит состояние по ID формы, поэтому повторный вывод одного ID не создаёт независимый экземпляр.

Настройка формы «Отключить CSS» отключает подключение стилей, но сохраняет скрипт квиза. В этом случае оформление, скрытие неактивных шагов и другие необходимые CSS-правила должна обеспечить тема.