Предупреждение!
Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.
Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе
Преамбула
Принцип работы скрипта ранее просмотренных товаров заключается в том, чтобы при рендеринге в браузере страницы продукта, его id записывался в cookie, а при открытии другой страницы, товары из cookie получались с сервера с помощью JSON (“/products_by_id/{id через запятую}.json”) и выводились в виде списка в определенный блок.
Сам скрипт идентичен представленному
на сайте Insales, однако принцип установки несколько иной.
Кофе для Insales
JavaScript, особенно в связке с Jquery, либо другими библиотеками или фреймворками довольно удобен, понятен и функционален. Однако, есть и существенные недостатки, одним из которых является огромное количество скобок и, по сути, совершенно не нужных знаков, символов и прочих неудобств, не говоря уже о том, что при нарушении форматирования можно просто запутаться во вложенности. Чтобы обойти эти проблемы, сэкономить свое время и нервы, особо ленивыми программистами был придуман язык, совмещающий в себе вложенность Python-style, синтаксис Ruby-style и компилирущийся в обычный JS, понятный браузерам. Отдельной особенностью является то, что он был написан сам на себе. Темные силы программирования в действии. Речь идет о CoffeeScript. Подробнее о нем можно узнать и почитать документацию
тут.
Процесс
Для начала, нужно создать сниппет в шаблоне, назовем его ‘recently_viewed’.
Далее, нам понадобится библиотека, компилирующая CoffeScript в JS. В сниппете подключаем и создаем скрипт с соответственным атрибутом, чтобы библиотека знала, что нужно компилировать.
<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>"><a href="https://cdn.rawgit.com/jashkenas/coffeescript/mast..">https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>.</a>">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>"><a href="<a href=" https:="" cdn.rawgit.com="" jashkenas="" coffeescript="" mast."=""></a><a href="<a href=" https:="" cdn.rawgit.com="" jashkenas="" coffeescript="" mast.."="">https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>">https://cdn.rawgit.com/jashkenas/coffeescript/mast.....">https://cdn.rawgit.com/jashkenas/coffeescript/mast....">
https://cdn.rawgit.com/jashkenas/coffeescript/mast...">
Далее, создаем функцию, прописывающую id товара в cookie:
<script type="text/coffeescript">
saveProduct = (pid) ->
mod_recently_view_count = 3
if $.cookie('product_ids')?
arr = $.cookie('product_ids').split ','
for prod in arr
return if prod is pid
arr.shift() if arr.length >= mod_recently_view_count
arr.push pid
$.cookie 'product_ids', arr, { path: '/' }
else
$.cookie 'product_ids', pid, { path: '/' }
console.log $.cookie 'product_ids'
</script>
Здесь задаем максимальное количество выводимых товаров, далее, если cookie уже существуют, достаем из них массив, добавляем еще один id, если нужно удаляем старое значение. Если же cookie нет, то создаем.
Далее прописываем основную логику. Ту, что будет выводить товары на экран.
<script type="text/coffeescript">
saveProduct = (pid) ->
mod_recently_view_count = 3
if $.cookie('product_ids')?
arr = $.cookie('product_ids').split ','
for prod in arr
return if prod is pid
arr.shift() if arr.length >= mod_recently_view_count
arr.push pid
$.cookie 'product_ids', arr, { path: '/' }
else
$.cookie 'product_ids', pid, { path: '/' }
console.log $.cookie 'product_ids'
$ ->
if $.cookie('product_ids')?
$.getJSON "/products_by_id/#{$.cookie('product_ids')}.json",
(data) ->
products = ''
for product in data.products
if product.images.length > 0
products += "<li><a href=\"/product/?product_id=#{ product.id }\" class=\"img fl\"><img src=\"#{product.images[0].url}\" alt=\"#{ product.title }\" /></a>"
products += "<a href=\"/product/?product_id=#{ product.id }\" class=\"title\">#{ product.title }</a>"
products += "<div class=\"buyzone\"><p class=\"price\">#{ InSales.formatMoney(product.variants[0].base_price, "")}</p>"
if product.variants[0].old_price?
products += "<p class=\"old-price\">#{ InSales.formatMoney(product.variants[0].old_price, "") }</p>"
products += "</div></li>"
$('#mod-recently-view').html products
$('#recently_view').show()
{% if template == 'product' %}
saveProduct ""
{% endif %}
</script>
Если cookie существуют, через JSON получаем данные товаров, содержащихся в них и каждый прописываем в виде HTML строковую переменную, далее добавляем переменную в нужный блок. После всего, если текущая страница является товаром, вызывается функция записи в cookie. Логическая часть на этом кончается.
Интеграция
Стили по вкусу, возмем из примера Insales и добавим в сниппет.
<style>
.style-block {
display: none;
}
.style-block h2 {
color: #262626;
}
.small-prod-list li {
overflow: hidden;
margin-bottom: 15px;
border-top: 1px solid #e1e4d9;
padding-top: 15px;
}
.small-prod-list .title {
font-size: 116%;
color: #262626;
margin-bottom: 10px;
display: block;
text-transform: uppercase;
font-weight: bold;
}
.small-prod-list a.title:hover {
text-decoration: none;
}
.small-prod-list img {
max-height: 48px;
max-width: 48px;
vertical-align: middle;
margin-top: -2px;
}
.small-prod-list .img {
display: block;
height: 50px;
margin-right: 10px;
width: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.small-prod-list .buyzone {
padding-top: 5px;
}
.small-prod-list .price {
font-size: 18px;
font-weight: bold;
color: #70543f;
//float: right;
}
.small-prod-list .old-price {
text-decoration: line-through;
}
.buyzone p {
margin-bottom: 10px;
}
</style>
Остается подключить сниппет в шаблоне layout перед закрывающим тегом body:
</footer>
{% include 'recently_viewed' %}
</body></html>
…и добавить сам блок, в котором будут выводиться товары в подходящее место:
<div class="style-block" id="recently_view">
<h2>Вы смотрели
<ul class="small-prod-list" id="mod-recently-view">
</ul>
</div>
Результат
После неспешного ползания по сайту, в заранее отведенных местах стали появляться ранее просмотренные товары, как и планировалось.
Замести следы
Естественно, нужно скрыть то, что при написании скрипта очень сильное колдунство, чтобы никто больше им не воспользовался, а еще потому, что в таком виде скрипт работает довольно медленно. Для этого нужно скомпилировать его любым доступным способом, будь то онлайн компилятор, или соответственный модуль на локальной машине. Затем убрать стороннюю библиотеку. В итоге окончательный вариант сниппета будет выглядеть так:
<script type="text/javascript">
(function() {
var saveProduct;
saveProduct = function(pid) {
var arr, i, len, mod_recently_view_count, prod;
mod_recently_view_count = 3;
if ($.cookie('product_ids') != null) {
arr = $.cookie('product_ids').split(',');
for (i = 0, len = arr.length; i < len; i++) {
prod = arr[i];
if (prod === pid) {
return;
}
}
if (arr.length >= mod_recently_view_count) {
arr.shift();
}
arr.push(pid);
return $.cookie('product_ids', arr, {
path: '/'
});
} else {
$.cookie('product_ids', pid, {
path: '/'
});
return console.log($.cookie('product_ids'));
}
};
$(function() {
if ($.cookie('product_ids') != null) {
$.getJSON("/products_by_id/" + ($.cookie('product_ids')) + ".json", function(data) {
var i, len, product, products, ref;
products = '';
ref = data.products;
for (i = 0, len = ref.length; i < len; i++) {
product = ref[i];
if (product.images.length > 0) {
products += "<li><a href=\"/product/?product_id=" + product.id + "\" class=\"img fl\"><img src=\"" + product.images[0].url + "\" alt=\"" + product.title + "\" /></a>";
}
products += "<a href=\"/product/?product_id=" + product.id + "\" class=\"title\">" + product.title + "</a>";
products += "<div class=\"buyzone\"><p class=\"price\">" + (InSales.formatMoney(product.variants[0].base_price, "")) + "</p>";
if (product.variants[0].old_price != null) {
products += "<p class=\"old-price\">" + (InSales.formatMoney(product.variants[0].old_price, "")) + "</p>";
}
products += "</div></li>";
}
return $('#mod-recently-view').html(products);
});
$('#recently_view').show();
}
{% if template == 'product' %}
return saveProduct("");
{% endif %}
});
}).call(this);
</script>
<style>
.style-block {
display: none;
}
.style-block h2 {
color: #262626;
}
.small-prod-list li {
overflow: hidden;
margin-bottom: 15px;
border-top: 1px solid #e1e4d9;
padding-top: 15px;
}
.small-prod-list .title {
font-size: 116%;
color: #262626;
margin-bottom: 10px;
display: block;
text-transform: uppercase;
font-weight: bold;
}
.small-prod-list a.title:hover {
text-decoration: none;
}
.small-prod-list img {
max-height: 48px;
max-width: 48px;
vertical-align: middle;
margin-top: -2px;
}
.small-prod-list .img {
display: block;
height: 50px;
margin-right: 10px;
width: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.small-prod-list .buyzone {
padding-top: 5px;
}
.small-prod-list .price {
font-size: 18px;
font-weight: bold;
color: #70543f;
//float: right;
}
.small-prod-list .old-price {
text-decoration: line-through;
}
.buyzone p {
margin-bottom: 10px;
}
</style>
Даже невооруженным глазом видно, насколько сложнее и запутанней получился код JS по сравнению с CoffeeScript. Поэтому, лучше сохранить исходник, если придется его дорабатывать.
Заключение
Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.