Функция «просмотренные товары»

Недавно просмотренные товары - готовый модуль Insales, который позволяет посетителям сайта без проблем находить товары, которые они просматривали в недавнем времени.

Предупреждение!

Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

Преамбула

Принцип работы скрипта ранее просмотренных товаров заключается в том, чтобы при рендеринге в браузере страницы продукта, его id записывался в cookie, а при открытии другой страницы, товары из cookie получались с сервера с помощью JSON (“/products_by_id/{id через запятую}.json”) и выводились в виде списка в определенный блок.

Сам скрипт идентичен представленному на сайте Insales, однако принцип установки несколько иной.


Кофе для Insales

JavaScript, особенно в связке с Jquery, либо другими библиотеками или фреймворками довольно удобен, понятен и функционален. Однако, есть и существенные недостатки, одним из которых является огромное количество скобок и, по сути, совершенно не нужных знаков, символов и прочих неудобств, не говоря уже о том, что при нарушении форматирования можно просто запутаться во вложенности. Чтобы обойти эти проблемы, сэкономить свое время и нервы, особо ленивыми программистами был придуман язык, совмещающий в себе вложенность Python-style, синтаксис Ruby-style и компилирущийся в обычный JS, понятный браузерам. Отдельной особенностью является то, что он был написан сам на себе. Темные силы программирования в действии. Речь идет о CoffeeScript. Подробнее о нем можно узнать и почитать документацию тут.


Процесс

Для начала, нужно создать сниппет в шаблоне, назовем его ‘recently_viewed’.


Далее, нам понадобится библиотека, компилирующая CoffeScript в JS. В сниппете подключаем и создаем скрипт с соответственным атрибутом, чтобы библиотека знала, что нужно компилировать.

<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>"><a href="https://cdn.rawgit.com/jashkenas/coffeescript/mast..">https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>.</a>">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>"><a href="<a href=" https:="" cdn.rawgit.com="" jashkenas="" coffeescript="" mast."=""></a><a href="<a href=" https:="" cdn.rawgit.com="" jashkenas="" coffeescript="" mast.."="">https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>">https://cdn.rawgit.com/jashkenas/coffeescript/mast.....">https://cdn.rawgit.com/jashkenas/coffeescript/mast....">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...">

Далее, создаем функцию, прописывающую id товара в cookie:

<script type="text/coffeescript">
saveProduct = (pid) ->
  mod_recently_view_count = 3
  if $.cookie('product_ids')?
    arr = $.cookie('product_ids').split ','
    for prod in arr
      return if prod is pid
    arr.shift() if arr.length >= mod_recently_view_count
    arr.push pid
    $.cookie 'product_ids', arr, { path: '/' }
  else
    $.cookie 'product_ids', pid, { path: '/' }
    console.log $.cookie 'product_ids'
</script>

Здесь задаем максимальное количество выводимых товаров, далее, если cookie уже существуют, достаем из них массив, добавляем еще один id, если нужно удаляем старое значение. Если же cookie нет, то создаем.

Далее прописываем основную логику. Ту, что будет выводить товары на экран.

<script type="text/coffeescript">
saveProduct = (pid) ->
  mod_recently_view_count = 3
  if $.cookie('product_ids')?
    arr = $.cookie('product_ids').split ','
    for prod in arr
      return if prod is pid
    arr.shift() if arr.length >= mod_recently_view_count
    arr.push pid
    $.cookie 'product_ids', arr, { path: '/' }
  else
    $.cookie 'product_ids', pid, { path: '/' }
    console.log $.cookie 'product_ids'
