Приветствую, друзья! И у нас новая статья о том как вывести просмотренные пользователем товары. Для решение данной задачи мы будем использовать компонент Looked из репозитория modstore.pro. Принцип работы достаточно прост: нам нужно сапомнить те карточки товаров, на которые заходил пользователь, так что те, кто хочет потренироваться в PHP, может написать сниппет для сохранения id товаров в сессию пользователя. Ну, а мы с вами пойдем по пути наименьшего сопротивления и реализуем данную функцию с помощью уже готового компонента.
После того как мы скачали и установили компонент, давайте посмотрим, что идет с ним в комплекте:
- addLooked – сниппет, который добавляет id товара в сессию
- looked – вывод на экран результатов, если они есть
Теперь давайте посмотрим место, куда нам нужно вывести наши просмотренные карточки товаров:
Тут у нас с вами будет формироваться слайдер. Что ж приступим! Для начала создадим чанк нашего товара в слайдере (lookedProductTpl):
<div class="no-margin carousel-item product-item-holder size-small hover"> <form method="post" class="ms2_form"> <input type="hidden" name="id" value="{$id}"> <input type="hidden" name="count" value="1"> <input type="hidden" name="options" value="[]"> <div class="product-item"> {if $favorite?} <div class="ribbon red"><span>Скидка</span></div> {/if} {if $new?} <div class="ribbon blue"><span>Новый!</span></div> {/if} {if $popular?} <div class="ribbon green"><span>Популярный</span></div> {/if} <div class="image"> {if $image?} <img src="assets/images/blank.gif" data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}"/> {else} <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png" srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x" alt="{$pagetitle}" title="{$pagetitle}"/> {/if} </div> <div class="body"> <div class="title"> <a href="{$id | url}">{$pagetitle}</a> </div> <div class="brand">{$_pls['vendor.name']}</div> </div> <div class="prices"> <div class="price-current text-right">{$price} <i class="fa fa-ruble"></i></div> </div> <div class="hover-area"> <div class="add-cart-button"> <button type="submit" name="ms2_action" value="cart/add" class="le-button">В корзину</button> </div> <div class="wish-compare"> <a class="btn-add-to-wishlist" href="#">Add to Wishlist</a> <a class="btn-add-to-compare" href="#">Compare</a> </div> </div> </div> </form> </div>
Мы с вами уже создавали подобные чанки, я думаю, что у вас не возникнет проблем. Далее в шаблоне товара нам нужно вызвать сниппет addLooked:
[[!addLooked? &templates=`7` &limit=`15` ]]
&templates – это id нашего шаблона товаров (их можно указывать через запятую), указал на всякий случай
&limit – это максимальное количество товаров в сессии
Теперь нам нужно еще создать чанк обертки (lookedOuterCustomTpl):
<section id="recently-reviewd" class="wow fadeInUp"> <div class="container"> <div class="carousel-holder hover"> <div class="title-nav"> <h2 class="h1">Вы смотрели</h2> <div class="nav-holder"> <a href="#prev" data-target="#owl-recently-viewed" class="slider-prev btn-prev fa fa-angle-left"></a> <a href="#next" data-target="#owl-recently-viewed" class="slider-next btn-next fa fa-angle-right"></a> </div> </div> <div id="owl-recently-viewed" class="owl-carousel product-grid-holder"> [[+output]] </div> </div> </div> </section>
Остался последний шаг – вызвать в шаблоне товара сниппет looked:
[[!looked? &tplOuter=`lookedOuterCustomTpl` &tpl=`lookedProductTpl` ]]
Вывели? Осталось проверить работает ли наш блок просмотренных товаров.
У меня работает! А у вас?
В видео нашёл!!! на 10:30