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

Как известно, штатного способа создать «Избранное» в 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 комментариев
insalesclub.ru/insales-snippets/2014/06/09/delaem-izbrannye-tovary-pokupateley-v-magazine-na-insales.html
Но фишка способа, описанного в этой статье в том, что количество добавляемых товаров может быть неограниченным. В прошлой статье это ограничение было в размере 4 товаров
В идеале кроме снятия всех ограничений хорошо бы иметь возможность видеть в админке статистику по добавленному в избранное, а еще давать возможность пользователям делиться (шэрить) свое избранное с друзьями, чтобы те могли придти по ссылке и купить подарок из вишлиста (аналог отдельных сервисов вишлистов) ) И считать конверсию покупок из шэров избранного. Когда-нибудь мы закажем такую разработку :)
По всему остальному надо подумать. В админку статистику добавления вряд ли когда-либо добавят, но вполне (теоретически) можно ее получить во внешних сервисах типа google analytics, ну или накрайняк разработать свое внешнее приложение.
Если хотите защитить свои скрипты от копирования — предусматривайте соответствующую защиту, как это делают разработчики платных скриптов, кто ж Вам мешает? :)
mrjones.ru/page/wishlist-share?products=14565152,14565153
А еще, если бы в кабинете в профиль пользователя можно было добавлять дополнительные поля, то сделал бы его доступный с других устройств.
Спасибо.