Отправка телефонов для обратного звонка из DLE-Uniform в CallTouch


Отправка телефонов для обратного звонка из DLE-Uniform в CallTouch

На одном из клиентских проектов возникла потребность в интеграции сервиса обратного звонка (Calltouch Callback) CallTouch.ru в стандартные формы обратной связи используемые на сайте.

Изучаем официальные источники

За основу информация https://support.calltouch.ru/hc/ru/articles/360005891451-Подключение-клиентских-форм-к-обратному-звонку-Calltouch

Далее уже работа на стороне модуля форм обратной связи (ФОС) DLE-Uniform

1. В набор JS файлов модуля добавляем новый скрипт

{THEME}/uniform/js/uniform_ctw.js

в сжатом виде получается так

	<script type="text/javascript" src="/engine/classes/min/index.php?charset=utf-8&f={THEME}/uniform/js/jquery.magnificpopup.min.js,{THEME}/uniform/js/jquery.ladda.min.js,{THEME}/uniform/js/jquery.form.min.js,{THEME}/uniform/js/jquery.maskedinput.min.js,{THEME}/uniform/js/uniform_ctw.js&06"></script>


2. сам скрипт {THEME}/uniform/js/uniform_ctw.js настроен на отслеживание полей: phone, name и calltime
обязательным для правильной работы скрипта является поле phone


3. В ссылку вызова Формы модуля DLE-Uniform необходимо добавить новый параметр

"ctwId": "uniformCallback"


вот сюда

data-uf-settings='{"formConfig": "callback", "ctwId": "uniformCallback"}'


где,

"formConfig": "callback" - название шаблона с формой
"ctwId": "uniformCallback" - ключ связки между виджетом CallTouch и формой на сайте. В данном пример ключ: uniformCallback



целиком код ссылки вызова формы обратного звонка становится

<a href="#" data-uf-open="/engine/ajax/uniform/uniform.php" data-uf-settings='{"formConfig": "callback", "ctwId": "uniformCallback"}'>обратная связь</a>


Собственно на этом все.

Модуль DLE-Uniform можно скачать на сайте разработчика https://pafnuty.name/modules/159-uniform.html

Дополнительный скрипт uniform_ctw.js

/*!
 * DLE UniForm — унверсальные формы для DLE
 *
 * @author     ПафНутиЙ <pafnuty10@gmail.com>
 * @link       http://pafnuty.name/
 * @link       https://twitter.com/pafnuty_name
 */

var doc = $(document);

doc
	// ajax-отправка формы + эффекты
	.on('submit', '[data-uf-form]', function () {
		var $this = $(this),
			laddaLoad,
			options = {
				beforeSubmit: ufStart,
				success: ufDone,
			};

		$this.ajaxSubmit(options);

		return false;
	})
	// Открытие ajax-окна с формой
	.on('click', '[data-uf-open]', function (e) {
		var $this = $(this),
			src = $this.data('ufOpen'),
			data = $this.data('ufSettings');

		var ctwId = data.ctwId || null;

		$.extend(true, $.magnificPopup.defaults, {
			callbacks: {
				open: function () {
					if (ctwId) {
						ctwService.setId(ctwId);
					}
				},
				ajaxContentAdded: function () {
					$("#phone").mask("+7 (999) 999-99-99");
				},
				close: function () {
					ctwService.clearId();
				},
			}
		});

		$.magnificPopup.open({
			items: {
				src: src,
			},
			focus: '.uf-input-first',
			type: 'ajax',
			ajax: {
				settings: {
					data: data
				}
			}
		});
		return false;
	})
	// Убираем класс с из инпута с ошибочным заполнением
	.on('keyup input', '.uf-input-error', function (e) {
		var $this = $(this);
		if (e.type == 'input') {
			doc.off('keyup', '.uf-input-error');
		}
		if ($this.val().length) {
			$this.removeClass('uf-input-error');
		}
	});


/**
 * Обёртка для совместной работы uniform и ctw
 */
var ctwService = {
	/**
	 * Текущий ключ фиджета формы ctw
	 * Задаётся в настройках кнопки формыб в параметре ctwId
	 * data-uf-settings='{"formConfig": "callback", "ctwId": "uniformCallback"}'
	 */
	ctwId: null,

	/**
	 * Проверка на существование ctw
	 */
	checkCtw: function () {
		return !!window.ctw;
	},

	/**
	 * Получаем текущий ключ виджета
	 */
	getId: function () {
		return ctwService.checkCtw() && ctwService.ctwId;
	},

	/**
	 * Устанавливаем ключ виджета для последующего использования
	 */
	setId: function (id) {
		ctwService.ctwId = id;
	},

	/**
	 * Очищаем ранее сохранёный ключ виджета
	 */
	clearId: function () {
		ctwService.ctwId = null;
	},

	/**
	 * Метод для отправки формы обратного звонка в ctw при условии, что ключ формы равен uniformCallback
	 */
	sendUniformCallback: function (formData) {
		var phone;
		var dataArray = [];

		formData.forEach(function (item, index) {

			switch (item.name) {
			case 'phone':
				// Приводим номер телефона в порядок
				var regex = /[\+\-\ \(\)]/g;
				phone = item.value.replace(regex, '');
				break

			case 'name':
			case 'calltime':
				// Добавляем имя и время звонка 
				dataArray.push({
					"name": item.name,
					"value": item.value
				});
				break

			default:
				//
				break
			}

		});

		// Дёргаем сервис ctw
		ctwService.createRequest(phone, dataArray);
	},

	/**
	 * Обёртка вокруг window.ctw.createRequest
	 */
	createRequest: function (phone, dataArray) {
		if (!ctwService.ctwId || !phone || !ctwService.checkCtw()) {
			return;
		}

		window.ctw.createRequest(
			ctwService.ctwId,
			phone,
			dataArray,
			function (success, data) {
				console.log(success, data)
				if (success) {
					console.log('Создана заявка на колбек, идентификатор: ' + data.callbackRequestId)
				}
				else {
					switch (data.type) {
					case "request_throttle_timeout":
					case "request_throttle_count":
						console.log('Достигнут лимит создания заявок, попробуйте позже');
						break;
					case "request_phone_blacklisted":
						console.log('номер телефона находится в черном списке');
						break;
					case "validation_error":
						console.log('были переданы некорректные данные');
						break;
					default:
						console.log('Во время выполнения запроса произошла ошибка: ' + data.type);
					}
				}
			}
		);

	}
}

// Функция, выполняемая перед отправкой формы
function ufStart(formData, jqForm) {
	
	if (ctwService.getId()) {
		// Отправляем данные в ctw если задан ключ
		ctwService.sendUniformCallback(formData);
	}

	laddaLoad = jqForm.find('.ladda-button').ladda();
	laddaLoad.ladda('start');

	return true;
}

// Функция, выполняемая после удачной отправки формы
function ufDone(responseText, statusText, xhr, $form) {

	var $responseText = $(responseText),
		responseResult = ($responseText.is('form')) ? $responseText.html() : responseText;

	if (statusText == 'success') {
		laddaLoad.ladda('stop');
		$form.html(responseResult);
	}
}

jQuery(document).ready(function ($) {
	var $inlineUniform = $('[data-uf-inline]');
	if ($inlineUniform.length) {
		$.each($inlineUniform, function (index, val) {
			var $this = $(this),
				url = $this.data('ufInline'),
				data = $this.data('ufSettings');

			$.ajax({
					url: url,
					data: data,
				})
				.done(function (data) {
					$this.html(data);
				});

		});
	};
});



в виде отдельного файла
uniform_ctw.js [5,67 Kb] (cкачиваний: 5)


Теперь после отправки формы, на email менеджеров сайта прилетает сообщение с параметрами заявки.

А в сервис Calltouch Callback поступает номер телефона на который происходит автоматический дозвон соединяющий менеджера сайта и клиента, который запросил обратный звонок.


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



Похожие публикации

Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin

YouTube PopUp jQuery Plugin Для DataLife Engine. Доработка плагина для использования в шаблона DLE CMS. Например для RSS информеров в которых используются ссылки на youtube ролики. Исходный плагин,... читать далее

Alarm-Suzuki.ru - корпоративный сайт автодилера

Представляем реализация срочного заказа от старого клиента. Задача: оперативно подготовить сайт для дилерского центра в соответствии с корпоративными стандартами автопроизводителя.... читать далее

Сайт компании ЛТ-Групп. Комплексные поставки деталей

Динамично развивающаяся молодая компания ООО “ЛТ-ГРУПП” осуществляет комплексное обеспечение элементами трубопровода и трубопроводной арматуры для предприятий различных отраслей промышленности -... читать далее

Центр физкультурно-оздоровительной работы ОЛИМП

Корпоративный сайт для регионального спортивного клуба. Наша работа в новом жанре - проект в сфере фитнеса и здорового образа жизни.... читать далее

Корпоративный сайт компании ВентСтройПром - услуги по вентиляции и кондиционированию

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

Снег на сайте - Jquery плагин

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

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте