В данном уроке мы рассмотрим как в MODX при помощи бесплатного дополнения looked из репозитория modstore.pro. Так как подобные блоки обычно делают в интернет-магазинах, разберемся с тем, как вывести просмотренные пользователем товары (на базе minishop).
Принцип работы компонента Looked достаточно прост, он регистрирует все просмотренные страницы и записывает их id в сессию пользователя.
Документация по Looked
После активации компонента, у вас появится 2 сниппета:
- addLooked – добавляет id посещенных страниц в сессию;
- looked – вывод на экран результатов, если они есть.
Сниппет addLooked: регистрация просмотренных страниц
- Все просмотры сохраняются в сессию.
- Возможность указать шаблоны
Параметры:
- &limit — Ограничение записи в сессию, по умолчанию 5.
- &templates — ID шаблонов через запятую, где нужно учитывать просмотры. Если пусто — учитывать везде, при условии что сниппет [[addLooked]] вызывается в каждом шаблоне. Или разместите сниппет только в тех шаблонах, где нужен учёт. По умолчанию: пусто
Пример:
[[!addLooked?
&templates = `4`
]]Сниппет looked: вывод результатов
Добавляет блок с просмотренными ресурсами. Looked является обёрткой для указанного сниппета в параметрах. Проверялось на msProducts и pdoResources.
- Исключение текущей страницы из выдачи
- По желанию может вернуть ID ресурсов
Параметры:
- &snippet — Какой сниппет использовать для вывода результатов. По умолчанию: msProducts.
- &parents — По умолчанию: 0.
- &limit — Ограничение вывода просмотров на странице. По умолчанию: 5.
- &ids — Если «Да», сниппет вернёт ID просмотренных ресурсов. По умолчанию: Нет.
- &tplOuter — Чанк-обёртка всего блока. По умолчанию: lookedOuterTpl.
- &tpl — Чанк оформления каждого пункта. По умолчанию: lookedTpl.
- &sortby — Любое поле ресурса для сортировки. По умолчанию: пусто.
- &sortdir — Направление сортировки. По умолчанию: пусто.
Примеры:
[[!looked?
&includeThumbs = `24x92`
]]
[[!looked?
&snippet = `pdoResources`
&includeTVs = `price, image`
]Так как сниппет не производит выборку, а просто выводит просмотренные товары, то &parents служит для переопределения этого параметра у используемого сниппета, где это — текущий ресурс, по умолчанию. Поэтому менять его значение не стоит.
Практика
Теперь давайте посмотрим место, куда нам нужно вывести наши просмотренные карточки товаров? для этого возьмем блок похожих товаров:
Данный блок имеет следующий html код:
<hr class="solid my-5">
<h4 class="mb-3">Related <strong>Products</strong></h4>
<div class="products row">
<div class="col">
<div class="owl-carousel owl-theme show-nav-title nav-dark mb-0" data-plugin-options="{'loop': false, 'autoplay': false,'items': 4, 'nav': true, 'dots': false, 'margin': 20, 'autoplayHoverPause': true, 'autoHeight': true}">
<div class="product mb-0">
<div class="product-thumb-info border-0 mb-3">
<div class="product-thumb-info-badges-wrapper">
<span class="badge badge-ecommerce text-bg-success">NEW</span>
</div>
<div class="addtocart-btn-wrapper">
<a href="shop-cart.html" class="text-decoration-none addtocart-btn" title="Add to Cart">
<i class="icons icon-bag"></i>
</a>
</div>
<a href="ajax/shop-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
QUICK VIEW
</a>
<a href="shop-product-sidebar-left.html">
<div class="product-thumb-info-image">
<img alt="MODX looked: Блок «Вы смотрели»" class="img-fluid" src="img/products/product-grey-1.jpg">
</div>
</a>
</div>
<div class="d-flex justify-content-between">
<div>
<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">electronics</a>
<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="shop-product-sidebar-right.html" class="text-color-dark text-color-hover-primary">Photo Camera</a></h3>
</div>
<a href="#" class="text-decoration-none text-color-default text-color-hover-dark text-4"><i class="far fa-heart"></i></a>
</div>
<div title="Rated 5 out of 5">
<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
</div>
<p class="price text-5 mb-3">
<span class="sale text-color-dark font-weight-semi-bold">$69,00</span>
<span class="amount">$59,00</span>
</p>
</div>
другие карточки с такой же разметкой
</div>
</div>
</div>Здесь у нас формируется слайдер с просмотренными товарами. Адаптируем код под Minishop2 + Looked, начнем с карточки (товара в слайдере).
Пример разметки товара можно посмотреть в чанке row. В общем создаем чанк lookedProductTpl, помещаем туда код формирования просмотренного товара в слайдере и размечаем его примерно так же как в чанке row? в конечном итоге должно получиться примерно так:
<div class="product mb-0">
<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-thumb-info border-0 mb-3">
<div class="product-thumb-info-badges-wrapper">
{if $favorite?}<span class="badge badge-ecommerce text-bg-danger">Скидка</span>{/if}
{if $new?}<span class="badge badge-ecommerce text-bg-success">NEW</span>{/if}
{if $popular?}<span class="badge badge-ecommerce text-bg-primary">Популярный</span>{/if}
</div>
<div class="addtocart-btn-wrapper">
<button type="submit" name="ms2_action" value="cart/add" class="text-decoration-none addtocart-btn" title="Добавить в корзину"><i class="icons icon-bag"></i></button>
</div>
<a href="ajax/shop-product-quick-view.html" class="quick-view text-uppercase font-weight-semibold text-2">
Быстрый просмотр
</a>
<a href="{$id | url}">
<div class="product-thumb-info-image">
{if $image?}<img alt="{$pagetitle}" class="img-fluid" src="{$image}">
{else}<img class="img-fluid" 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}">{/if}
</div>
</a>
</div>
<div class="d-flex justify-content-between">
<div>
<a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">electronics</a>
<h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0"><a href="{$id | url}" class="text-color-dark text-color-hover-primary">{$pagetitle}</a></h3>
</div>
<a href="#" class="text-decoration-none text-color-default text-color-hover-dark text-4"><i class="far fa-heart"></i></a>
</div>
<div title="Rated 5 out of 5">
<input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'default', 'size':'xs'}">
</div>
<p class="price text-5 mb-3">
{if $old_price}<span class="sale text-color-dark font-weight-semi-bold">{$old_price}</span>{/if}
<span class="amount">{$price}</span>
</p>
</form>
</div>Если у вам нужно вывести производителя, это можно сделать так {$_pls[‘vendor.name’]}
Теперь сделаем чанк обвертки, пусть будет lookedOuterCustomTpl:
<hr class="solid my-5">
<h4 class="mb-3">Вы <strong>смотрели</strong></h4>
<div class="products row">
<div class="col">
<div class="owl-carousel owl-theme show-nav-title nav-dark mb-0" data-plugin-options=" { 'loop': false, 'autoplay': false,'items': 4, 'nav': true, 'dots': false, 'margin': 20, 'autoplayHoverPause': true, 'autoHeight': true } ">
[[+output]]
</div>
</div>
</div>Обратите внимание я поставил пробелы до и после фигурных скобок, для того чтобы избежать конфликтов феном (обычно это белый экран).
Далее в шаблоне товара нам нужно вызвать сниппет addLooked:
[[!addLooked?
&templates=`4`
&limit=`14`
]]&templates – это id нашего шаблона товара (их можно указывать через запятую).
&limit – это максимальное количество товаров в сессии
И следом вывести сниппет looked:
[[!looked?
&parents=`2`
&tplOuter=`lookedOuterCustomTpl`
&tpl=`lookedProductTpl`
&limit=`14`
]]{'!addLooked'|snippet:[
'templates' => '4',
'limit' => '14'
]}
{'!looked'|snippet:[
'tplOuter' => 'lookedOuterCustomTpl',
'tpl' => 'lookedProductTpl',
'limit' => '14'
]}
