Эта статья посвящена одному из способов сделать в 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);?>Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.
