Как заменить на сайте вывод попап-форм из решения на формы из Битрикс24

Указанный способ реализации доработки гарантирует его стабильную работу даже после обновления модуля решения. Рассмотрим его работу на примере Аспро: Медицинский центр 2.0 для направления «Терапевтия».

Внимание! Эта инструкция актуальна только для тех форм, у которых прописан параметр «data-event="jqm"».

1. Создайте и настройте CRM-форму в Битрикс24. 

2. Скопируйте код формы для вставки на сайт, типа «Клик по кнопке или ссылке».

Перейдите в настройки сайта в административной части. В разделе «Цели и счетчики», нажмите кнопку «Редактировать» и добавьте в файл со счетчиками скопированный код формы.

Вставленный код формы не содержит кнопки/ссылки для клика. Поэтому обязательно после вставленного кода формы (после закрывающего тега </script>) вставьте следующий код ссылки, в котором замените число 109 на id вашей CRM-формы в Битрикс24.

<a class="b24-web-form-popup-btn-109">Мы перезвоним вам</a>

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

3. Перейдите в публичную часть сайта. Нажмите на кнопку записи на прием. Убедитесь, что в подвале сайта появилась ссылка, клик по которой вызывает появление CRM-формы из Битрикс24.




4. Чтобы скрыть эту ссылку, вернитесь в административную часть, где вы добавляли код формы и добавить «hidden» в класс ссылки.

5. Далее, необходимо внести изменения в файл шаблона сайта, предназначенный для пользовательских скриптов. Путь к нему в оригинальном шаблоне решения /bitrix/templates/aspro-medc2/js/custom.js.

Вставьте код: 

/* bindings forms triggers and B24 forms */
/* use data-param-id attribute or data-name attribute as a key */
/* use B24 form id as a value */
var formBindings = {
	326: 3,
	'callback': 141,
}

/* click button of B24 form */
$(document).on('click', '[data-event=b24]', function(e){
	var $this = $(this);
	var bind = $this.attr('data-bind');
	if(bind > 0){
		e.preventDefault();

		var $link = $('.b24-web-form-popup-btn-' + bind);
		if($link.length){
			$link[0].click();
		}

		/* unset loading state of button */
		setTimeout(function(){
			$this.closest('.loadings').removeClass('loadings');
		}, 1000);
	}
});

/* unbind jqm events */
$(document).ready(function(){
	if(typeof formBindings === 'object'){
		var keys = Object.keys(formBindings);
		for(var i in keys){
			var id = keys[i];
			var $link = $('[data-event=jqm][data-param-id=' + id + ']');
			if(!$link.length){
				$link = $('[data-event=jqm][data-name=' + id + ']');
			}

			if($link.length){
				var bind = 0;

				if(typeof id === 'number' && id > 0){
					var bind = formBindings[id] > 0 ? formBindings[id] : id;
				}
				else if(typeof id === 'string' && id.length > 0){
					var bind = formBindings[id] > 0 ? formBindings[id] : 0;
				}
		
				if(bind > 0){
					$link.unbind();
					$link.data('event', 'b24');
					$link.attr('data-event', 'b24');
					$link.attr('data-bind', bind);
				}
			}
		}
	}
});

6. Измените объект formsBindings, в котором перечислены связи триггеров форм (кнопки/ссылки, клик по которым открывает попап-окно) на сайте с CRM-формами в Битрикс24. Запись связей на решениях для корпоративных сайтов немного отличается от записи связи на решениях для интернет-магазинов.

Необходимо указать id инфоблока или формы, зависит от того, какой вид форм используется, на инфоблоках или формах. В корпоративных сайтах все триггеры веб-форм имеют атрибут data-param-id, значение которого численно совпадает с идентификатором инфоблока формы на сайте. Например, инфоблок формы «Запись онлайн» на сайте имеет идентификатор 326, а идентификатор аналогичной CRM-формы в Битрикс24 - 3 .

var formsBindings = {
   326: 3,
}; 

Необходимо указать символьный код формы. В интернет магазинах некоторые триггеры имеют атрибут data-param-id, а некоторые вместо него имеют атрибут data-name. Точно определить, значение какого атрибута использовать в описании связи с CRM-формой помогут «Средства разработчика» (нажатием клавиши F12, или вызовом соответсвующего пункта меню в браузере). Например, ссылка «Заказать звонок» на сайте имеет аттрибут data-name="callback", а идентификатор аналогичной CRM-формы в Битрикс24 - 141 .

var formsBindings = {
   'callback': 141,
};

Для описания связей к нескольким формам нужно просто перечислить их все в объекте через запятую.

var formsBindings = {
   326: 3,
   328: 1,
   'callback': 141,
   'ask': 142,
};

7. Убедитесь, что клик по кнопке открывает CRM-форму в Битрикс24.