Готовая корзина для вашего сайта

Сделайте ваш сайт удобным для покупок

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

Смотреть пример Получить код для установки

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

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

Пример реализации отображения последнего товара
пример отображения последнего купленного товара на 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>