Дедушкин блог о дизайне и фрилансе

Покупая движок Shop-Script, заодно покупайте напильник — он вам точно понадобится. Сегодня, друзья, хочу поднять этот бокал.. нет, не то :). Сегодня, хочу поделиться с вами скриптом, который бы показывал посетителю последние просмотренные им товары в вашем магазине. Приступим?

Так как лезть в базы данных и php оооочень не хотелось, я предлагаю вам решение на js. Оно, конечно, не самое гибкое и, вероятно, вы найдёте в нём ошибки, но скрипт работает на браузерной стороне, не нагружая сервер, к тому же, очень прост в установке и работе и проверен в боях.

Для работы скрипта нам понадобятся две библиотеки: jquery (она в ss уже обычно установлена) и jquery.storage — локальное хранилище данных в браузере, где мы будем сохранять просмотренные товары и откуда брать данные для отображения.

Суть работы такова: если открыта страница с товаром, скрипт сохраняет её урл и заголовок в локальное хранилище. Чтобы не дублировать запись при обновлении страницы перед записью скрипт проверяет последний записанный элемент. Если он совпадает с текущим, запись не производим. А, чтобы не перегружать массив данными, мы будем обрезать запись из локального хранилища. Ограничим её, к примеру, до 700 символов. Этого хватит, а если нет, сделайте больше.

Подключаем и настраиваем

Для начала подключаем jquery.storage, скачав его отсюда:

<script src="jquery.Storage.js"></script>

Чтобы данные читались корректно, нам нужно залезть в smarty-темплейт нашего магазина и внести  небольшие правки. Зачем это нужно? Чтобы отличить страницу с товаром от любой другой, мы можем делать фильтр по урлу или поступить проще: в блок с названием товара добавить атрибут id=’pr_name’, который может быть только на странице товара. И если элемент с этим атрибутом присутствует, значит, открыта страница товара. Итак, ищем файл:

/published/SC/html/scripts/templates/frontend/product_name.html

и в нём заголовок h1, который меняем на следующее:

<h1 id="pr_name" rel="{$product_info.name}=={$product_info.productID}">{$product_info.name|escape:'html'}</h1>

Мы добавили идентификатор заголовку товара и в атрибуте rel указали разделённые двумя знаками «=» данные: название товара для записи в массив и его номер для ссылки.

Почему так: в ss можно указывать так называемый slug для товаров, по-нашему, красивый урл. Вместо /product/2240/ получая /product/kalendar-mohsen/. Чтобы избежать путаницы и лишних символов, мы записываем в локальное хранилище только номер товара.

Теперь создадим в любом месте сайта что-нибудь типа etc.js, где будет скрипт просмотра и записи. Не забудьте также подключить этот файл в html. Содержимое его будет делиться на две части: запись и вывод. Первая часть:

$(document).ready(function(){
var pr = $("#pr_name").attr("rel"); // pr = name==url;
if (pr) {
var last_seen = $.Storage.get('last_seen');
if (!last_seen) { last_seen = ""; }

/* обрезаем длинную строку */

var pr_len = last_seen.length;
if (pr_len > 700) {
last_seen = last_seen.substr(0,700); // здесь при необходимости можно сделать больше
}

/* узнаём последний просмотренный */

crnt = pr.split('==');
crnt = crnt[1]; //url текущего товара

lst = last_seen.split("||");
lst = lst[0]; // первый элемент
lst = lst.split("==");
lst = lst[1]; // url последнего просмотренного

if (lst != crnt) {
last_seen = pr + "||" + last_seen;
$.Storage.set( 'last_seen', last_seen);
}
}

Теперь просмотренные товары сохраняются и осталось только вывести их. Здесь я разленился и покажу простой вывод в виде ненумерованного списка, управлять которым вы сможете через css. Итак, просмотр.

$(document).ready(function(){
$("#last_seen_show").html("<ul></ul>");
var last_seen = $.Storage.get('last_seen');
last_seen = last_seen.split("||");
var res = 0;

$.each(last_seen, function(){
if ( res > '7' ) { return false; } /* счётчик */
crnt = $(this)[0].split("==");
if ( !crnt[1] ) { return false; }
$("#last_seen_show ul").append("<li><a href='/product/" + crnt[1] + "/'>" + crnt[0] + "</a></li>");
res += 1;
});
return false;
});

В блоке #last_seen_show мы и будем видеть последние просмотренные товары. Например, вы можете его вставить в боковую панель или в футер под товаром. Или же показывать по клику, как мы сделали в панельке на мебельном.

Не забудьте после внесения правок в темплейт почистить кэш вашего магазина в installer, иначе будете долго ругаться, мол ничего не работает.

А ваши вопросы задавайте в письмах ко мне в деревню или же в комментариях. Люблю, целую, всем успехов!

PS: якщо ви говорите україською, питайте краще так ;)

Вам тут просили передать: