Матвей Земсков

Заметки веб-мастера

Создание компонента «Заказ обратного звонка» для CMS «1С-Битрикс»

Используемые инструменты и технологии:

  • HTML, CSS
  • jQuery, AJAX
  • PHP, Bitrix Framework
 

Описание:

Форма заказа обратного звонка в последнее время пользуется популярностью. Поэтому я решил создать компонент «Заказ обратного звонка» для CMS «1С-Битрикс». К тому же бесплатного решения в каталоге готовых решений я не нашел. Компонент будет работать с любой редакцией системы, начиная от редакции «Старт».

Компонент «Заказ обратного звонка» представляет из себя всплывающую форму, включающую в себя следующие поля:

  • Имя посетителя
  • Телефон посетителя
  • Удобное время для звонка

Также настройки компонента «Заказ обратного звонка» позволяют добавлять в форму поле для ввода сообщения от посетителя.

У компонента есть возможность включения защиты от автоматических сообщений (CAPTCHA) для неавторизованных пользователей.

Компонент имеет возможность сохранять данные от посетителей в информационном блоке.

Скачать компонент «Заказ обратного звонка»

Инструкция по установке:

  1. Скачайте архив с компонентом по ссылке с этой страницы
  2. Разархивируйте его и загрузите на сервер, в папку /bitrix/components/
  3. Если хотите сохранять результаты в инфоблоке, то перед использованием компонента его нужно создать. В инфоблоке «Обратный звонок» должны содержаться следующие свойства:
    • Имя (Код - VISITOR_FIO), тип - строка
    • Телефон (Код - VISITOR_PHONE), тип - строка
    • Время для звонка (Код - TIME_TOCALL), тип - строка
    • Сообщение (Код - VISITOR_MESSAGE), тип - строка
  4. Разместите код вызова компонента в шаблоне сайта

    PHP

    	
    <?
    $APPLICATION->IncludeComponent(
    	"mattweb:callback", 
    	".default", 
    	array(
    		"IBLOCK_TYPE" => "news",
    		"IBLOCK_ID" => "12",
    		"USE_CAPTCHA" => "N",
    		"OK_TEXT" => "Спасибо, ваше сообщение принято.",
    		"EMAIL_TO" => "mail@domen.ru",
    		"USE_MESSAGE_FIELD" => "Y",
    		"SAVE_FORM_DATA" => "Y",
    		"FIELDS_INFO" => array(
    			"NAME" => array("TYPE" => "text", "NAME" => "Имя"),
    			"PHONE" => array("TYPE" => "text", "NAME" => "Телефон"),
    			"TIME" => array("TYPE" => "text", "NAME" => "Время для звонка"),
    			"MESSAGE" => array("TYPE" => "text", "NAME" => "Сообщение"),
    		),
    		"REQUIRED_FIELDS" => array(
    			0 => "NAME",
    			1 => "PHONE",
    			2 => "MESSAGE",
    		),
    		"EVENT_MESSAGE_ID" => "FILL_CALLBACK_FORM",
    		"COMPONENT_TEMPLATE" => ".default",
    		"PHONE_FORMAT" => "F2",
    	),
    	false
    );?>

    Также нужно добавить ссылку, при клике по которой будет появляться форма (например, ее можно добавить в шапку сайта - файл header.php шаблона сайта):

    В компоненте есть возможность проверки телефона с помощью регулярного выражения. Для этого в параметрах компонента нужно указать формат ввода телефона

    При выборе формата телефона, его пример будет показан в форме под полем для ввода телефона.

    HTML

    <a href="#" class="ord_call">Заказать звонок</a>

    Добавить JS-код, который будет «показывать» форму:

    JavaScript

        $('.ord_call').click(function(event){
    	showOverlay();
    	$('#form_wrapper_call').show();
    	ajustScrollTop('#form_wrapper_call');
    	event.preventDefault();	
        });
  5. В административной части сайта (Настройки→Почтовые события→Типы почтовых событий) создайте новый тип почтового события с именем ‘FILL_CALLBACK_FORM’ и почтовый шаблон к нему. Заполните поля форм так же как показано на скриншотах: создание типа почтового события и создание почтового шаблона

После проведения указанных настроек компонентом «Заказ обратного звонка» можно пользоваться.

Скачать компонент «Заказ обратного звонка»

  • Большое изображение
Прочитано 11003 раз
Наверх