Делаем избранные товары покупателей в магазине на InSales

Готовый код /
Делаем избранные товары покупателей в магазине на InSales
К сожалению такого важного функционала как «Избранные товары» на данный момент нету. Надеюсь со временем он появится, но что же делать, если этот функционал нужен уже сейчас. Выход есть, как обычно не совсем красивый, но лучше чем ничего.

В InSales существует раздел сравнение товаров, который с помощью нескольких скриптов можно превратить в избранные товары, но с одним ограничением:

  1. Добавить можно только 4 товара. Больше движок не позволит

Если же и такой вариант вас устраивает — сейчас расскажу как его воплотить в жизнь.

1) Создаем файл CustomCompare.js
2) Добавляем туда такое содержимое:

var removeCompareItem = function(product_id) {
    var fields =  new Object;
    fields['_method'] = 'delete';
    var path   = '/compares/' + product_id + '.json';
    show_preloader();
    $.ajax({
        url:      path,
        type:     'post',
        data:     fields,
        dataType: 'json',
        success:  function(response) {
            $('.compare_' + product_id).remove();
            hide_preloader();
        },
        error:  function(response) {
            hide_preloader();
        }
    });
}

InSales.CompareCustom = function(options) {
  /* Сообщения по умолчанию */
  var textAdd = 'Товар добавлен в избранное';
  var textLink = '+В избранное';
  var textRepeat = 'Этот товар уже добавлен';
  var textCompareEnd = 'Добавить в избранное можно не более 4-х товаров';

  var compare = this;
  var productsCounter = 0;
  var ProductId = 0;
  var ProductIdRepeat = false;

  this.otherText = function() {
    if(this._textAdd) {
      textAdd = this._textAdd;
    }
    if(this._textLink) {
      textLink = this._textLink;
    }
    if(this._textRepeat) {
      textRepeat = this._textRepeat;
    }
    if(this._textCompareEnd) {
      textCompareEnd = this._textCompareEnd;
    }
  }

  this.get_text = function(text) {
    if (!text) return text;
    return text.replace(/\+/g, ' ');
  }

  this.reload = function() {
    try {
      this.products = $.parseJSON($.cookie('compare'));
    } catch(e) {
      this.products = null;
    }

    if (!this.products) {
      this.products = [];
        return;
      }

      productsCounter = this.products.length;

      $(this.products).each(function(index, product) {
        $('a[rel='+this.id+']').not('.compare_delete').addClass('compare-added');
        product['title'] = compare.get_text(product['title']);
      });
    }

    this.removeItemTrigger = function(){
      $('.remove_compare').each(function(i) {
        if ( $(this).attr('processed') ) { return; }
        $(this).attr('processed',true);
        var product_id = $(this).attr('rel');

        $(this).click(function(e){
          e.preventDefault();
          compare.removeItem(product_id);
        });
      });
    }

    this.removeItem = function(product_id) {
      var fields =  new Object;
      fields['_method'] = 'delete';
      var path   = '/compares/' + product_id + '.json';
      show_preloader();
      $.ajax({
        url:      path,
        type:     'post',
        data:     fields,
        dataType: 'json',
        success:  function(response) {
          $('.compare_' + product_id).remove();
          $('a[rel='+product_id+']').removeClass('compare-added');
          compare.reload();
          hide_preloader();
          compare.draw();
        },
        error:  function(response) {
          hide_preloader();
        }
      });
    }

    this.addItemTrigger = function() {
      $(this.selector).on('click', function(){
        productsCounter = productsCounter+1
        var product_id = $(this).attr('rel');
        var path   = '/compares.json';

        ProductId = product_id;

        compare.checkIsRepeated();
        show_preloader();
        
        if(productsCounter > 4) {
          set_preloaders_message('<div id="add_product_notification"><h3>'+textCompareEnd+'</h3></div>');
          window.setTimeout(hide_preloader, 1000);
        } else {
          $(this).addClass('compare-added');
          $.ajax({
            url:      path,
            type:     'post',
            data:     {'product[id]': product_id},
            dataType: 'json',
            success:  function(response) {
              compare.reload();
              compare.draw();
              if (ProductIdRepeat == true) {
                set_preloaders_message('<div id="add_product_notification"><h3>'+textRepeat+'</h3></div>');
                window.setTimeout(hide_preloader, 1000);
              } else {
                set_preloaders_message('<div id="add_product_notification"><h3>'+textAdd+'</h3></div>');
                window.setTimeout(hide_preloader, 1000);
              }
            },
            error:  function(response) {
              hide_preloader();
            }
          });
        }
      });
    }

    this.draw = function() {
      this.drawCallback(this.products);
      this.removeItemTrigger();
    }

    this.checkIsRepeated = function() {
      ProductIdRepeat = false;
      $.each(this.products, function() {
        if(ProductId == this.id) {
          ProductIdRepeat = true;
          return false;
        } else {
          ProductIdRepeat = false;
        }
      });
    }

    this.init = function(options) {
      this.drawCallback = options.draw;
      this.selector = options.selector;
      this._textAdd = options._textAdd;
      this._textLink = options._textLink;
      this._textRepeat = options._textRepeat;
      this._textCompareEnd = options._textCompareEnd;
      this.otherText();
      this.reload();
      this.draw();
      this.addItemTrigger();
    }

    this.init(options);
}

