Вывод списка товаров на любой странице сайта

В Seller 2.0 можно вывести список товаров на любой странице сайта, в записи блога или в пользовательском блоке. Вывод выполняет корневой шаблон products.html темы в приложении Shop — он подключается через функцию темы include_template.

Доступные режимы отображения

Параметр view_type может принимать следующие значения (каждому соответствует шаблон в html/products/ темы Shop):

Значение	Описание
`grid`	Сетка товаров (режим по умолчанию)
`list`	Список: карточки в один столбец
`short`	Компактная сетка
`swiper`	Карусель
`swiper_short`	Компактная карусель
`swiper_compare`	Карусель для сравнения товаров (используется на странице сравнения)
`swiper_slider`	Слайдер — один товар на слайд (используется в блоке слайдера)
`table`	Таблица; при включённой настройке массового добавления в корзину сверху выводится панель «Отметить все» / «В корзину»

Ограничение мобильной версии

На мобильных устройствах допустимы только режимы grid, swiper, swiper_compare и swiper_short. Любой другой view_type на мобильных принудительно заменяется на grid:

{$view_types_available_on_mobile = ["grid", "swiper", "swiper_compare", "swiper_short"]}
{$view_type = (empty($is_mobile) || $view_type|in_array:$view_types_available_on_mobile) ? $view_type : "grid"}

Пример вывода

В примере показан вывод товаров из списка «Украшения» (ukrasheniya) в количестве 4 штук каруселью:

{* UTILS *}
{include "{$wa->site->themePath(waRequest::getTheme())}u-utils.html"}

{* GET THEMESETTINGS *}
{$theme_id = waRequest::getTheme()}
{$theme_settings = $wa->themesettings->getThemeSettings($theme_id, "site", true)}

{$products = $wa->shop->productSet("ukrasheniya", 4, null, ['fields' => '*,skus_filtered'])}
{$products_props = [
    "view_type" => "swiper"
]}

{call include_template template="products" app="shop" products=$products props=$products_props}

Заголовок шаблон products.html не выводит — при необходимости добавьте его обычной разметкой перед вызовом.

Параметры

Параметр	Тип	Описание
`view_type`	string	Режим отображения (см. таблицу выше). По умолчанию `grid`
`grid_columns`	number/string	В режимах `grid` и `short` — число колонок на широких экранах (по умолчанию `4`; `grid` понимает 3, 4, 5, `short` — 3, 5, 6, 7, любое другое значение даёт 4). В режимах `swiper` и `swiper_short` — число видимых слайдов на экранах от 1024 px (по умолчанию `5`)

Поле skus_filtered

В опции fields тема везде использует поле skus_filtered — оно загружает все артикулы товара, прошедшие фильтрацию. Существует и поле sku_filtered, но оно возвращает только один артикул на товар; для корректной работы выбора артикулов в карточках используйте skus_filtered, как это делают штатные шаблоны темы.

Вывод внутри текстового контента

При выводе товаров внутри текста (описание товара, запись блога, страница с prose-стилями) оберните блок в класс not-prose, чтобы типографские стили не влияли на карточки товаров:

<div class="not-prose mb-6">
    {$products = $wa->shop->productSet("ukrasheniya", 4, null, ['fields' => '*,skus_filtered'])}
    {$products_props = [
        "view_type" => "grid"
    ]}

    {call include_template template="products" app="shop" products=$products props=$products_props}
</div>

Замените "ukrasheniya" на идентификатор вашего списка товаров.

Как вывести список товаров на странице