bitrix:main.feedback через AJAX форма обратной связи без перезагрузки страницы

bitrix:main.feedback через AJAX

Простой совет, как реализовать отправку письма в Битриксе через стандартный компонент bitrix:main.feedback без перезагрузки страницы посредством AJAX.

Стандартный вызов компонента примерно такой:

<?$APPLICATION->IncludeComponent(
	"bitrix:main.feedback",
	".default",
	array(
		"USE_CAPTCHA" => "Y", // [Y|N] При отмеченной опции для неавторизованных пользователей будет использоваться CAPTCHA при создании сообщений.
		"OK_TEXT" => "Спасибо, ваше сообщение принято.", // Задается текст сообщения, выводимый пользователю после отправки.
		"EMAIL_TO" => "info@mail.ru", //Задается E-mail, на который будет отправлено письмо (будет отображен в форме для отправки сообщений в поле Ваш E-mail).
		"REQUIRED_FIELDS" => array( // Указываются поля формы, которые будут обязательными для заполнения.
			0 => "EMAIL",
			1 => "MESSAGE",
		),
		"EVENT_MESSAGE_ID" => array( //Указывается почтовый шаблон, на основе которого будут отправляться письма.
			0 => "7",
		)
	),
	false
);?>

На деле почти все компоненты Битрикс поддерживают AJAX и если в свойствах компонента эти параметры не отображаются, то их можно прописать самому в коде вызова компонента

"AJAX_MODE" => "Y", // [Y|N] При установленной опции для компонента будет включен режим AJAX.
"AJAX_OPTION_SHADOW" => "N", // [Y|N] Затемнять область
"AJAX_OPTION_JUMP" => "N", // [Y|N] Если пользователь совершит AJAX-переход, то при установленой опции по окончании загрузки произойдет прокрутка к началу компонента.
"AJAX_OPTION_STYLE" => "Y", // [Y|N] Если параметр принимает значение "Y", то при совершении AJAX-переходов будет происходить подгрузка и обработка списка стилей, вызванных компонентом.
"AJAX_OPTION_HISTORY" => "N", //[Y|N] Когда пользователь выполняет AJAX-переходы, то при включенной опции можно использовать кнопки браузера Назад и Вперед.

Получается форма обратной связи работает через AJAX

<?$APPLICATION->IncludeComponent(
	"bitrix:main.feedback",
	".default",
	array(
		"AJAX_MODE" => "Y",
		"AJAX_OPTION_SHADOW" => "N",
		"AJAX_OPTION_JUMP" => "N",
		"AJAX_OPTION_STYLE" => "Y",
		"AJAX_OPTION_HISTORY" => "N",
		"USE_CAPTCHA" => "Y",
		"OK_TEXT" => "Спасибо, ваше сообщение принято.",
		"EMAIL_TO" => "info@mail.ru",
		"REQUIRED_FIELDS" => array(
			0 => "EMAIL",
			1 => "MESSAGE",
		),
		"EVENT_MESSAGE_ID" => array(
			0 => "7",
		)
	),
	false
);?>

bitrix:main.feedback через AJAX + вплывающее окно

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

Для реализации всплывающего окна нужно воспользоваться специальным плагином, например FancyBox, Вам необходимо скачать и загрузить его на ваш сайт. После чего подключить его в шаблоне сайта либо на той странице, где будет располагаться ссылка для вызова вплывающего окна.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(function(){   // ссылка для вызова всплывающего окна должна иметь класс "popup"
  $('a.popup').fancybox(
  {
    'overlayShow' : true,
    'overlayOpacity' : 0.8,
    'scrolling' : 'no',
    'titleShow': false
  });
});
</script>
<a class="popup" href="/popup.php">Открыть окно</a>

Содержимое страницы popup.php с компонентом Битрикс у которого включен режим AJAX, в противном случае будет перезагружена вся страница сайта и мы не узнаем, удалось ли выполнить команду

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>
<div class="pop">
<h2>Форма обратной связи</h2>
<?$APPLICATION->IncludeComponent(
	"bitrix:main.feedback",
	".default",
	array(
		"AJAX_MODE" => "Y",
		"AJAX_OPTION_SHADOW" => "N",
		"AJAX_OPTION_JUMP" => "N",
		"AJAX_OPTION_STYLE" => "Y",
		"AJAX_OPTION_HISTORY" => "N",
		"USE_CAPTCHA" => "Y",
		"OK_TEXT" => "Спасибо, ваше сообщение принято.",
		"EMAIL_TO" => "info@mail.ru",
		"REQUIRED_FIELDS" => array(
			0 => "EMAIL",
			1 => "MESSAGE",
		),
		"EVENT_MESSAGE_ID" => array(
			0 => "7",
		)
	),
	false
);?>
</div>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php")?>

Где:

• prolog_before.php - необходим для подключения системных файлов Битрикса без оформления шапки шаблона
• ajax.js - подключаем для работы компонента в AJAX-режиме .
  
• epilog_after.php - необходим для подключения системных файлов без оформления футера сайта.

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