Создание "Избранного" на сайте.

Готовый код /


Как известно, штатного способа создать «Избранное» в Insales нет. Тем не менее, есть решение не базирующееся на функционале магазина.

Данный код был взят из открытых источников.

Синопсис


Идея довольно простая — создать в админке страницу с определенным адресом, предположим, «page/wishlist» и научить шаблон «Страница» понимать, что именно по этому URL находится избранное. Далее всю работу делает cookie.

Создаем страницу


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


Далее переходим в раздел редактора и выбираем шаблон «Страница»

Здесь нужно прописать логику определения страницы. Она предельно проста.
{% if page.url == '/page/wishlist'  %}{% endif %}

И все, что будет происходить на этой странице, будет прописываться между этих тегов.

Логика добавления

Прописывается в шаблоне HTML, чтобы можно было добавлять товары из любого раздела сайта.

Если кратко: ID товара записывается в cookie. Довольно объемный код занимается определением записан ли туда товар или еще нет.

$(document).ready(function() {
    $(".wishlist").live('click', function(e) { 
    	e.preventDefault();
        if ($.cookie('wishlist_ids') != null && $.cookie('wishlist_ids') != '') {
          var arr = $.cookie('wishlist_ids').split(',');
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] == $(this).data('id')) {
              $('.popup').html('Этот товар уже в избранном!');
              $('.popup').fadeIn("slow");
              $('.popup').fadeOut("slow");
              	return;
            }
          }
          if (arr.length >= 10) {
            arr.shift();
          }

          arr.push($(this).data('id'));
          $.cookie('wishlist_count', arr.length, {
              path: '/'
            });
          if ( $.cookie('wishlist_count')) {
          	$('.wishlist_count').html('('+arr.length+')');
          } else {
          	$('.wishlist_count').html('(0)');
      	  }

          arr = arr + '';
          $.cookie("wishlist_ids", null, {
            path: '/'
          });
          if ($(this).children("span").length){
          $(this).children("span").addClass("wishlist-active");
          }
          else
          {
          $(this).addClass("wishlist-active");
          }
          $('.popup').html('Товар добавлен в избранное');
          $('.popup').fadeIn("slow");
          $('.popup').fadeOut("slow");
          $.cookie('wishlist_ids', arr, {
            path: '/'
          });

        } else {
          $.cookie('wishlist_ids', $(this).data('id'), {
            path: '/'
          });
          if ($(this).children("span").length){
          $(this).children("span").addClass("wishlist-active");
          }
          else
          {
          $(this).addClass("wishlist-active");
          }
          $('.popup').html('Товар добавлен в избранное');
          $('.popup').fadeIn("slow");
          $('.popup').fadeOut("slow");
          $.cookie('wishlist_count', '1', {
              path: '/'
            });
        }
      });
      $(".wishlist").each( function() {       if ($.cookie('wishlist_ids') != null && $.cookie('wishlist_ids') != '') {
          var arr = $.cookie('wishlist_ids').split(',');
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] == $(this).data('id')) {
          if ($(this).children("span").length){
           $(this).html('<span></span>В избранном');
          $(this).children("span").addClass("wishlist-active");
           
          return;
          }
          else
          {
          $(this).addClass("wishlist-active");
          return;
          }
              	
            }
          }
      }
          });      	
      	
    
});

  </script>


Немного о классах и объектах.

Объект с классом «wishlist» — кнопка добавления.
Код ее должен быть таким
<a href="#" class="wishlist" data-id="{{ product.id }}"><span></span>Избранное</a>

Класс «wishlist-active» — меняет цвет/кнопку при добавлении. В нем может быть все что нравится.
Объект с классом «popup» какой-нибудь div изображающий всплывающее окно.

Страница «Избранного»


