Обратный звонок на сайт

Опубликовано: 18 Авг 2015

Сегодня рассмотрим вариант добавления обратного звонка на сайт или интернет-магазин с помощью модуля “Обратный звонок на сайт (jbCallMe)”. Модуль позволяет добавить всплывающую форму для заказа обратного звонка, подачи вопроса, оставления заявки или для любой другой задачи, так как поля формы можно настраивать по своему усмотрению. На один сайт можно добавить не одну, а несколько абсолютно разных форм, с различным количеством и типом полей. Сообщения приходят на почту указанную в настройках модуля.

Теперь рассмотрим модуль по порядку.

Варианты форм, которые можно создать с помощью модуля “Обратный звонок на сайт (jbCallMe)”:

- заказ обратного звонка с минимальным количеством полей (форма по умолчанию)
- заказ обратного звонка с дополнительными полями, которые необходимы именно Вашему магазину или сайту
- быстрый заказ
- форма заказа, заявка

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

Установка и настройка модуля

1. Скачиваем модуль “Обратный звонок на сайт (jbCallMe)” (вверху страницы две кнопки “Скачать” и “Заказать установку”).

2. В корень сайта, в нашем случае магазина, так как рассматриваем установку модуля на OpenCart, загружаем папку jbcallme. Содержащийся в этой папке файл postmaster.php (обработчик запросов, который выполняет функцию отправки информации из заполненных полей на указанный e-mail) выносим из папки в корневую папку магазина.
В начале файла postmaster.php впишите e-mail, на который хотите получать сообщения, отправленные с помощью созданных Вами форм.

3. Открываем файл catalog/view/theme/default/template/common/header.tpl и подключаем модуль. Для этого между тегами

<head></head>

размещаем строки

<script type="text/javascript" src="/jbcallme/js/jquery.jbcallme.js"></script>
<link rel="stylesheet" type="text/css" href="/jbcallme/css/jquery.jbcallme.css">

В настройках модуля есть еще одна строка, в которой идет подключение jquery, но поскольку мы работаем с opencart, в котором jquery уже подключен, то эту строку мы просто не трогаем.

4. Перед закрывающим тегом </head> добавляем код скрипта

<script type="text/javascript">
$(function() {
$('.callme_button').jbcallme();
});
</script>

5. В нужном месте, где хотим сделать вывод формы, размещаем строку

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

Выполнив эти действия мы добавили в магазин форму по умолчанию, со стандартными полями “Имя” и “Телефон”, как на первом скриншоте выше.

Как добавить дополнительные поля и как изменить форму под свои запросы?

Например, помимо имени и телефона нам необходимо получать еще такую информацию как  “Сообщение”, “Время звонка” и “Тема вопроса”. Для этого возвращаемся к header.tpl и в скрипт, который мы разместили перед </head>, добавляем нужные поля и теперь весь скрипт будет иметь следующий вид

<script type="text/javascript">
$(function() {
$('.callme_button').jbcallme({
postfix: "callme_order",
title: "Заказ обратного звонка", // заголовок окна
fields: {
time: {
label: "Удобное для звонка время",
placeholder: "17:30 - 20:00",
},
descr: {
label: "Примечание",
type: "textarea",
},
topic: {
label: "Тема вопроса",
type: "text",
},
action: {
type: "hidden",
value: "callme_order",
},
},
}
);
});
</script>

Но, если мы добавили новые поля в форму, то необходимо их добавить и в обработчик – postmaster.php, чтобы данные из этих полей приходили на почту.

В файле postmaster.php переходим к кейсу, который совпадает со значением нашего скрытого поля action. В нашем случае это case ‘callme_order’. По умолчанию здесь поля – Имя, Телефон, Время звонка, Примечание – добавляем еще поле “Тема вопроса”. Получаем следующую картину:

case 'callme_order':
sendmail("Заказ обратного звонка", render(
'<div><b>Имя:</b> '.stripinput($_POST['name']).'</div>'.
'<div><b>Телефон:</b> '.stripinput($_POST['tel']).'</div>'.
'<div><b>Время звонка:</b> '.stripinput($_POST['time']).'</div>'.
'<div><b>Примечание:</b> '.stripinput($_POST['descr']).'</div>'.
'<div><b>Тема вопроса:</b> '.stripinput($_POST['topic']).'</div>'
),$EMAIL,$FROM,$REPLY);
exit('200');
break;

Как вы уже, скорее всего, заметили, в postmaster.php уже есть 4 варианта заготовленных форм: ask_order, callme_order, service_order и форма по умолчанию – default. Но мы вполне можем их не использовать, а создавать свои собственные.

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

– если в форме не нужны стандартные поля “имя” и “телефон”, то отменить их вывод в можно с помощью добавления строк:

no_tel: true,
no_name: true,

– если не нужна стандартная кнопка, то необходимо прописать

no_submit: true,

и, конечно, в скрипт после action добавить свой вариант кнопки, например

send: {
type: "submit",
value: "Отправить заказ",
},

– с помощью title можно давать свой заголовок всплывающему окну с формой

title: "Быстрый заказ",

– фразы, выводимые после удачной или неудачной отправки заполненной формы, можно изменить с помощью

success: "Ваше сообщение успешно отправлено. Спасибо!,
fail: "Сообщение не отправлено.",

Модуль легкий, быстрый и гибкий. К тому же, что немаловажно, подходит как для сайтов на различных cms, таких как Joomla, WordPress, OpenCart, DLE и т. д., так и для самописных сайтов. В общем, если суть модуля ясна, то тестируйте и внедряйте для удобства посетителей и покупателей.

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: