Всплывающее модальное окно для сайта

Всплывающее модальное окно для сайта

Однажды, в процессе работы над продвижением одного проекта, перед нами встал вопрос: «Как сократить процент пользователей, которые уходят со страницы корзины не совершив дальнейших действий по оформлению заказа?». В результате обсуждения, было принято решение показывать всплывающее окно с предложением оставить email и получить скидку пользователям, подпадающим под ряд условий. В данном случае, условия были следующего характера: Определенные бренды, определенная сумма и определенные категории товаров. Стоит сразу заметить, что автор данной заметки не большой таких «агрессивных» форматов, как всплывающие окна, но в данном случае это было оправданной мерой. Также стоит заметить, что окно показывалось не при проведении мышью по невидимой полоске в верхней части экрана (обычно берется около 5px), а с задержкой в 6 после загрузки страницы (среднее время просмотра страницы пользователями, ушедшими с сайта со страницы корзины). Собственно, технической реализации данного модального окна и посвящена данная заметка (ну и + небольшой бонус в конце заметки).

Стоит заметить, что приведенный код содержит инлайновые стили (это просто дело привычки), лучше, конечно, вынести это в отдельное CSS-правило.

1. Html-разметка

Контейнер с классом overlay-window4 — это подложка, затемняющая экран при появлении окна (больше она ничего не содержит). Само всплывающее окно — это контейнер hbt-md-modal, внутри которого содержится форма с двумя полями: input для ввода email и скрытое поле, которое принимает переменную названия товара в качестве значения. Стоит заметить, что для того, чтобы фиксировались все товары, находящиеся в корзине пользователя, нужно написать простенький цикл, который будет записывать название каждого товара в атрибут value с определенным разделителем (это может быть запятая, например).

2. Стили CSS

В данном подразделе приводятся стили для модального окна (вопросов приведенный код вызывать, по идее, не должен. По умолчанию окно имеет атрибут visibility: hidden. Потом, при выполнении условия, js-скрипт меняет значение на противоположное.

3. JS-код

В приведенном ниже js-коде, первый блок отвечает за скрытие модального окна по кнопке «закрыть» и оверлею. При желании можно убрать из данной функции класс overlay-window4 и оставить только:

И тогда окно будет закрываться только по кнопке «закрыть».

Далее идет, собственно, функция для вывода окна по прошествии необходимого времени (значение указывается в миллисекундах). И ajax-функция обработки входящей информации и отправки на контактный email и/или в БД сайта. Описание данной функции не совсем входит в тему данной заметки, но если тема интересна, то почитать об этом можно, например, тут.

4. Кратко об ограничениях для вывода окна

Если говорить об ограничениях (группе условий) для показа данного окна, основная мысль была в том, чтобы это окно показывалось только в том случае, если мы действительно могли бы дать скидку пользователю, оставившему свой email. Что же касается технической реализации, то тут все просто — группа условий if с логическими операторами ‘И’ и ‘ИЛИ’. В грубой форме это можно выразить следующим образом:

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

Бонус. Вызов окна по клику на странице товара. 

После получения положительных результатов, было решено расширить область применения данного окна. На карточку товара была добавлена дополнительная кнопка «Хочу дешевле!» и уже по клику на эту кнопку вызывалось окно.

Код самой кнопки:

И модифицированный js-код. Соответственно, блок с вызовом окна по времени удаляется из скрипта.

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