Типы виджетов и настройки

Типы виджетов

  • С моделью (с горизонтальной или вертикальной прокруткой)
  • Без модели (с горизонтальной или вертикальной прокруткой)

Как сформировать код виджета

Если вы хотите добавить один и тот же виджет на все страницы сайта, свяжитесь с персональным менеджером — он пришлет код виджета. Вставьте этот код на страницы вашего сайта.

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

  1. Код виджета
  2. Значения атрибутов
  3. Способы поиска товара

Код виджета

<div class="ymarket-affiliate-widget"
data-type="offers" 
data-clid="..."
data-theme-id="..."
data-theme-offers-per-page="..."
data-search-model-id="..." или data-search-text="..." или data-search-selector="..."
data-search-categories-ids="..."></div>

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

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

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

Обязательный элемент.

data-type

Тип виджета. Всегда значение offers.

Обязательный элемент.

data-clid

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

Обязательный элемент.

data-theme-id

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

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

Обязательный элемент.

data-theme-offers-per-page

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

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

data-search-model-id

или

data-search-text

или

data-search-selector

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

Обязательный элемент.

data-search-categories-ids

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

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

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

Необязательный элемент.

Способы поиска товара

Выберите один из способов:

Идентификатор модели

Используйте элемент data-search-model-id, чтобы в виджет загрузились предложения товара по его идентификатору на Маркете. Например: data-search-model-id="12559706".

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

Откройте карточку модели на Маркете и посмотрите на ее URL. Идентификатор — это набор цифр после «.../product/». Например: https://market.yandex.ru/product/12559706.

Поисковый запрос

Задайте поисковый запрос в элементе data-search-text, чтобы в виджет загрузились предложения товара, найденного по этому запросу. Указывайте в запросе основные параметры товара, чтобы нашлась нужная вам модель.

Например: data-search-text="Apple iPhone 7 64Gb".

Поисковый запрос из html-элемента (селектора) на вашем сайте

Выберите элемент (селектор), из которого сформируется поисковый запрос, и укажите его в data-search-selector. Можно использовать:

  • заголовок на странице, например: data-search-selector="h1";

  • название страницы, например: data-search-selector="title";

  • любой другой элемент с текстом, например: data-search-selector="div#model_name".

Запрос сформируется из первого такого элемента на странице. В виджет загрузятся предложения товара, найденного по этому запросу.

Как вставить виджет на сайт

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

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

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

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

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

С моделью

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

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

Полный: 240 × 503

Краткий: 240 × 427

Без модели

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

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

Полный: 240 × 222

Краткий: 240 × 147

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

Совет. Вы можете настроить внешний вид виджета с помощью CSS-стилей.

Примеры виджетов

Во всех примерах товар найден по селектору h1, в котором содержится текст «Apple iPhone 7 128 Gb».

C моделью и горизонтальной прокруткой:

<div class="ymarket-affiliate-widget"
data-clid="12345" 
data-type="offers" 
data-theme-id="1"
data-search-selector="h1"></div>

C моделью и вертикальной прокруткой:

<div class="ymarket-affiliate-widget"
data-clid="12345"
data-type="offers"
data-theme-id="2"
data-theme-offers-per-page="2"
data-search-selector="h1"></div>

Без модели, с горизонтальной прокруткой:

<div class="ymarket-affiliate-widget"
data-clid="12345"
data-type="offers" 
data-theme-id="3"
data-search-selector="h1"></div>

Без модели, с вертикальной прокруткой:

<div class="ymarket-affiliate-widget" 
data-clid="12345"
data-type="offers"
data-theme-id="4"
data-theme-offers-per-page="2"
data-search-selector="h1"></div>