Введение

Благодарим Вас за покупку товара! Установка займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь поэтапно следовать всем рекомендациям.

«Конверсионные уведомления» — это мощный маркетинговый инструмент, который будет стимулировать покупателей вашего сайта быстрее совершить покупку. Суть скрипта заключается в том, что он в случайном порядке выводит уведомления о добавлении товара в корзину или оформлении заказа, при этом каждый раз выводится новый товар из массива и используются разные имена (женские и мужские из разных массивов). При грамотной настройке интервала появления и списка товаров можно получить хороший % увеличения продаж.

• — настройка массива товаров посредством информера;
• — возможность задать список женских и мужских имен в разные массивы с их последующей рандомизацией, в том числе и внутри массива;
• — рандомизация вывода сообщений об оформлении заказа и добавлении в корзину;
• — настройка частоты появления окна об оформлении заказа;
• — настройка эффектов появления и исчезновения уведомлений на основе библиотеки анимаций Animate.css;
• — настройка интервала появления уведомлений с их последующей рандомизацией;
• — настройка времени, через которое уведомление исчезает;

Первый шаг: создание информера

Перейдите в раздел Инструменты — Информеры и создайте информер для товаров модуля Интернет-магазин.

В шаблон информера разместите следующий код:

<script>
goods[<?($NO$-1)?>] =
{
'title':'$NAME$',
'url':'$ENTRY_URL$',
'img':'$THUMB$'
}
</script>

Второй шаг: установка кода

Перейдите в раздел Дизайн — Редактор — Глобальные блоки — Нижняя часть сайта и разместите следующий код:

<script>
 var goods = {};
</script>
$MYINF_1$

<script>
 // рандомизатор
 function randomInteger(min, max) {
 var rand = min + Math.random() * (max + 1 - min);
 rand = Math.floor(rand);
 return rand;
 }

 function changeClass() {
 // анимация появления окна
 var effecIn = 'flipInX';
 // анимация исчезновения окна
 var effecOut = 'fadeOutDown'; 
 // массивы мужских и женских имен
 var nameM = ['Абрам', 'Адам', 'Аким', 'Александр', 'Артур', 'Богдан', 'Борис', 'Бронислав', 'Вадим', 'Георгий', 'Глеб', 'Григорий', 'Давид', 'Даниил', 'Денис', 'Дмитрий', 'Егор', 'Иван', 'Игорь', 'Илларион', 'Клемент', 'Кирилл', 'Константин', 'Леонид', 'Макар', 'Назар', 'Николай', 'Олег', 'Петр', 'Прохор', 'Роберт', 'Станислав', 'Тимур'];
 var nameW = ['Александра', ' Алла', ' Анжела', ' Антонина', ' Арина', ' Белла', ' Варвара', ' Дарья', ' Диана', ' Жанна', ' Клара', ' Лада', ' Лидия', ' Лолита', ' Любовь', ' Маргарита', ' Надежда', ' Наталья', ' Нонна', ' Регина', ' Роза', ' Роксана', ' Ростислава', ' Ульяна', ' Элеонора', ' Элла', ' Эльвира', ' Эмма', ' Юлия', ' Яна']; 
 //РАНДОМИЗИРОВАНИЕ ДАННЫХ
 var rand = randomInteger(40000, 90000); // интервал появления окна
 var randG = randomInteger(0, Object.keys(goods).length-1); // рандомный выбор товара из массива
 var randnameM = randomInteger(0, nameM.length-1); // рандомный выбор мужского имени
 var randnameW = randomInteger(0, nameW.length-1); // рандомный выбор женского имени
 var randGender = randomInteger(1, 2); // рандомный выбор пола (М/Ж)
 /////////////
 var timer = setTimeout(function() { 
 
 var resName='';
 var resMess ='';
 
 if ( randGender == 1) {
 resName = nameM[randnameM];
 
 if ( randG % 5 == 0) { // цифра 5 обеспечивает соотношение появления окна заказа и добавления в корзину 1 к 5. Чем меньше число, тем чаще появляется окно об оформлении заказа
resMess = resName + ' оформил заказ на <b>' + goods[randG].title + '</b>';
 }
 else 
 {
 resMess = resName + ' добавил <b>' + goods[randG].title + '</b> в корзину'; 
 }
 
 }
 else
 {
 resName = nameW[randnameW];

 
 if ( randG % 5 == 0) {
 resMess = resName + ' оформила заказ на <b>' + goods[randG].title + '</b>';
 }
 else 
 {
 resMess = resName + ' добавила <b>' + goods[randG].title + '</b> в корзину';
 }
 
 }
 $('.desc-wl').html(resMess); 
 $('.win-land').removeClass('animated ' + effecOut).addClass('animated '+ effecIn).attr('onclick','location.href=\'' + goods[randG].url + '\'');
 $('.img-wl').attr('style','background: url("'+ goods[randG].img + '"); background-size: cover;background-repeat: no-repeat; background-position: center center;'); 
 
 /////////
 setTimeout(function() { 
 $('.win-land').removeClass('animated ' + effecIn).addClass('animated ' + effecOut);
 }, 5000); // время, через которое окно исчезнет
 ////////////
 
 changeClass();
 }, rand);
 ///////////
}

changeClass();
</script>

<div class="win-land"><div class="wl-rel">
 <div class="img-wl"></div>
 <div class="desc-wl"></div>
 </div></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

В комментариях кода есть пояснения, за что отвечает так или иная переменная.

Третий шаг: установка стилей

Перейдите в раздел Дизайн — Редактор — CSS и в самый конец разместите следующий код:

 .win-land, .win-land * {box-sizing:border-box;}
 .wl-rel {position:relative;background:#fff; box-shadow: 0 7px 18px 0 hsla(0, 0%, 77%, 0.4);cursor:pointer;transition: .2s ease;}
 .wl-rel:hover { transition: .3s ease;box-shadow: 0 7px 18px 0 hsla(168, 34%, 69%, 0.42);}
 .win-land {padding-bottom:30px;position:fixed;bottom:0;left:30px;width:280px;visibility:hidden;} 
 .animated {visibility:visible;}
 .img-wl {width:60px;position: absolute; background:#fff;left:0;right:0;top:0;bottom:0;}
 .desc-wl {padding: 15px 15px 15px 75px;}