Код вставляется в шаблон «Страница»
На экран выводятся результаты из cookie и кнопки удаления избранного.
<script>
	$(function() {   
    	if($.cookie('wishlist_ids') != null) {
      		$.getJSON("/products_by_id/"+$.cookie('wishlist_ids')+".json",
    		function(data){
              var products = '{% if settings.show_wish_del_all %}<a class="wishlist__remove_all wishdel wishdelall">Удалить все</a>{% endif %}<div class="catalog negative-grid products">';
      			$.each(data.products, function(i,product){
        			products += '<article class="grid_3 article"><div class="prev"><a href="/product/?product_id=' + product.id + '"><img src="'+product.images[0].medium_url+'" title="'+ product.title +'" alt="'+ product.title +'"></a></div>';
        			products += '<h3 class="title">'+ product.title +'</h3>';
                  products += '<div class="cart"><div class="price"><div class="vert">'+InSales.formatMoney(product.variants[0].price)+'<div class="price_old">'+InSales.formatMoney(product.variants[0].old_price)+'</div></div></div>{% if settings.show_wish_del %}<a class="wishlist__remove wishdel" rel="' + product.id + '">Х</a>{% endif %}</div></article>';
      			});
              products += '</div>';  
      			$('.wishlist__block').html(products);
			});
		}
      	else
        {
        var products = '<div class="no_goods_block">'
            products += '<h6 style="display: inline-block; margin: 0; margin-top: 12px;">В избранном товаров нет</h6><button style="display: inline-block; float: right;" type="button" onclick="location.href='
             products += "'/'"
             products +=  '">На главную</button><div class="clear"></div></div>';
        $('.wishlist__block').html(products);
        }

		$('.wishlist__remove').live('click', function() {
			cookieName = 'wishlist_ids';
			cookieRemoveId = $(this).attr('rel');
			cookieCounter = 'wishlist_count';
			$(this).parents('.grid_3').animate({opacity: 0.2}, 1000);
			deleteIdFromCookie(cookieName, cookieRemoveId, cookieCounter);
		});

      		$('.wishlist__remove_all').live('click', function() {
			$.cookie('wishlist_ids', null, {
              path: '/'
            })
			$('.wishlist__remove').parents('.grid_3').animate({opacity: 0.2}, 1000);
			$('.wishlist__remove_all').html('Удалено!');
		});

		function deleteIdFromCookie(cookie_name, pid, counter_cookie) {
        var arr = $.cookie(cookie_name).split(',');
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == pid) {
            arr.splice(i, 1);
            $.cookie(counter_cookie, arr.length, {
              path: '/'
            });
            $('.' + counter_cookie).html('('+arr.length+')');
            arr = arr + '';
            $.cookie(cookie_name, arr, {
              path: '/'
            });
            return;
          }
        }
      }



 	}); 
	</script>


Таким образом получается страница «Избранного», работающая без каких либо изменений в движке сайта. При переустановке шаблона нужно всего лишь добавить страницу с нужным URL.

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

Dead_horse
Т. е. это Избранное доступно только с того компьютера, на котором его начали использовать (раз хранится в куках)?
vacuumtubedriver
Да, только с того компьютера. Причем для одного браузера.
wonder
На сайте есть ещё одна статья по реализации избранного:
insalesclub.ru/insales-snippets/2014/06/09/delaem-izbrannye-tovary-pokupateley-v-magazine-na-insales.html

Но фишка способа, описанного в этой статье в том, что количество добавляемых товаров может быть неограниченным. В прошлой статье это ограничение было в размере 4 товаров
Dead_horse
Да, ограничение в 4 товара все портит.
В идеале кроме снятия всех ограничений хорошо бы иметь возможность видеть в админке статистику по добавленному в избранное, а еще давать возможность пользователям делиться (шэрить) свое избранное с друзьями, чтобы те могли придти по ссылке и купить подарок из вишлиста (аналог отдельных сервисов вишлистов) ) И считать конверсию покупок из шэров избранного. Когда-нибудь мы закажем такую разработку :)
Anastasia_Kachalova
Расширить описанный модуль с учетом шейра в принципе не сложно.
По всему остальному надо подумать. В админку статистику добавления вряд ли когда-либо добавят, но вполне (теоретически) можно ее получить во внешних сервисах типа google analytics, ну или накрайняк разработать свое внешнее приложение.
wonder
Отличные идеи для доработки, может выльется все это в отдельный модуль для Инсейла
Dead_horse
У меня много таких идей. Если будете делать, могу помочь. Ну и предоставить для тестирования свой магазин :)
wonder
В личку можешь мне написать все свои идеи
Anastasia_Kachalova
Респект. Описанный способ — лучший из существующих. Так же можно для любых целей сохранять список товаров. Последние просмотренные по сути так же работают.
booster
Приятно конечно что из наших шаблонов уже прут код, значит мы не в пустую работаем
Anastasia_Kachalova
Так js любой мало-мальски понимающий верстальщик скопирует без проблем, а почитает пару статей документации — и допишет все остальное.
Если хотите защитить свои скрипты от копирования — предусматривайте соответствующую защиту, как это делают разработчики платных скриптов, кто ж Вам мешает? :)
booster
Да ладно, нам не жалко
poison67
Я тоже как-то давно делал вишлист, но с шером и проверкой наличия товара на сайте.
mrjones.ru/page/wishlist-share?products=14565152,14565153

А еще, если бы в кабинете в профиль пользователя можно было добавлять дополнительные поля, то сделал бы его доступный с других устройств.
Andy
Как с вами можно связаться? Пытаюсь через ЛС :)
Спасибо.
poison67
Не сразу увидел ваше сообщение) Отверил в ЛС.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.