Пример отображения последнего проданного товара на сайте

Зачем нужно показывать информацию о проданном товаре
Для покупателя не менее важным фактором, который поможет решиться на покупку является демонстрация того, что сайт на самом деле живой и на нем происходят продажи. Примером такого варианта является отображение на странице сайта последнего проданного товара. Здесь покупателю не столько важно получить информацию о том, какой именно товар был продан последним, сколько почувствовать именно активность других пользователей и повинуясь массовому мнению (другие покупают и значит я тоже могу купить) совершить нужное нам действие.

Пример реализации отображения последнего товара
пример отображения последнего купленного товара на JSBin

Начнем с того, что здесь правда не очень то и нужна - точнее было бы здорово отображать реальное состояние и действительно показывать последний проданный товар. Однако, посетитель смотрит на страницу в лучшем случае 30-40 секунд и если у вас за это время обязательно происходит продажа - это очень круто!!! Поэтому будем импровизировать. Понятно, что это будет простой JS-код, который мы добавим в шаблон каждой из страниц. Поехали....

1. Создаем массив товаров, которые будут отображаться в нашем ротационном блоке:

   var Products = ['Драники с семгой', 'Уху из судака', 'Настоящий цезарь', 'Стейк из телятины'];

2. Добавляем функцию, отвечающую за выбор случайного товара и обеспечивающего анимацию (используется 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 сек)
   
   
3. Добавляем функцию получения случайного числа (от min до max). Её мы будем использовать для генерации разных промежутков времени между показами последнего проданного товара на сайте

   function getRandomInt(min, max)
   {
     return Math.floor(Math.random() * (max - min + 1)) + min;
   }

4. Задаем время до первого показа (в миллисекундах)

   var rtime = 1000;

5. Остается только запустить выполнение

   setTimeout(function recursiveFn() {
   	rotator();
   	rtime = getRandomInt(5000,20000);
       setTimeout(recursiveFn, rtime);
   }, rtime);
   

   В нашем случае первый показ "последнего проданного на сайте товара" произойдет через 1 секунду, а далее мы случайным образом (от 5 до 20 секунд) будем ждать отображение следующего товара. Здесь важно одно условие - минимальное значение между показами (у нас 5 секунд) не должно быть меньше, чем FadeIn+Delay+FadeOut иначе у нас будут друг на друга накладываться записи.
   
   
6. Ну и конечно же не забываем добавить в шаблон сайта блок с оформлением. Например, так:

   <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>