
Преамбула
Принцип работы скрипта ранее просмотренных товаров заключается в том, чтобы при рендеринге в браузере страницы продукта, его 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>
Результат
После неспешного ползания по сайту, в заранее отведенных местах стали появляться ранее просмотренные товары, как и планировалось.
Замести следы
Естественно, нужно скрыть то, что при написании скрипта очень сильное колдунство, чтобы никто больше им не воспользовался, а еще потому, что в таком виде скрипт работает довольно медленно. Для этого нужно скомпилировать его любым доступным способом, будь то онлайн компилятор, или соответственный модуль на локальной машине. Затем убрать стороннюю библиотеку. В итоге окончательный вариант сниппета будет выглядеть так:
Даже невооруженным глазом видно, насколько сложнее и запутанней получился код JS по сравнению с CoffeeScript. Поэтому, лучше сохранить исходник, если придется его дорабатывать.
