Страница товара

Страница товара — самый настраиваемый раздел Seller 2.0: три макета карточки, конструктор блоков на JSON-настройках и около тридцати готовых блоков — от бейджей и остатков по складам до ссылок на маркетплейсы. Всё управляется из панели настроек темы, раздел Страница товара с четырьмя подразделами: Верхняя панель, Контент и изображения, Блоки товара, Сведения о товаре.

Шаблоны страницы лежат в shop/themes/seller2/html/product/: точка входа — product.html, макеты — product_01.html–product_03.html, блоки — в папке blocks/, вкладки с информацией — в content/, диалоги — в dialog/.

Как собирается страница

product.html последовательно подключает микроразметку, фиксированную шапку, диалог товара, мобильный шаблон (на мобильных устройствах) и выбранный макет:

{$product_type = $theme_settings["product__layout_common_display_type"]|replace:"assets/img/themesettings/product/types/":""|replace:".webp":""}
{call include_template template="html/product/{$product_type}" app="shop"}

Макет выбирается настройкой Тип макета (Страница товара → Контент и изображения → Макет товара) — это выбор картинкой из трёх вариантов.

Макеты карточки

Важно. Правая колонка есть только в первом макете. Во втором и третьем шаблон читает лишь состав центральной колонки — блоки, включённые только в «Правой колонке» (по умолчанию это «Цена», «Купить на маркетплейсах», «Заказать через соцсети», «Текстовое уведомление»), в макетах 02 и 03 на страницу не попадут. Включите их в составе центральной колонки.

Если блок «Выбор артикула» не активен ни в одной колонке, макет выводит его принудительно (fallback в шаблоне) — товар без переключателя артикулов остаться не может.

Верхняя панель

Раздел панели: Страница товара → Верхняя панель.

Фиксированная шапка

Настройка Показывать фиксированную шапку при прокрутке включает панель (html/product/header/header.fixed.html), которая выезжает сверху при прокрутке: миниатюра товара 40×40 px (изображение запрашивается в размере 96 px для чёткости на Retina), название, настраиваемые элементы и кнопка «В корзину» (текст и стиль кнопки берутся из раздела «Блоки товара» — настроек «Пользовательский текст кнопки покупки» и «Стиль кнопки»).

Состав элементов — JSON-настройка Состав (product__top_fixed_header_type_json). Сокращённый пример структуры:

{
  "0": {"active": true, "name": "Рейтинг", "app": "shop", "custom": false,
        "template": "html/product/header/blocks/rating", "classes": ""},
  "7": {"active": false, "name": "Купить в один клик", "app": "shop",
        "custom": false, "template": "quickorder", "classes": ""}
}

Поля элемента:

Доступные элементы фиксированной шапки: Рейтинг, Видео, Избранное, Сравнение, Бейджи, Плагин: Бренды Pro, Поделиться, Купить в один клик (шаблоны — в html/product/header/blocks/). Элемент «Купить в один клик» выводится, только если в разделе «Блоки товара» выбран плагин быстрого заказа.

Верхнее меню

Показывать верхнее меню — горизонтальная панель над карточкой (header.layout.html): отзывы, видео, избранное, сравнение, бейджи, бренд, «Поделиться». Состав — та же JSON-структура в настройке Состав меню (product__top_navigation_type_json), но без элемента быстрого заказа.

Бейджи в верхней панели

Контент и изображения

Раздел панели: Страница товара → Контент и изображения.

Изображения и галерея

В третьем макете вместо галереи с миниатюрами используется плитка images_tile.html — настройки миниатюр на него не действуют.

Центральная и правая колонки

Состав и порядок блоков задаются JSON-настройками Состав у «Центральной колонки» (product__layout_center_type_json) и «Правой колонки» (product__layout_right_type_json). Структура элементов такая же, как в верхней панели. Пример (сокращённо):

{
  "0": {"active": true, "name": "Артикул", "app": "shop", "custom": false,
        "template": "html/product/blocks/sku", "classes": ""},
  "5": {"active": true, "name": "Характеристики", "app": "shop", "custom": false,
        "template": "html/product/blocks/features", "classes": "hidden md:block"}
}

