Настройка виджетов

Сформируйте код виджета и добавьте его на страницы вашего сайта.

  1. Код виджета
  2. Размеры виджетов

Код виджета

  1. Структура
  2. Значения атрибутов
  3. Скрипт для загрузки виджета

Структура

<div class="ymarket-affiliate-widget"
data-type="..." 
data-clid="..."
data-theme-id="..."
data-theme-offers-per-page="..."
data-search-model-ids="..." или data-search-text="..." или data-search-selector="..."
data-search-categories-ids="..."></div>
<script src="https://aflt.market.yandex.ru/widget/script/loader"></script>
Совет.

Вы можете настроить размер и фон виджета с помощью CSS-стилей. Например:

<div class="ymarket-affiliate-widget" style="width:970px; background-color: white;" ...></div>

Значения атрибутов

Атрибут Описание
class

Класс кода виджета. Всегда значение ymarket‑affiliate‑widget.

Обязательный атрибут.

data‑type

Тип виджета:

  • models — виджет с товарами;
  • offers — виджет с предложениями.

Обязательный атрибут.

data‑clid

Ваш идентификатор партнера Маркета. Вы можете найти его в интерфейсе Дистрибуции, на странице Продукты, или спросить у персонального менеджера.

Обязательный атрибут.

data‑theme‑id

Вид виджета. Для виджетов с товарами доступны значения от 1 до 3:

  1. Краткий.
  2. Полный.
  3. С лентой товаров.

Для виджетов с предложениями доступны значения от 1 до 8:

  1. Горизонтальный, с моделью и горизонтальной прокруткой.
  2. Горизонтальный, с моделью и вертикальной прокруткой.
  3. Горизонтальный, без модели, с горизонтальной прокруткой.
  4. Горизонтальный, без модели, с вертикальной прокруткой.
  5. Вертикальный, с моделью, полный.
  6. Вертикальный, с моделью, краткий.
  7. Вертикальный, без модели, полный.
  8. Вертикальный, без модели, краткий.

Обязательный атрибут.

data‑theme‑offers‑per‑page

Количество предложений на одной странице виджета: от 1 до 6.

Обязательный атрибут для виджетов с предложениями, кроме горизонтальных с горизонтальной прокруткой. В них количество предложений регулируется автоматически.

data‑search‑model‑ids

или

data‑search‑text

или

data‑search‑selector

или

data‑search‑selector и data‑search‑selector‑attr

Параметр, по которому выбирается товар для виджета. Подробнее см. в разделе Способы подобрать товары для виджета.

Обязательный атрибут.

data‑search‑categories‑ids

Дополнительный фильтр по категориям товаров. Указывайте идентификаторы категорий через запятую.

Как узнать идентификатор категории

Откройте страницу категории на Маркете и посмотрите на ее URL. Идентификатор — это набор цифр после «...?hid=».Например: https://market.yandex.ru/catalog/54726/list?hid=91491.

Необязательный атрибут.

data-metrika-counter-id

Номер счетчика в Яндекс.Метрике. С его помощью можно отслеживать статистику по виджету. Подробнее.

Необязательный атрибут.

Скрипт для загрузки виджета

Добавьте на страницы сайта код виджета и скрипт для его загрузки. Если вы хотите добавить несколько виджетов на одну страницу, скрипт загрузки нужно вставить один раз, в конец этой страницы:

<div class="ymarket-affiliate-widget" ...></div>
...
<div class="ymarket-affiliate-widget" ...></div>
...
<script src="https://aflt.market.yandex.ru/widget/script/loader"></script>

Размеры виджетов

Виджеты с товарами
  • Полный: всегда 300 × 600 пикселей.

  • Краткий: всегда 300 × 250 пикселей.

  • Виджет с лентой товаров: высота — 250 пикселей, ширина адаптируется под размер выделенной области. Минимальная ширина области, которую нужно выделить под виджет, — 370 пикселей.

Виджеты с предложениями

Эти виджеты адаптируются под размер области, выделенной под них. Минимальные размеры областей (в пикселях), которые нужно отвести под разные типы виджетов:

Горизонтальный

Вертикальный

С моделью

С гор. прокруткой: 600 × 374

С верт. прокруткой: 600 × 389

Полный: 240 × 503

Краткий: 240 × 427

Без модели

С гор. прокруткой: 600 × 192

С верт. прокруткой: 600 × 207

Полный: 240 × 222

Краткий: 240 × 147

У горизонтальных виджетов с горизонтальной прокруткой всегда одинаковая высота: у виджета с моделью — 374 пикселя, без модели — 192 пикселя.

Если для любого горизонтального виджета вы выделите область, у которой ширина меньше 600 пикселей, виджет автоматически станет вертикальным:

  • виджет с моделью — вертикальным полным с моделью;

  • горизонтальный без модели — вертикальным полным без модели.