3) Подключаем скрипт для работы. Так же нам потребуется jquery.cookie (скачать его можно в интернете)

<script src="{{ 'jquery.cookie.js' | asset_url }}"></script>
<script src="{{ 'CustomCompare.js' | asset_url }}"></script>
<script type="text/javascript">
    $(function() {
      $("a.add_to_compare").on('click',function(e){ 
        e.preventDefault(); 
      });
      new InSales.CompareCustom({
        selector: 'a.add_to_compare',
        draw: function(products) {
          $(".btn-favorites").html('Избранное: '+ products.length +'');
        }
      });
      
        $(".compare_delete").on("click",function(e){ e.preventDefault(); removeCompareItem($(this).attr("rel")); });

    });
</script>

4) Теперь нам нужно в нужные места шаблона вставить элементы, на которые у нас настроены обработчики в скрипте:
.btn-favorites — Отвечает за кнопку/текст, в котором выводится текущее кол-во избранных товаров
Пример:
<a href="/compares/" class="btn btn-favorites">Избранное: 0</a>


.add_to_compare — кнопка для добавления товара в избранное. В атрибуте rel должен быть указан ID товара
Пример:
<a rel="28652101" class="like add_to_compare"></a>

У этой же кнопки, после добавления в избранное, будет добавлен новый класс: .compare-added
Пример:
<a rel="28652101" class="like add_to_compare compare-added"></a>

.compare_delete — кнопка для удаления товара из корзины. В атрибуте rel должен быть указан ID товара
Пример:
<a href="/product/tovarnyy-domik" rel="28651893" class="delete compare_delete"></a>

.compare_ID — блок с товарам на странице с избранным. Этот элемент у нас удаляется со страницы, когда мы нажимаем на кнопку «Удалить».
Пример:

                        <div class="image">
                            <a href="/product/tovarnyy-domik"><img src="http://static2.insales.ru/images/products/1/67/33865795/thumb_cart-img1.png" width="76" height="60" alt="Товарный домик"></a>
                        </div>
                        <div class="desc">
                            <div class="name">Товарный домик</div>
                            <a href="#" class="rating rate"></a>
                            <span>Артикул: 51231</span> 
                        </div>
                        <div class="price-unit">
                            123123 руб
                        </div>
                        <div class="action">
                          <form action="/cart_items" method="post" id="order">
                            <input type="hidden" name="variant_id" value="43686216">
                            <a class="buy"></a>
                            <a href="/product/tovarnyy-domik" rel="28651893" class="delete compare_delete"></a>
                           </form><!--end form-->
                        </div>
                    </div>

Пример работы скриптов можно посмотреть на сайтах: luxlite-shop.ru или excellenttoys.ru

Вот, собственно, и все. Для многих информация будет полезна. А тот кто не до конца разобрался — отписывайте в комментариях

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

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.