Порядок ключей — порядок вывода; classes позволяет, например, скрыть блок на мобильных (hidden md:block). Пользовательские блоки создаются в приложении «Сайт — Блоки».

Доступные блоки колонок (13 штук):

Настройка Включить прилипающую правую колонку заставляет правую колонку (первый макет) прилипать к верху при прокрутке.

Блоки товара

Раздел панели: Страница товара → Блоки товара — универсальные настройки блоков, применяемые ко всем типам макета.

Бейджи товара

Показывать стандартные бейджи включает бейджи Новинка, Хит, Скидка и свой бейдж. Для каждого выбирается стиль: Стиль бейджа «Новинка», Стиль бейджа «Хит», Стиль бейджа «Скидка», Стиль бейджа «Выгода» — варианты «Заливка», «Контур», «Мягкий», «Градиент» в нескольких цветах плюс «Свой градиент». Дополнительно: Показывать бейдж процента скидки, Показывать бейдж суммы скидки, Показывать бейдж бонусов.

Карточка цены

Блок «Цена» (price-card) — основной коммерческий блок: внутри него выводятся бейджи, цены, остатки, поле количества, кнопка «В корзину» и преимущества. Настройки:

Выбор артикулов

Краткие характеристики

Блок «Характеристики» в колонке: Количество отображаемых кратких характеристик (по умолчанию 5), Отображать только эти характеристики и Исключить эти характеристики (ID через запятую; по умолчанию исключены ya_market_link,wb_link,ozon_link — служебные ссылки маркетплейсов).

Характеристики артикулов выводятся двумя шаблонами: в колонках карточки — features/features_skus_inline.html (значения в строку), во вкладках «Обзор» и «Характеристики» — features/features_skus_columns.html (колонками).

Информация о наличии товара

Блок остатков (stocks) показывает наличие и, при включённой настройке Показывать информацию в выпадающем списке, разбивку по складам в выпадающем списке. Все тексты настраиваются, плейсхолдер {count} заменяется на количество:

Кнопка «В корзину» и «Купить в один клик»

Пользовательский текст кнопки покупки заменяет стандартную надпись; Стиль кнопки — заливка, контур или один из градиентов (для «Свой градиент» задайте CSS-переменные --btn-gradient-from, --btn-gradient-via, --btn-gradient-to в пользовательском CSS).

Вывод кнопки Купить в однин клик: «Не выводить», «Easyweb: Быстрый заказ» (плагин ewshopqorder) или «BodySite: Купить в один клик» (buy1click); Стиль вывода — текст или кнопка. Подробнее — в статье «Купить в один клик».

Краткое описание

Заголовок блока краткого описания и Скрыть ссылку "Все описание" (ссылка ведёт на вкладку с полным описанием).

Преимущества товара

Блок «Преимущества» — список ссылок с иконками, выводится внутри карточки цены. Настройка Список преимуществ (product__blocks_benefits_items_type_json):

{
  "0": {"active": true, "text": "Рассчитать доставку", "url": "#", "icon": "truck", "classes": ""},
  "3": {"active": true, "text": "Гарантия 5 лет", "url": "", "icon": "shield-check", "classes": ""}
}

icon — название иконки Lucide; url можно оставить пустым, тогда элемент выводится без ссылки.

Маркетплейсы и соцсети

Блок «Купить на маркетплейсах»: Заголовок блока маркетплейсов, Тип отображения (Только иконки / Кнопки с текстом) и JSON Ссылки на маркетплейсы:

{
  "13": {"active": true, "name": "Ozon", "link": "#", "icon": "ozon", "feature": "ozon_link"},
  "21": {"active": true, "name": "Wildberries", "link": "#", "icon": "wb", "feature": "wb_link"}
}

Поле feature — ID характеристики товара, из которой берётся ссылка на площадку (например, ozon_link). Ссылка всегда берётся только из характеристики: поле link в этом блоке шаблоном не используется, а если ни у одной активной площадки характеристика у товара не заполнена — блок целиком не выводится. В списке предусмотрено 27 площадок и сервисов. Подробный разбор — в статье «Вывод ссылок на маркетплейсы».

