Покупая движок 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: якщо ви говорите україською, питайте краще так ;)

Вариант №2

Updated 2012-12-18: добавил второй вариант с проверкой наличия товаров в списке. Автор Александр предложил такой вариант: если товар уже находится в списке просмотренных, его туда не добавлять. Вы можете выбрать тот вариант, который вам больше нравится. Переписан именно первый блок, блок записи в хранилище. А блок вывода списка товаров остался прежним.

$(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); // здесь при необходимости можно сделать больше
}
/* запись в хранилище, при условии что текущего товара в нем нет */
lst = last_seen.split("||"); // выделяем строку, соответствующую формату переменной pr
var temp = []; // временная переменная, индикатор наличия в хранилище текущего товара
$(lst).each(function() //перебор хранилища
{
if ($(this)[0] == pr) //если в хранилище уже есть строка, соответствующая текущему товару ...
temp.push(this)[0]; // ...записываем ее в переменную temp
});
if (temp == "") // если временная переменная пустая - текущего товара нет в хранилище....
{
last_seen = pr + "||" + last_seen;
$.Storage.set( 'last_seen', last_seen); //.... записываем его в хранилище
}
}
});

Буду рад вашим отзывам и предложением по доработке скрипта.

Во втором варианте мы не проверяем наличие просмотренного товара в невидимом списке, то есть если он был просмотрен 10 и более товаров назад. Даже если гость не видит его в списке, но в массиве просмотренных он есть, проверка покажет его наличие и снова показывать не будет. Так что или снова допиливайте проверку, или используйте один из двух предложенных вариантов.

    11 Коментар на "Последние просмотренные товары в Shop-Script"

    Олег
    Гість

    Спасибо большое

    Александр
    Гість
    Да, Назар, или, все-таки, Дедушка :) , конечно, потому и выложил свой вариант, чтобы любой мог выбрать то, что больше по душе. Насчет логики – вы правы, сам до сих пор не могу определиться, какому варианту отдать предпочтение, вашему или своему. Насчет моего скрипта. Таки да :) Прочитал ваш коммент еще раз задумался и пришел к выводу, что мой скрипт надо еще допилить, заменив функцию обхода хранилища вот так: …. lst = last_seen.split("||"); // выделяем строку, соответствующую формату переменной pr var sch = 0; var temp = []; // временная переменная, индикатор наличия в хранилище текущего товара $(lst).each(function() //перебор хранилища… Читати далі »
    Александр
    Гість
    Хороший скрипт. Правда, на мой взгляд, есть у него один существенный недостаток – проверяется на дубль только последняя запись хранилища. Таким образом, если щелкнуть по предпоследней, получим две одинаковые, еще раз не последняя – четыре одинаковых и тд… Поэтому взял напильник и слегка допилил его. В итоге получилось вот что : $(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 &gt; 700) { last_seen = last_seen.substr(0,700); // здесь при необходимости можно сделать больше } /*… Читати далі »
    Роман
    Гість

    Да решение частное. У меня проблема была в том, что вывод избранного был в модальном окне. И оно грузилось по другому событию. Вообщем, ошибка была в несоблюдении порядка событий.
    Я просто повесил загрузку DOM из local storage на событие по загрузке модального окна. И все – избранное показывается.

    Роман
    Гість

    Вопрос снят – решение нашел.

    Роман
    Гість

    Спасибо за скрипт.
    Есть вопрос: я немножко переделал его, чтобы в localStorage вносились данные по клику на ссылке, а не по загрузке документа, как у вас (вообщем, “избранное” сделал).
    И показ “избранного” тоже сделал по клику.

    Все работает – добавляется. Но вот проблема: жму показать Избранное – DOM пустой. Если занесение в LS и показ оборачиваю в document ready – DOM заполняется только после обновления страницы. Как побороть?

    wpDiscuz