Список просмотренных товаров на InSales

Готовый код / 5 июня 2014, 22:49

В очередной раз столкнулся с блоком «Просмотренные товара» на одном из макетов InSales.

Предлагаю очень простое и универсальное решение для вывода блока с разным содержимым. Сделаем мы это благодаря плагину jquery cookie

1) Загружаем файл jquery.cookie в папку со скриптами
2) Подключаем в шаблоне HTML плагин с помощью кода:

<script src="{{ 'jquery.cookie.js' | asset_url }}"></script>

3) Создаем новый сниппет в шаблоне. Называем его last_view (или на ваше усмотрение)
4) Размещает в сниппете такой код:


//Код всего блока в котором отображаются просмотренные товары. Его нужно изменить под свой Шаблон
<div class="related-product">
    <div class="titleHeader clearfix">
        <h3>Вы просматривали</h3>
    </div><!--end titleHeader-->

    <div class="row">
    //К ID recently-view у нас привязываются добавляемые товары
    <ul class="hProductItems clearfix" id="recently-view">
    </ul>
    </div><!--end row-->
</div><!--end related-product-->

// Указываем количество выводимых товаров. В данном случае 3
{% assign mod_recently_view_count = 3 %}

<script type="text/javascript">
  // Функция сохранения товаров при просмотре. Она нам не интересна, оставляем без изменений
  function saveProduct(pid) {
        if ($.cookie('product_ids') != null) {
          var arr = $.cookie('product_ids').split(',');
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] == pid) {
              return;
            }
          }
          if (arr.length >= {{ mod_recently_view_count }}) {
            arr.shift();
          }
          arr.push(pid);
          $.cookie('product_ids', arr, {
            path: '/'
          });
        } else {
          $.cookie('product_ids', pid, {
            path: '/'
          });
        }
      }
  
  $(function() {   
    if($.cookie('product_ids') != null) {
      $.getJSON("/products_by_id/"+$.cookie('product_ids')+".json",
        function(data){
          var products = '';
          $.each(data.products, function(i,product){
            //Тут у нас самый главный код. В переменную products подгружается код товаров. Основные изменения нужно делать тут
            products += '<li class="span3 clearfix"><div class="thumbnail"><a href="/product/?product_id=' + product.id + '"><img src="'+ product.images[0].medium_url +'"></a></div>';
            products +=  '<div class="thumbSetting"><div class="thumbTitle"><a href="/product/?product_id=' + product.id + '" class="invarseColor">'+ product.title + '</a></div></p>';
            products += '<div class="thumbPrice"><span>' + InSales.formatMoney(product.variants[0].base_price, "{{money_with_currency_format}}")+'</span></div>';
            products += '</div></li>';
          });
          $('#recently-view').html(products);
        });
      $('#recently_view').show();
    }
    {% if template == 'product' %}
      saveProduct({{product.id}});
    {% endif %}
     });    
</script>

5) Подгоняем код под свой шаблон. Добавляем\убираем лишние блоки и т.д.
6) В нужном месте шаблона выводим наш сниппет:

{% include 'last_view' %}

Собственно принцип работы простой. Можете для начала просто скопировать этот код, убрав комментарии начинающиеся с двух слешей (//) и посмотреть как он выводиться на сайте. Затем постепенно подгонять под стиль своего сайта. Всю работу сможет осилить даже профан в программировании — методом тыка. Учитесь, разбирайтесь. А если не получится — отписывайтесь в комментариях, будем решать проблему вместе.

Единственное неудобство — ссылка на страницу товара будет иметь вид
/product/?product_id=ID
Не слишком SEO дружелюбно, но зато работает и все отлично

Insales Club

Список просмотренных товаров на InSales

0 комментариев