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

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

Структура

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

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

    <script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
  2. Код с параметрами виджета (рекомендуется вставлять в элемент head):

    <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: ...,
                themeRows: ...,
                searchCategoryIds: ...,
                searchPriceFrom: ...,
                searchPriceTo: ...,
                searchShops: ...,
                searchShopsRecommended: ...,
                searchVendorIds: ...,
                metrikaCounterId: ...
                }
                });
                }
                w.YaMarketAffiliate
                ? start()
                : w.addEventListener("YaMarketAffiliateLoad", start);
                })(window);
                </script>
  3. Контейнер div, в котором будет отображаться виджет (рекомендуется вставлять в элемент body). Идентификатор — значение параметра containerId.

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

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

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

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

'marketWidget'

type

Тип виджета:

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

'offers'

params

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

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

Идентификатор для размещения виджетов.

Вы можете узнать его у персонального менеджера.

2310490

themeId

Вид виджета.

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

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

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

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

2

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

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

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

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

searchModelIds

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

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

searchModelIds: [12559706]

searchType

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

'recommended'

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

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

2

metrikaCounterId

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

12345

Для виджетов Где купить товар, Подборка товаров, а также для рекомендательных виджетов Популярные товары и Скидки дня
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

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

Чтобы выполнять нужные действия при успешной загрузке или ошибке при загрузке виджета, используйте методы 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>