Зачем нужно показывать информацию о проданном товаре
Для покупателя не менее важным фактором, который поможет решиться на покупку является демонстрация того, что сайт на самом деле живой и на нем происходят продажи. Примером такого варианта является отображение на странице сайта последнего проданного товара. Здесь покупателю не столько важно получить информацию о том, какой именно товар был продан последним, сколько почувствовать именно активность других пользователей и повинуясь массовому мнению (другие покупают и значит я тоже могу купить) совершить нужное нам действие.
Пример реализации отображения последнего товара
пример отображения последнего купленного товара на JSBin
Начнем с того, что здесь правда не очень то и нужна - точнее было бы здорово отображать реальное состояние и действительно показывать последний проданный товар. Однако, посетитель смотрит на страницу в лучшем случае 30-40 секунд и если у вас за это время обязательно происходит продажа - это очень круто!!! Поэтому будем импровизировать. Понятно, что это будет простой JS-код, который мы добавим в шаблон каждой из страниц. Поехали....
- Создаем массив товаров, которые будут отображаться в нашем ротационном блоке:
var Products = ['Драники с семгой', 'Уху из судака', 'Настоящий цезарь', 'Стейк из телятины'];
- Добавляем функцию, отвечающую за выбор случайного товара и обеспечивающего анимацию (используется jQuery, но если у Вас подключена корзина EasyNetShop - он уже есть)
function rotator(){ var ProductsRand = Math.floor(Math.random() * Products.length); $("#p").html('Только что купили '+Products[ProductsRand]+''); $("#p").fadeIn(1000).delay(2000).fadeOut(1000); }
FadeIn - скорость "проявления" в миллисекундах (1000 = 1 сек)
Delay- время задержки записи (2000 = 2 сек)
FadeOut - скорость "затухания" блока с записью (1000 = 1 сек)
- Добавляем функцию получения случайного числа (от min до max). Её мы будем использовать для генерации разных промежутков времени между показами последнего проданного товара на сайте
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
- Задаем время до первого показа (в миллисекундах)
var rtime = 1000;
- Остается только запустить выполнение
setTimeout(function recursiveFn() { rotator(); rtime = getRandomInt(5000,20000); setTimeout(recursiveFn, rtime); }, rtime);
В нашем случае первый показ "последнего проданного на сайте товара" произойдет через 1 секунду, а далее мы случайным образом (от 5 до 20 секунд) будем ждать отображение следующего товара. Здесь важно одно условие - минимальное значение между показами (у нас 5 секунд) не должно быть меньше, чем FadeIn+Delay+FadeOut иначе у нас будут друг на друга накладываться записи.
-
Ну и конечно же не забываем добавить в шаблон сайта блок с оформлением. Например, так:
<div id="p" style="display:none; background-color:rgba(0,0,0,0.6); color:#ffffff; padding:20px; width:300px; position: fixed; bottom:0px; right:0px;"></div>
Окончательный вариант для отображения последнего проданного товара на сайте
Скопируйте его на сайт в любое место, после подключения корзины EasyNetShop и он будет работать:
<div id="p" style="display:none; background-color:rgba(0,0,0,0.6); color:#ffffff; padding:20px; width:300px; position: fixed; bottom:0px; right:0px; font-size:12px;"></div> <script> var Products = ['Драники с семгой', 'Уху из судака', 'Настоящий цезарь', 'Стейк из телятины']; function rotator(){ var ProductsRand = Math.floor(Math.random() * Products.length); $("#p").html('Только что купили:
'+Products[ProductsRand]+''); $("#p").fadeIn(1000).delay(2000).fadeOut(1000); } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var rtime = 1000; setTimeout(function recursiveFn() { rotator(); rtime = getRandomInt(5000,20000); setTimeout(recursiveFn, rtime); }, rtime); </script>