Форма приложения «Заявки» в теме Seller 2.0

Формы на сайте в Seller 2.0 выводит приложение Заявки — тема интегрирована с ним из коробки. Собственного модального окна с формой, как в Seller 1.0, в теме нет: разметки с идентификатором sellerFeedbackModal и обработчика ссылок #sellerFeedbackModalShow в Seller 2.0 не осталось.

Настройки темы

Раздел панели темы Приложения и плагины → Приложение Заявки:

Настройка	Идентификатор	Описание
Статус приложения	`apps__requests_enabled`	Включает интеграцию, включён по умолчанию
ID формы для модального окна	`apps__requests_modal_form_id`	Форма добавляется на все страницы скрытым модальным окном. Пустое поле — окно не выводится
CSS-селектор элементов, открывающих модальное окно	`apps__requests_modal_trigger`	По умолчанию `.js-requests-modal`. Несколько селекторов перечисляются через запятую
ID формы для плавающей кнопки	`apps__requests_float_form_id`	Кнопка выводится, если в настройках самой формы в приложении «Заявки» включена плавающая кнопка

ID формы виден в списке форм приложения «Заявки».

При включённой настройке и заполненном ID тема выводит окно в конце страницы (index.html):

{* REQUESTS APP *}
{if $wa->requests && !empty($theme_settings["apps__requests_enabled"])}
    {if !empty($theme_settings["apps__requests_modal_form_id"])}
        {$requests_modal_options = ["show_button" => false]}
        {if !empty($theme_settings["apps__requests_modal_trigger"])}
            {$requests_modal_options["trigger"] = $theme_settings["apps__requests_modal_trigger"]}
        {/if}
        {$wa->requests->renderModal($theme_settings["apps__requests_modal_form_id"], $requests_modal_options)}
    {/if}

    {if !empty($theme_settings["apps__requests_float_form_id"])}
        {$wa->requests->renderFloatingButton($theme_settings["apps__requests_float_form_id"])}
    {/if}
{/if}

Стили и скрипт приложения подключаются один раз на страницу, сколько бы форм на ней ни было.

Как открыть модальное окно

1. Элемент с классом из настройки

Добавьте класс js-requests-modal (или свой, если поменяли селектор в настройках) любому элементу:

<button type="button" class="js-requests-modal btn btn-theme btn-base">
    Заказать звонок
</button>

Скрипт приложения сам подхватывает все элементы с атрибутом data-requests-modal, вне зависимости от настройки селектора. В значении — ID формы:

<a href="#" data-requests-modal="3">Задать вопрос о товаре</a>

Этот способ удобен, когда на странице нужны разные формы: окно для каждой из них выводится своим вызовом renderModal.

3. Готовая кнопка приложения

{$wa->requests->modalTrigger(3, "Задать вопрос", "btn btn-theme btn-base")}

Метод отдаёт <button> с классом requests-modal-trigger, нужным атрибутом data-requests-modal и текстом. Если текст не передан — берётся название формы.

Кнопка «Заказать звонок» в шапке

Ссылку в шапке выводят настройки Общие настройки → Организация → Обратная связь: текст (common__company_callback_text), адрес (common__company_callback_link) и CSS-классы (common__company_callback_classes). Чтобы она открывала форму:

В поле адреса замените значение по умолчанию #callback-form на # — этот якорь сам по себе ничего не открывает.
В поле классов впишите js-requests-modal.
В настройках темы укажите ID формы для модального окна.

Так же настраивается пункт «Обратная связь» в блоке «Преимущества»: если у него сохранилась ссылка по умолчанию #sellerFeedbackModalShow, замените её — иначе клик ничего не откроет.

Форма прямо в странице

Модальное окно нужно не всегда: форму можно вывести в контенте страницы или в своём шаблоне.

{$wa->requests->form(3)}

Отличие от модальных окон темы

Собственные модальные окна Seller 2.0 (мобильные фильтры, диалог товара и другие) построены на компоненте Preline HSOverlay и открываются атрибутом data-hs-overlay. Окно «Заявок» к ним не относится — его разметку и поведение полностью контролирует приложение, поэтому data-hs-overlay для него не работает.

Приложение «Форма обратной связи»

Прежняя интеграция с приложением «Форма обратной связи» (easyfeedback) в теме сохранена: при включённой настройке Приложения и плагины → Приложение Форма обратной связи → Статус приложения (apps__easyfeedback_enabled) тема по-прежнему выводит диалог приложения вызовом {$wa->easyfeedback->dialog()}, а открывается он классом easyfeedback-modal-toggler или ссылкой на #easyfeedback-modal. Приложение снимается с продажи, поэтому для новых сайтов используйте «Заявки».

Модальное окно с формой заявки