Однажды, в процессе работы над продвижением одного проекта, перед нами встал вопрос: «Как сократить процент пользователей, которые уходят со страницы корзины не совершив дальнейших действий по оформлению заказа?». В результате обсуждения, было принято решение показывать всплывающее окно с предложением оставить email и получить скидку пользователям, подпадающим под ряд условий. В данном случае, условия были следующего характера: Определенные бренды, определенная сумма и определенные категории товаров. Стоит сразу заметить, что автор данной заметки не большой таких «агрессивных» форматов, как всплывающие окна, но в данном случае это было оправданной мерой. Также стоит заметить, что окно показывалось не при проведении мышью по невидимой полоске в верхней части экрана (обычно берется около 5px), а с задержкой в 6 после загрузки страницы (среднее время просмотра страницы пользователями, ушедшими с сайта со страницы корзины). Собственно, технической реализации данного модального окна и посвящена данная заметка (ну и + небольшой бонус в конце заметки).
Стоит заметить, что приведенный код содержит инлайновые стили (это просто дело привычки), лучше, конечно, вынести это в отдельное CSS-правило.
1. Html-разметка
<div class="overlay-window4" title="Кликните, чтобы закрыть окно"></div>
<div id="hbt-md-1" class="hbt-md-modal">
<div class="hbt-md-content">
<h3>ХОТИТЕ ДЕШЕВЛЕ?</h3>
<div>
<a id="hbt-md-close" style="font-size: 18px; color: white; cursor: pointer; position: absolute; top: 5px; left: 5px" title="Закрыть окно">X</a>
<div id="popup_text_hleb"><p>Оставьте свой email и мы дадим вам максимальную скидку на товары в вашей корзине!</p>
<form id="DiscountForm" style="margin: auto; text-align: center; vertical-align: middle;">
<input id="DiscountFormInput" name="DiscountFormInput" style="display: block; padding: 5px 0; width: 60%; margin: auto; color: black;" placeholder="Ваш email" required type="email">
<input id="DiscountFormProduct" name="DiscountFormProduct" value="<? //тут переменная названия товара ?>" type="hidden">
<button type="submit" class="hbt-md-submit">Отправить</button>
</form>
</div>
</div>
</div>
</div>
Контейнер с классом overlay-window4 — это подложка, затемняющая экран при появлении окна (больше она ничего не содержит). Само всплывающее окно — это контейнер hbt-md-modal, внутри которого содержится форма с двумя полями: input для ввода email и скрытое поле, которое принимает переменную названия товара в качестве значения. Стоит заметить, что для того, чтобы фиксировались все товары, находящиеся в корзине пользователя, нужно написать простенький цикл, который будет записывать название каждого товара в атрибут value с определенным разделителем (это может быть запятая, например).
2. Стили CSS
В данном подразделе приводятся стили для модального окна (вопросов приведенный код вызывать, по идее, не должен. По умолчанию окно имеет атрибут visibility: hidden. Потом, при выполнении условия, js-скрипт меняет значение на противоположное.
.hbt-md-modal{
background-color: #fff;
display: inline-block;
vertical-align:middle;
left: 50%;
opacity: 0;
width: 30%;
height: auto;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
overflow: auto;
}
.hbt-md-content{
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.hbt-md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 1;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
color: white;
}
.hbt-md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.hbt-md-submit{
display: block;
font-size: 0.8em;
border: none;
padding: 0.6em 1.2em;
background: #c0392b;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 7px 2px 3px 2px;
border-radius: 2px;
}
.overlay-window4 {
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 99999;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
3. JS-код
В приведенном ниже js-коде, первый блок отвечает за скрытие модального окна по кнопке «закрыть» и оверлею. При желании можно убрать из данной функции класс overlay-window4 и оставить только:
$('#hbt-md-close').click(function (){
И тогда окно будет закрываться только по кнопке «закрыть».
Далее идет, собственно, функция для вывода окна по прошествии необходимого времени (значение указывается в миллисекундах). И ajax-функция обработки входящей информации и отправки на контактный email и/или в БД сайта. Описание данной функции не совсем входит в тему данной заметки, но если тема интересна, то почитать об этом можно, например, тут.
<script>
$('#hbt-md-close, .overlay-window4').click(function (){
$('.hbt-md-modal, .overlay-window4').css({'opacity': 0, 'visibility': 'hidden'});
});
$(window).load(function() {
setTimeout(function(){
// вызвать модальное окно
$('.hbt-md-modal, .overlay-window4').css({'opacity': 1, 'visibility': 'visible'});
}, 6000);
});
$('#DiscountForm').submit(function(e){
var popup = $('#popup_text_hleb');
e.preventDefault();
$.ajax({
url: "/smthng.php",
type: "POST",
data: $('#DiscountForm').serialize(),
success: function(response) {
//обработка успешной отправки
popup.html('Ваше сообщение успешно отправлено!');
},
error: function(response) {
//обработка ошибок при отправке
}
});
});
</script>
4. Кратко об ограничениях для вывода окна
Если говорить об ограничениях (группе условий) для показа данного окна, основная мысль была в том, чтобы это окно показывалось только в том случае, если мы действительно могли бы дать скидку пользователю, оставившему свой email. Что же касается технической реализации, то тут все просто — группа условий if с логическими операторами ‘И’ и ‘ИЛИ’. В грубой форме это можно выразить следующим образом:
<? if(($PRICE >= 6000) AND (($BRAND_ID == 120 ) OR ($BRAND_ID == 121)): //кол-во условий можно расширить ?> <!-- Здесь код всплывающего окна --> <?endif;?>
В общих словах, логика условий индивидуальна для каждого проекта и должна разрабатываться исходя из текущих бизнес-задач.
Бонус. Вызов окна по клику на странице товара.
После получения положительных результатов, было решено расширить область применения данного окна. На карточку товара была добавлена дополнительная кнопка «Хочу дешевле!» и уже по клику на эту кнопку вызывалось окно.
Код самой кнопки:
<a href="#" class="want_discount"> <p style="padding: 10px 5px; margin: 5px 0px; background-color: #e74c3c; text-align: center; color: white; font-weight: 600; border-radius: 5px;">ХОЧУ ДЕШЕВЛЕ!</p> </a>
И модифицированный js-код. Соответственно, блок с вызовом окна по времени удаляется из скрипта.
$('#hbt-md-close, .overlay-window4').click(function (){
$('.hbt-md-modal, .overlay-window4').css({'opacity': 0, 'visibility': 'hidden'});
});
$('a.want_discount').click(function (e){
$('.hbt-md-modal, .overlay-window4').css({'opacity': 1, 'visibility': 'visible'});
});
На этом, в общем-то, и все. Приведенный выше код не привязан ни к какой-нибудь определенной CMS, и его, в принципе, можно использовать в любых проектах.