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

В очередной раз столкнулся с блоком «Просмотренные товара» на одном из макетов 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 дружелюбно, но зато работает и все отлично
0 комментариев