Блок «Заказать через соцсети» устроен так же (Заголовок блока соцсетей, Тип отображения, JSON Ссылки на социальные сети), только без привязки к характеристикам — ссылка задаётся в поле link.

Текстовое уведомление

Содержимое текстового уведомления — HTML-текст, например правовая оговорка («Цена действительна только для интернет-магазина…»). Пустое значение полностью скрывает блок.

Сведения о товаре

Раздел панели: Страница товара → Сведения о товаре — описание, характеристики, отзывы и товарные подборки под карточкой.

Структура и отображение табов

Состав и порядок вкладок — JSON-настройка Состав вкладок (product__info_common_items_type_json), структура та же, что у колонок, но template — короткое имя шаблона из html/product/content/blocks/:

{
  "0": {"active": true, "name": "Обзор", "app": "shop", "custom": false, "template": "overview", "classes": ""},
  "3": {"active": true, "name": "Отзывы", "app": "shop", "custom": false, "template": "reviews", "classes": ""}
}

Одиннадцать встроенных вкладок: Обзор (overview), Характеристики (features), Прикрепленные файлы (ewshoppattach), Отзывы (reviews), Товары в комплекте (itemsets), Видео галерея (ewshoppvideo), Фотографии (related_album), Записи блога (related_posts), Смотрите также (upselling), С этим товаром также покупают (crossselling), Вы смотрели (viewed). Пользовательские вкладки создаются в приложении «Сайт — Блоки».

Обзор товара

Заголовок блока («Обзор»), Показывать заголовок, Показывать характеристики в обзоре (под описанием, по настройкам секции «Характеристики»), Ограничить описание товара (line-clamp: без ограничений или 3, 4, 5, 6, 8, 10 строк, по умолчанию 6 — с кнопкой «Показать полностью»), Показывать список категорий товара, Показывать теги товара.

Характеристики

Заголовок блока, Показывать заголовок, Количество колонок для характеристик (1–3), Алгоритм распределения — «Последовательно (сохраняет порядок)» или «Сбалансированно (по объему контента)», а также Отображать только эти характеристики / Исключить эти характеристики.

Отзывы

Поля, которые добавляет плагин API Extension: Показывать поле «Достоинства», Показывать поле «Недостатки» (влияют и на форму, и на карточки отзывов), Показывать голосование за полезность отзыва.

Товарные подборки

Три блока — «С этим товаром также покупают» (crossselling), «Сопутствующие товары» (upselling, заголовок по умолчанию «Смотрите также») и «Просмотренные товары» (viewed, «Вы смотрели») — имеют одинаковый набор настроек:

Записи блога

Если в товаре записи не указаны (параметр товара related_posts пуст): «Ничего не выводить», «Последние записи» (с настройками ID блога для последних записей и Количество последних записей) или «Выбранные записи» (ID записей через запятую). Оформление: тип отображения (три макета записей), Элементов в строке (3/4), соотношение сторон, Длина краткого содержания (0 — не выводить), показ названия блога и даты, позиция после/внутри табов.

Фотоальбом

Выводит альбом приложения «Фото»: ID альбома, если в товаре не указан (параметр товара related_album), заголовок («Фотографии»), Количество фотографий для отображения (20), Элементов в строке (3–5), показ названий, размера, описаний и даты загрузки, соотношение сторон (включая своё, по умолчанию 4/5), позиция.

Видео галерея и прикреплённые файлы

Вкладка «Видео галерея» работает с плагином «Видеогалерея в карточке товара» (ewshoppvideo): заголовок («Видео»), тип отображения (три макета), Количество колонок (3–5), соотношение сторон превью, показ названий и описаний, Длина описания (120 символов), позиция. Вкладка «Прикрепленные файлы» (плагин ewshoppattach): заголовок, показ заголовка, позиция.

Мобильная карточка товара

На мобильных устройствах выводится отдельный шаблон product_mobile.html со своим конструктором: раздел панели Мобильная версия → Карточка товара — свой JSON Состав из 17 элементов (включая «Название товара», «Цена», «Наличие на складах», «Список преимуществ с иконками») и Тип отображения диалога («Расширенный» — вся информация о товаре, «Минимальный» — изображение, выбор артикулов, услуги и кнопка) с собственным составом элементов модального окна.