$ ->
  if $.cookie('product_ids')?
    $.getJSON "/products_by_id/#{$.cookie('product_ids')}.json",
      (data) ->
        products = ''
        for product in data.products
          if product.images.length > 0
            products +=  "<li><a href=\"/product/?product_id=#{ product.id }\" class=\"img fl\"><img src=\"#{product.images[0].url}\" alt=\"#{ product.title }\" /></a>"
          products += "<a href=\"/product/?product_id=#{ product.id }\" class=\"title\">#{ product.title }</a>"            
          products +=  "<div class=\"buyzone\"><p class=\"price\">#{ InSales.formatMoney(product.variants[0].base_price, "")}</p>" 
          if product.variants[0].old_price?
            products += "<p class=\"old-price\">#{ InSales.formatMoney(product.variants[0].old_price, "") }</p>"
          products += "</div></li>"
        $('#mod-recently-view').html products
    $('#recently_view').show()
  {% if template == 'product' %}
  saveProduct ""
  {% endif %}    
</script>

Если cookie существуют, через JSON получаем данные товаров, содержащихся в них и каждый прописываем в виде HTML строковую переменную, далее добавляем переменную в нужный блок. После всего, если текущая страница является товаром, вызывается функция записи в cookie. Логическая часть на этом кончается.


Интеграция

Стили по вкусу, возмем из примера Insales и добавим в сниппет.

<style>
.style-block {
  display: none;
  }  
  .style-block h2 {
  color: #262626;
  }
.small-prod-list li {
    overflow: hidden;
    margin-bottom: 15px;
    border-top: 1px solid #e1e4d9;
    padding-top: 15px;
}
.small-prod-list .title {
    font-size: 116%;
    color: #262626;
    margin-bottom: 10px;
    display: block;
      text-transform: uppercase;
    font-weight: bold;
}
.small-prod-list a.title:hover {
    text-decoration: none;
}
.small-prod-list img {
       max-height: 48px;
       max-width: 48px;
  vertical-align: middle;
 margin-top: -2px;
}
.small-prod-list .img {
    display: block;
      height: 50px;
      margin-right: 10px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      float: left;
}
.small-prod-list .buyzone {
    padding-top: 5px;
}
.small-prod-list .price {
    font-size: 18px;
    font-weight: bold;
    color: #70543f;
    //float: right;
}
.small-prod-list .old-price {
    text-decoration: line-through;
}
.buyzone p {
    margin-bottom: 10px;
}
</style>


Остается подключить сниппет в шаблоне layout перед закрывающим тегом body:

</footer>
{% include 'recently_viewed' %}
</body></html>


…и добавить сам блок, в котором будут выводиться товары в подходящее место:

    <div class="style-block" id="recently_view">
          <h2>Вы смотрели
          <ul class="small-prod-list" id="mod-recently-view">    
          </ul>
    </div>


Результат

После неспешного ползания по сайту, в заранее отведенных местах стали появляться ранее просмотренные товары, как и планировалось.


Замести следы

Естественно, нужно скрыть то, что при написании скрипта очень сильное колдунство, чтобы никто больше им не воспользовался, а еще потому, что в таком виде скрипт работает довольно медленно. Для этого нужно скомпилировать его любым доступным способом, будь то онлайн компилятор, или соответственный модуль на локальной машине. Затем убрать стороннюю библиотеку. В итоге окончательный вариант сниппета будет выглядеть так:

Даже невооруженным глазом видно, насколько сложнее и запутанней получился код JS по сравнению с CoffeeScript. Поэтому, лучше сохранить исходник, если придется его дорабатывать.

Заключение

Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.

Закажи установку модуля: Функция «просмотренные товары» для своего магазина

Установка модуля от разработчиков InsalesThemes!
  • Удобные настройки модуля
  • Пожизненная гарантия на работу
  • Быстро и качественно
Успейте заказать установку модуля по специальной цене. Количество ограничено!
Закрыть

Ваша заявка отправлена!

В ближайшее время Вам на почту придет уведомление, а в течении нескольких часов мы свяжемся с Вами и уточним все детали по работе. Имейте ввиду - мы работает с понедельника по пятницу с 10:00 - до 19:00 по МСК