В сегодняшней статье рассмотрим один из важных элементов, которые должны присутствовать в любом интернет магазине – это функционал обратного звонка.
Что он собой представляет?
Просто говоря – это небольшая форма, в которой всего два поля: имя и телефон, которая открывается в сплывающем окне.
Наверняка, существуют модули, возможно, некоторые из них и платные, но я хотел бы вам показать как сделать все вручную, полностью собственными силами. Используя мой метод, вы сможете оформить данную функцию максимально под свои требования.
После отправки клиентом запроса, он придет на почту, которую вы укажите, и ваш менеджер сможет созвониться с потенциальным покупателем.
Ну что ж, давайте приступим к работе.
Шаг 1. Подключаем скрипт в файле /catalog/view/theme/default/template/common/header.tpl. Вставлять код нужно перед закрывающимся тегом .
<script type="text/javascript" src="/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
</script>
Шаг 2. Прописываем ссылку обратного звонка в нужном нам месте сайта.
<a id="go" rel="leanModal" name="signup" href="#signup">Заказать обратный звонок</a>
Шаг 3. Подключаем CSS. Для этого, добавляем его в файл — /catalog/view/theme/default/stylesheet/stylesheet.css.
#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#go { margin: 0 auto; width: 200px; padding-right: 85px; }
#signup form p {
padding-left:15px;
padding-right:15px;
}
#signup {
width: 404px;
display:none;
background: #FFF;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
#signup-header { background: url(../image/hd-bg.png); padding: 18px 18px 14px 18px; border-bottom: 1px solid #CCC; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
#signup-header h2 { color: #444; font-size: 1.5em; font-weight: 700; margin-bottom: 3px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); }
#signup-header p { color: #444; font-size: 1.3em; margin: 0; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); text-shadow: none; }
#signup .txt-fld { position: relative; width: 364px; padding: 14px 20px; border-bottom: 1px solid #EEE; text-align: right; }
#signup .btn-fld { width: 254px; overflow: hidden; padding: 12px 20px 12px 130px; }
#signup .txt-fld label { display: block; float: left; width: 90px; padding-top: 8px; color: #222; font-size: 1.3em; text-align: left; }
#signup .txt-fld input { width: 244px; padding: 8px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-size: 1.2em; color: #222; background: #F7F7F7; font-family: "Helvetica Neue"; outline: none; border-top: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #E7E6E6; border-bottom: 1px solid #E7E6E6; }
#signup .txt-fld input.good_input { background: #DEF5E1 url(../imgage/good.png) 236px center no-repeat; }
#signup .txt-fld input.error_input { background: #FDE0E0; }
.modal_close { position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../image/modal_close.png); z-index: 2; }
#signup .bt1 {
float: right;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background: #3F9D4A;
border: none;
width: auto;
overflow: visible;
font-size: 1.4em;
margin-bottom: 15px;
color: #FFF;
padding: 7px 10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,0.4);}
#liv {
margin-top:-35px;
}
Шаг 4. Вставляем форму обратного звонка. Для этого открываем файл /catalog/view/theme/default/template/common/footer.tpl и перед закрывающимся тегом body, вставляем html код формы.
<div id="signup">
<div id="signup-ct">
<div id="signup-header">
<h2>Заказать обратный звонок</h2>
<a class="modal_close" href="#"></a>
</div>
<form action="https://site.com/options.php" method="post">
<p><span style="padding-right:55px;">Ваше имя:</span>
<input type="text" name="fio" width="20"></p>
<p style="padding-top:15px;"><span style="padding-right:10px;">Номер телефона:</span>
<input type="text" name="email" width="20"></p>
<p><span style="padding-right:28px;">Тема вопроса: </span>
<input type="text" name="ask" width="20"></p>
<p><span style="padding-right:10px;">Введите числа с картинки: </span>
<?php
$i=1;
do
{
$num[$i] = mt_rand(0,9);
echo "<img src='img/".$num[$i].".gif' border='0' align='bottom' vspace='5px'>";
$i++;
}
while ($i<5);
$captcha = $num[1].$num[2].$num[3].$num[4];
?>
<input name="captcha" type="hidden" value="<?php echo $captcha ;?>">
<input name="pr" style=" margin-bottom:11px" type="text" size="6" maxlength="4"></p>
<p><input type="submit" class="bt1" value="Отправить сообщение"></p>
</form>
</div>
</div>
Обратите внимание на строчку:
<form action="https://site.com/options.php" method="post">
в ней нужно указать путь к файлу options.php, на вашем сервере. На данный момент – это корневая папка сайта. Обязательно вставьте url своего сайта вместо – site.com!!!
Шаг 5. На этом шаге, нужно забросить все нужные нам файлы на сервер.
Все нужные файлы я прикреплю внизу статьи.
Для этого:
1.) В корневую папку сайта закидаем файлы: options.php и jquery.leanModal.min.js, а также папку с картинками каптчи img.
2.) Идем в директорию — /catalog/view/theme/default/image/ и забрасываем туда, два изображения из папки bg_theme.
Настройка отправки письма
Теперь давайте детальнее рассмотрим файл options.php.
Основные настройки:
1.) 1 строчка файла
<meta http-equiv='refresh' content='2; url=https://site.com/'>
здесь вам нужно указать домен своего сайта вместо site.com. А также, в можете задать время в секундах, через которое пользователя перебросит на главную страницу. Чтобы было более понятно, после отправки письма пользователю высветится страница с текстом: спасибо, что воспользовались нашими услугами, и т.п. , данный текст вы сможете настроить ниже. После того как он увидит окно, его будет перенаправлено на главную страницу вашего сайта, или же на любую другую страницу, урл которой вы можете указать в этой строке.
2.) Далее идет проверка отправляемых полей, там, в файле все расписано.
3.) Обязательно! Поменяйте адрес почты в строке:
$address = "test@site.com";
4.) В самом низу файла вы можете поправить текст, который покупатель увидит после отправки письма.
На этом все. Если вы все сделали правильно, то письма будут приходить на указанный вами адрес электронной почты.
Вот файлы для создания всплывающей формы обратного звонка:
[sociallocker]
[/sociallocker]
and then Add to Home Screen.