Отправка телефонов для обратного звонка из 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);
});
});
};
});в виде отдельного файла
[attachment=23:uniform_ctw.js]
Теперь после отправки формы, на email менеджеров сайта прилетает сообщение с параметрами заявки.
А в сервис Calltouch Callback поступает номер телефона на который происходит автоматический дозвон соединяющий менеджера сайта и клиента, который запросил обратный звонок.
0 Комментарии