Как создать код виджета

  1. Структура
  2. Значения параметров
  3. Обработка успешной загрузки и ошибок

Структура

Код виджета состоит из двух частей:

  1. Скрипт виджета (рекомендуется вставлять в элемент head, как можно ближе к его началу):

    <script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
    <script type="text/javascript">
      (function (w) {
        function start() {
          w.removeEventListener("YaMarketAffiliateLoad", start);
          w.YaMarketAffiliate.createWidget({
            /* Обязательные параметры */
            containerId: ...,
            type: ...,
            params: {
              /* Обязательные параметры */
              clid: ...,
              themeId: ...,
              searchModelIds: ..., /* или */ searchText: ..., /* или */ searchSelector: ..., /* или */ searchImageUrl: ..., /* или */ searchImageSelector: ...,
              /* Необязательные параметры */
              searchCount: ...,
              searchMatch: ...,
              searchCategoryIds: ...,
              searchPriceFrom: ...,
              searchPriceTo: ...,
              searchShops: ...,
              searchShopsRecommended: ...,
              searchVendorIds: ...,
              themeRows: ...,
              specificationGroups: ...,
              reviewsCount: ...,
              metrikaCounterId: ...,
              vid: ...
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  2. Контейнер div, в котором будет отображаться виджет (нужно вставить в элемент body в том месте, где вы хотите показывать виджет). Идентификатор — значение параметра containerId.

    <div id="..."></div>
Совет. Вы можете настроить ширину и фон виджета с помощью CSS-стилей. Например:
<div id="..." style="width: 970px; background-color: white;" ...></div>

Значения параметров

Обязательные
ПараметрыОписаниеПример значения
containerId

Идентификатор элемента, в котором будет расположен виджет.

'marketWidget'

type

Тип виджета:

  • offers — «Где купить товар»;
  • models — «Подборка товаров», рекомендательные виджеты;
  • specifications — «Характеристики товара»;
  • reviews — «Отзывы о товаре».

'offers'

params

Объект, содержащий параметры виджета.

Параметры, вложенные в params
clid

Ваш идентификатор партнера Маркета.

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

2310490

themeId

Вид виджета.

Значения для виджетов Где купить товар:

  • 1 — товар и лента предложений;
  • 3 — лента предложений (без товара);
  • 2 — список предложений и товар;
  • 4 — список предложений (без товара, полный);
  • 9 — список предложений (без товара, краткий);
  • 10 — список предложений с изображениями.

Значения для виджетов Подборка товаров, рекомендательных виджетов:

  • 1 — витрина;
  • 2 — полноразмерная подборка;
  • 3 — карусель;
  • 4 — список товаров.

Значение для виджетов с информацией о товарах: 1.

2

searchModelIds / searchText / searchSelector / searchSelector и searchSelectorAttr / searchImageUrl / searchImageSelector

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

Внимание. Подбор товаров по изображению (параметры searchImageUrl и searchImageSelector) не используется в рекомендательных виджетах.

См. в разделе Поиск товаров для виджетов

searchModelIds

Товар, для которого подбираются похожие или подходящие. Подробнее.

Внимание. Используется только для рекомендательных виджетов Похожие товары, С этим товаром сморят и С этим товаром часто покупают.

[12559706]

searchType

Тип рекомендательного виджета. Подробнее.

'recommended'

Необязательные
ПараметрыОписаниеПример значения
Параметры, вложенные в params
searchCount

Количество товаров или предложений в виджете: от 6 до 30. По умолчанию в виджете 6 товаров или предложений.

Примечание. В виджете может быть меньше товаров или предложений, если нужного количества не нашлось. Например, товар размещает только один магазин.

10

searchMatch

Поиск товаров по точному запросу (с вхождением всех слов запроса). Используется только вместе с параметрами searchText или searchSelector.

'exact'
searchCategoryIds

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

Внимание.

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

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

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

Откройте страницу категории на Маркете и посмотрите на ее URL. Идентификатор — это набор цифр после «...?hid=».

Например: https://market.yandex.ru/catalog/54726/list?hid=91491.

[91072]

[91072, 91498]

searchPriceFrom

Фильтр товаров по цене («цена от»). Указывайте цену в рублях, допускаются только целые значения.

1000

searchPriceTo

Фильтр товаров по цене («цена до»). Указывайте цену в рублях, допускаются только целые значения.

3000

searchShops

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

Примечание. Виджет будет содержать только предложения магазина, домен которого вы указали. Например, в виджете с доменом shop123.ru не будет предложений магазина another-shop123.ru.

['shop123.ru', 'shop456.ru']

searchShopsRecommended

Фильтр по товарам или предложениям от магазинов, которые рекомендует производитель. Используйте параметр со значением true, чтобы показывались только товары/предложения от магазинов, которые рекомендует производитель.

По умолчанию показываются все товары или предложения. Подробнее про рекомендации производителей см. в Помощи для магазинов.

true

searchVendorIds

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

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

Откройте/найдите на Маркете страницу производителя (например, с помощью поиска) и посмотрите на URL страницы. Идентификатор производителя — это набор цифр после «...brands/».

Например: https://market.yandex.ru/brands/143.

[153043]

[153043, 153061]

themeRows
Количество рядов в виджете. По умолчанию в виджете 1 ряд.
Внимание. Используется только для виджетов вида Витрина (Подборка товаров и рекомендательные виджеты).

2

specificationGroups

Количество раскрытых групп с характеристиками товара в виджете Характеристики товара.

Доступны только целые значения. Например, если указано значение 1, будет раскрыта только первая группа с характеристиками (как правило, «Общие характеристики»), остальные будут свернуты.

По умолчанию все группы с характеристиками товара раскрыты.

1

reviewsCount

Количество отзывов в виджете Отзывы о товаре.

Доступные значения: от 1 до 10.

По умолчанию в виджете отображаются 3 отзыва.

2
metrikaCounterId

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

12345

vid

Дополнительный идентификатор виджета. С его помощью можно отслеживать статистику отдельно по этому виджету или сравнивать статистику по одинаковым виджетам на разных страницах.

Доступные значения: от 0 до 999.

1

Обработка успешной загрузки и ошибок

Чтобы выполнять нужные действия при успешной загрузке или ошибке при загрузке виджета, используйте методы then и catch. Использовать можно один из этих методов или оба сразу.

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
  (function (w) {
    function start() {
      w.removeEventListener("YaMarketAffiliateLoad", start);
      w.YaMarketAffiliate.createWidget({
        ...   // Свойства виджета
      })
      .then(function(widget) {
        // Код для обработки успешной загрузки виджета
      })
      .catch(function(error) {
        // Код для обработки ошибки при загрузке виджета
      });
    }
    w.YaMarketAffiliate
      ? start()
      : w.addEventListener("YaMarketAffiliateLoad", start);
  })(window);
</script>