Как сделать AJAX формы 1с-Битрикс в всплывающих окнах

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
- можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
- всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
- весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.

Готовим javascript

Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(function() {
// ссылка для вызова окна должна иметь класс "popup"
$('a.popup').fancybox({
'overlayShow': false, // значения параметров можно посмотреть на сайте разработчика
'padding': 0,
'margin' : 0,
'scrolling' : 'no',
'titleShow': false,
'type': 'ajax',
'href': '/ajax_popup.php' // описание скрипта будет дано ниже по тексту:)
});
});
</script>
<a class="popup" href="">Открыть окно</a>

Готовим форму

Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php — он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем!!! на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘<?$APPLICATION->IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.

Все что выше этого куска кода заменяем на

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>

Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.

Все что ниже подключения компонента заменяем на

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.

Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)

Если нет настройки «Включить режим AJAX»

Заставить работать в режиме AJAX можно практически любой компонент в системе. Если нет необходимой группы параметров в окне настроек, то можно поступить 2 способами — добавить нужные параметры в .parameters.php шаблона компонента (об этом можно почитать в документации), или вписать напрямую в код вызова строки:

"AJAX_MODE" => "Y",  // режим AJAX
"AJAX_OPTION_SHADOW" => "N"// затемнять область
"AJAX_OPTION_JUMP" => "N"// скроллить страницу до компонента
"AJAX_OPTION_STYLE" => "Y"// подключать стили
"AJAX_OPTION_HISTORY" => "N",

Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:

<?$APPLICATION->IncludeComponent("bitrix:iblock.element.add.form"""array(
"IBLOCK_TYPE" => "catalog",
"IBLOCK_ID" => "7",
// ... куча свойств ...
"CUSTOM_TITLE_DETAIL_PICTURE" => "",
"AJAX_MODE" => "Y",  // режим AJAX
"AJAX_OPTION_SHADOW" => "N"// затемнять область
"AJAX_OPTION_JUMP" => "N"// скроллить страницу до компонента
"AJAX_OPTION_STYLE" => "Y"// подключать стили
"AJAX_OPTION_HISTORY" => "N",
),
false
);?>

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