Блок "Вы смотрели" в MODx Revo

Приветствую, друзья! И у нас новая статья о том как вывести просмотренные пользователем товары. Для решение данной задачи мы будем использовать компонент 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`
]]

Вывели? Осталось проверить работает ли наш блок просмотренных товаров.

У меня работает! А у вас?