форма обратной связи ajax bitrix
Разработчик на Битрикс и Django
Делаем ajax формы в битрикс на страницах и в всплывающих окнах
Рано или поздно, разработчик 1с-битрикс, задается вопросом: а как же мне сделать аякс форму в битриксе?
Не секрет, что в 1с-битрис «режим AJAX» можно включить практически в каждом компоненте в его настройках, но есть и такие компоненты в которых по каким то причинам нет этой настройки. Например возьмем такой компонент как «Добавление элементов инфоблока», вот код этого компонента:
и как видим в нем нет настройки «режим AJAX». Для того, чтобы форма стала работать с помощью ajax нужно добавить несколько элементов в массив настроек компонента, а именно:
в итоге получаем код компонента
Такой компонент уже можно использовать на страницах вашего проекта, но нам так же может понадобиться открывать форму в всплывающем окне, например fancybox. На странице есть ссылка Открыть форму по которой мы ожидаем получить всплывающее окно с формой и для этого мы делаем следующее:
1. Создаем страницу /form/ajax_form.php для формы и добавляем в нее наш компонент
2. Создаем шаблон «popup» с простым содержимым
В настройках сайта этот шаблон ставим для нашего файла с формой /form/ajax_form.php
3. javascript который откроет наше всплывающее окно.
Хочу заметить, что сначала я пробовал без создания дополнитльеного шаблона для страницы /form/ajax_form.php указывая плолог и епилог чтобы битрикс не вставлял шапку и подвал:
но дело в том, что при клике на кнопку результат открывался в новом окне, а не в сплывающем окне.
Если кто вкурсе как обойтись без созданния шаблона, то отпишитесь пожалуйста.
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
AJAX форма для битрикс
Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!
Большое спасибо за вашу помощь и внимательность к нам!
Хай! Так как груз написания первого урока в категории 1С-Битрикс лег на меня) то придется отдуваться за всех) и для начала сделать урок более приближенный по функционалу к обыденным вещам, к примеру таким как форма обратной связи на Ajax, но с обработкой методами битрикса. В дальнейшем мы подробно рассмотрим, что такое битрикс и с чем его едят) запустив 5-10 обучающих уроков для новичков, дабы каждый мог погрузится в логику этого необычного и массивного фреймворка.
JQuery
Основные моменты прокомментированы в коде, там все очень просто и не нуждается в дополнительном описании.
HTML
Самая обычная форма, как и миллион других, которые мы с вами создавали 🙂
А вот тут уже начнется кое-что интересное.
Данный код мы поместим в файл AJAX-обработчика. Что у нас тут интересного?
Благодаря подключению файла prolog_before.php в битриксе исключается «шаблонная» часть и становятся доступны только библиотеки ядра, компоненты, модули и т.д. На данной странице вы можете делать что угодно и подгружать её в нужный div блок.
Далее мы просто запишем все данные с POST формы в нужный нам массив и передадим его на обработку в метод Send битрикса.
Весь код:
И еще пару слов о самом Битриксе 🙂
Синтаксис:
Параметры:
Вот такое вот легкое первое знакомство с битриксом я решил для вас сделать 🙂 Как видите ничего сложного и дальше будет только интереснее! Подписывайтесь на наш youtube канал, а также в социальных сетях, дабы быть в курсе всех самых новых событий! До встречи!
Как сэкономить на запросах и сделать ajax-формы
Очередной компонент… а зачем?
В обоих случаях вставала одна и так же проблема — формы, запросы, в том числе и капча. Нужно было убрать форму авторизации со страницы, в то же время оставив ее доступной для пользователя.
Так что же он делает?
Решать проблему начали с малого — с формы авторизации. Пусть, мол, на странице в шапке будет ссылка, при нажатии на которую будет по AJAX’у подгружаться настоящая форма входа на сайт. И это действительно хорошее предложение — мы избавимся от одного, пусть и не самого тяжелого компонента при загрузке страницы, а получать его будет только тот, кому действительно надо авторизоваться. О деталях реализации будет сказано ниже, сейчас же только покажем наглядно, что вытворяет компонент intervolga:ajax.component.
Посмотрим на процесс загрузки отдельно взятой страницы отдельно взятым пользователем.
UML обычной загрузки страницы
Как можно увидеть, загрузка страницы происходит синхронно, каждый компонент по очереди подключается, выполняет свои запросы, формирует HTML и возвращает его на страницу. Когда проход закончен, после выполнения эпилога, Битрикс показывает страницу пользователю.
Теперь посмотрим на ту же страницу, но с компонентом intervolga:ajax.component, настроенным на работу с формой авторизации.
UML загрузки страницы с
Наш компонент не делает запросов к БД при загрузке страницы — только выводит ссылку с текстом «Войти» ну или каким укажете в настройках.
За счет этого страница стала легче, делает меньше запросов, и подключает меньше javascript’а (все помнят про форму авторизации через социальные сети?). Красота, одним словом.
Ниже вы можете увидеть другие компоненты, получаемые аналогичным образом по AJAX.
Форма обратной связи
Детальное описание новости
Подводя итог, можно смело заявить: разработанный компонент intervolga:ajax.component позволяет убрать со страницы запросы любого компонента, сделав его доступным во всплывающем окне.
Хм, а как же он это делает?
Остановились на промежуточном решении, которое объединяет и вариант. Был создан свой компонент, но и без своего шаблона для bitrix:system.auth.form не обошлось.
Требовалось по нажатию на ссылку делать и помещать полученный HTML во всплывающую форму. Это было наименьшей проблемой — мы воспользовались для всплывающих форм.
В ссылке, по которой происходит переход, зашивается ID нашего компонента (мы же не хотим, нажав на кнопку «Войти» увидеть на сайте форму «Оставьте отзыв». Название параметра, в котором передается ID, можно настраивать в компоненте.
Запрос делается на ту же самую страницу, но с дополнительным параметром, например AJAX_IID=bitrixsystemauthform. Компонент проверяет этот параметр, а так же заголовок HTTP_X_REQUESTED_WITH. И это не очень безопасно, факт остается фактом. Заголовки чудесно подделываются. Но этот вариант ничем не хуже, чем решение передавать секретный ключ в запросе в другой реализации авторизации от Антона Долганина. Ключ подделать еще проще.
В результате, удалось сделать полноценную обертку — при настройке intervolga:ajax.component вы выбираете любой компонент и настраиваете его тут же. Более наглядно — на скриншоте ниже.
А так выглядит код, вызывающий intervolga:ajax.component.
Чтобы не путать настройки нашего intervolga:ajax.component с теми, которые будут переданы во внутренний компонент — к параметрам внутреннего добавили префикс «INNER_».
Таким образом мы умудрились не накопипастить, и создать универсальный способ подключения любых компонентов (кстати, в настройках intervolga:ajax.component нельзя выбрать intervolga:ajax.component как внутренний компонент).
Изначальный вариант — подключать script.js, styles. css и component_epilog. php внутреннего компонента был не очень успешен. Тогда сделали проще — печать стилей и скриптов перенесли из head в область сразу за кодом внутреннего компонента, то есть стили шли одной порцией вместе с кодом, который должны были стилизовать. Очень удобно.
И что теперь с этим делать?
Как сделать AJAX формы 1с-Битрикс в всплывающих окнах
Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
— можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
— всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
— весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.
Готовим javascript
Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).
Готовим форму
Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php — он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем. на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘ IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.
Все что выше этого куска кода заменяем на
Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.
Все что ниже подключения компонента заменяем на
Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.
Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)
Если нет настройки «Включить режим AJAX»
Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:
Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.
Всплывающее окно с формой обратной связи Битрикс
Давайте сделаем всплывающее окно с формой обратной связи. Вообще можно сделать всплывающее окно с любым компонентом системы управления, просто выбрал обратную связь как наиболее простой пример. Всплывающее окно будем делать без скриптов- на чистом CSS3. Вы сможете применить этот способ, например для авторизации или регистрации пользователя, быстрый просмотр товара и т.д.
Создание формы обратной связи
Далее переходим в режим «Редактирование исходного кода» и обворачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):
Добавляем в style.css шаблона вот такие стили:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body:
Небольшая фенька.
Можно принудительно «нажимать» на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт: