Битрикс компонент обратная связь ajax

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

Компонент назовем feedback.send

Новый компонент можно размещать в папке bitrix/components или же в папке local/components.

Создадим следующие разделы:

•   local/components/test/feedback.send/templates/.default (папки создаем, если они не существуют)

•   local/components/test/feedback.send/templates/.default/lang/ru– раздел для языковых файлов шаблона

вот код LANG-файла (local/components/test/feedback.send/templates/.default/lang/ru/template.php)

	<?
	$MESS ['NAME'] = "Имя";
	$MESS ['EMAIL'] = "E-mail";
	$MESS ['MESSAGE_TEXT'] = "Текст сообщения";
	$MESS ['WORK_TIME'] = "Вы можете связаться с менеджером в рабочее время с:";
	$MESS ['COMPANY'] = "Выбранная компания:";
	$MESS ['CAPTCHA_TEXT'] = "Введите символы с картинки";
	$MESS ['REFRESH'] = "обновить картинку";
	$MESS ['SEND'] = "отправить";
	?>

Теперь создадим сам компонент. В разделе local/components/test/feedback.send создадим файл component.php

	<?
	if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
	    $arResult['CAPTCHA_CODE'] = $APPLICATION->CaptchaGetCode();
	                $this->IncludeComponentTemplate();
	?>

По сути, этот файл только генерирует captcha и инициализирует и подключает шаблон компонента.В ту же папку поместим файл ajax.php, он будет отвечать за обработку данных и отправку формы:

	<?
	require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");
   if($_REQUEST['get'] == 'captcha')
   {
      echo $code = $APPLICATION->CaptchaGetCode();
   }
   if($_REQUEST['get'] == 'send')
   {
     $error = '';
     if(!$APPLICATION->CaptchaCheckCode($_REQUEST['captcha_word'], $_REQUEST['captcha_sid']))
        $error .="Текст с картинки введен неверно!";
     if($_REQUEST['name']=='')
        $error .= "Поле Имя не заполнено!";
     if($_REQUEST['email']=='' || !check_email($_REQUEST['email']))
        $error .="Поле \"email\" введено неверно<br />";
  
     if($_REQUEST['message']=='')
        $error .="Заполните текст сообщения<br />";             
    
     if($error)
        echo "<span style='color:#ff0000;'>".$error."</span>";
     else
     {
        $arEventFields = array(
           "NAME"                  => $_REQUEST['name'],
           "EMAIL"     => $_REQUEST['email'],
           "MESSAGE"             => $_REQUEST['message'],
           );
        if(CEvent::Send("FEEDBACK_SEND", array(SITE_ID), $arEventFields))
           echo "<span style='color:#0fcf00;'>Сообщение успешно отправлено!</span>";
        else
           echo "<span style='color:#ff0000;'>Ошибка почтового сервера!</span>";
     }
   }                
	?>

Если все поля введены верно, вызывается событие FEEDBACK_SEND:

CEvent::Send("FEEDBACK_SEND", array(SITE_ID), $arEventFields);

Теперь разместим шаблон компонента, для этого в папке local/components/test/feedback.send/templates/.default/

создадим файл template.php:

	<form action="" method="post" class="feedback_form">

	        <input type="hidden" name="get" value="send" />

	        <?if($arResult['SUCCESS']=='Y'){?><span class="success"><?=$arResult['MESSAGE'];?><br /></span><?}?>
	        <?if($arResult['SUCCESS']=='N'){?><span class="error"><?
               foreach($arResult['ERROR'] as $k =>$v)
                      echo $v, "<br />";
	        ?><br /></span><?}?>
	        <div class="item">
               <label><?=GetMessage('NAME');?>:</label><input type="text" name="name" value="" required />
	        </div>
	        <div class="item">
               <label><?=GetMessage('EMAIL');?>:</label><input type="text" name="email" value="" required />
	        </div>
	        <div class="item">
               <label><?=GetMessage('MESSAGE_TEXT');?>:</label><textarea name="message" required></textarea>
	        </div>
	   <div class="item">
               <label><?=GetMessage('CAPTCHA_TEXT');?>:</label>
	       <img src="/bitrix/tools/captcha.php?captcha_sid=<?=$arResult['CAPTCHA_CODE'];?>" alt="CAPTCHA" width="120" class="captcha_img" />  
	<br />               
	       <a href="#" rel="nofollow" class="update"><?=GetMessage('REFRESH');?></a> <br />        <br />  
	       <input type="hidden" name="captcha_sid" value="<?=$arResult['CAPTCHA_CODE'];?>" />
	       <input type="text" name="captcha_word" value="" required/>
	   </div><!-- captcha-holder -->
	        <input type="submit" value="<?=GetMessage('SEND');?>" />
	</form>
	<div class="schema"></div>
	<?
	   CJSCore::Init(array("jquery", "popup"));
	        $ajax_path = str_replace($_SERVER['DOCUMENT_ROOT'],"/",__FILE__);
	        $ajax_path = str_replace("/templates/.default/template.php","/ajax.php",$ajax_path);
	?>
	 <script>
	 $(document).ready(function() {
	    $('.update').on('click', function(){
	    $.ajax({
	     url: '<?=$ajax_path;?>',
	     type: 'post',
	     data: 'get=captcha',
	     success: function(data){
	       $('.feedback_form .captcha_img').attr('src', '/bitrix/tools/captcha.php?captcha_sid=' + data);
	       $('.feedback_form input[name="captcha_sid"]').val(data);
	     }
	    });
	    
	    return false;
	    });
	   
	    $('.feedback_form').on('submit', function(){
               var name = $('input[name="name"]').val();
               var email = $('input[name="email"]').val();
               var message = $('textarea[name="message"]').val();
               var captcha_word = $('input[name="captcha_word"]').val();
               var captcha_sid = $('input[name="captcha_sid"]').val();
	     $.ajax({
                      url: '<?=$ajax_path;?>',
	       type: 'post',
	       data: 'get=send&name='+name+'&email='+email+'&message='+message+'&captcha_word='+captcha_word+'&captcha_sid='+captcha_sid,
	       success: function(data){
                             var popup = new BX.CDialog({
                                'title': 'Отправка формы',
                                'content': data,
                                 'draggable': true,
                                'resizable': false,
                                'width':250,
                                'height':200,
                                'buttons': [BX.CDialog.btnClose]
                             });
                                          
                             popup.Show();
	       }
                     
	     });
                      return false;

	    });
	   });
	   </script>
 

В этом же файле помещен java-скрипт, отвечающий за отправку данных через ajax. По сути, мы сделали все тоже самое что и в предыдущей статье, оформив код компонентом. Теперь достаточно разместить код компонента:

	<?$APPLICATION->IncludeComponent("test:feedback.send", "", Array(
	                false
	);?>

в любом месте, чтобы получить рабочую форму отправки сообщений.