Только пользователям разрешено входить в центр администрирования. Войти
Формы - Всплывающие окна
Внимание! Для работы всплывающих окон с формами необходимо разместить код скрипта 1 раз. Создайте «Блок/Меню» (разметив в Шапке/Hedaer, служебных тегах или Footer сайта). :
Данный скрипт не установлен по умолчанию для увеличения производительности и большей гибкости сайтов.
После установки скрипта вы можете сгенерировать ссылку для всплывающего окна.
Рекомендуем вставить данный код в «Блок/Меню» с вашими другими скриптами.
Внимание! При создании Стандартной формы упрощенным способом, данный код будет установлен автоматически, в «Блок/Меню» с именем «CODE_FORM_SCRIPT_FILE».
Code: html |
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script> |
Данный скрипт не установлен по умолчанию для увеличения производительности и большей гибкости сайтов.
После установки скрипта вы можете сгенерировать ссылку для всплывающего окна.
Рекомендуем вставить данный код в «Блок/Меню» с вашими другими скриптами.
Внимание! При создании Стандартной формы упрощенным способом, данный код будет установлен автоматически, в «Блок/Меню» с именем «CODE_FORM_SCRIPT_FILE».
Инструкция:
Внимание! Для работы всплывающих окон с формами необходимо разместить код скрипта 1 раз. Создайте «Блок/Меню» (разметив в Шапке/Hedaer, служебных тегах или Footer сайта).Code: html |
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script> |
При автоматическом создании формы так же будет добавлен код (блок/меню с именем CODE_FORM_SCRIPTS_FILE) с кодом для всплывающих окон, с разными вариантами полей для отправки данных в созданную форму. Путь к файлу с кодом - <script type="text/javascript" src="/templates/scripts/code_form_scripts.js" async></script>. Если вам необходимо изменить файл, то откройте его и скопируйте код в созданный ранее Блок/Меню в теги <script>CODE</script>. Для работы встроенных функций, например, всплывающие форы в Мобильной версии, обязательно необходимо установить указанный выше код.
Пример кода кнопок для вслывающих форм:
<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="280" data-dialog-form_title="Callback" data-dialog-title="Заказать обратный звонок" data-dialog-whatform="Форма заказать обратный звонок с кнопки в ... сайта" data-dialog-buttontext="Отправить">Обратный звонок</div>
<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-dialog-form_title="Задать вопрос" data-dialog-title="Задать вопрос" data-dialog-whatform="Форма Задать вопрос с кнопки в ... сайта" data-dialog-buttontext="Отправить">Задать вопрос</div>
Изменяя или дополняя следующие значения, при отправке формы, будут указаны соответствующие данные.
Данные необходимо указывать у кнопок, вызывающих всплывающие окошки.
- "data-dialog-form_id" - ID формы
- "data-dialog-width" - ширина всплывающего окна
- "data-dialog-height" - высота всплывающего окна
- "data-dialog-title" - заголовок диалогового окна
- "data-dialog-form_title" - примечание о заявке, добавляется в статистику продаж
- "data-dialog-whatform" - с какой формы заявка (положение или свои данные)
- "data-dialog-productid" - ID товара, если заявка о конкретном продукте.
- "data-dialog-product_num" - количество добавляемого товара, если заявка о конкретном продукте.
- "data-dialog-varietyid" - разновидность товара, если заявка о конкретном продукте.
- "data-dialog-formprice" - цена заявки или товара
- "data-dialog-buttontext" - текст кнопки внутри окна
- "data-dialog-modify-text" - автозамена текста заявки (комментария). Используется для отправки дополнительной информации, которую можно предваритиельно сформировать с помощью Javascript.
- "data-close-button" - текст кнопки закрытия окна (отображается только если указано значение)
- "data-dialog-form-hide-fields" - Скрыть елементы в форме (список, разделитель `|`)
-
Дополнительные параметры (автозаполнение формы):
- "data-dialog-form-autosubmit" - 1-включить
- "data-dialog-form-required-class" - обязательные поля для заполнения (список, разделитель `|`) (**)
- "data-dialog-form-autosubmit-replace-class" - (список, разделитель `|`) (***)
- "data-dialog-form-required-class-alert" - сообщения об ошибке если не заполнено поле data-dialog-form-required-class (**) (список, разделитель `|`)
*** - Например значения полей data-dialog-form-required-class (**) будут перезаписаны найденными значениями на странице, элементами из списка data-dialog-form-autosubmit-replace-class (***).
Если поля data-dialog-form-required-class (**) не заполнены, то всплывает сообщение указанное в поле data-dialog-form-required-class-alert.
Данная функция полезна в том случае, когда вы хотите создать поле для заполнения, при нажатии на которое будет всплывать форма и сразу отправляться с заменой данных из созданного ранее поля.
Пример кода - code_form_scripts.js
Мои формыНазад