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

Код виджета

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

    <div id="..."></div>

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

Примеры кода
  • Контейнер и код загрузки в элементе body:

    <div id="marketWidget"></div>
    <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: "marketWidget",
            ...  // Параметры виджета
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  • Синхронная загрузка:

    Код в элементе head:

    <script src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
    <script type="text/javascript">
          window.YaMarketAffiliate.createWidget({
            containerId: "marketWidget",
            ...  // Параметры виджета
          });
    </script>

    Код в элементе body:

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

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

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

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

type

Тип виджета:

  • offers — «Где купить товар»;
  • models — «Подборка товаров».
params

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

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

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

themeId

Вид виджета.

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

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

Значения для виджетов «Подборка товаров»:

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

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

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

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

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

themeRowsКоличество рядов с товарами или предложениями в виджете: от 1 до 5. По умолчанию в виджете 1 ряд. Только для виджетов «Подборка товаров» компактного типа.
searchCategoryIds

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

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

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

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

searchPriceFrom

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

searchPriceTo

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

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

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

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

searchVendorIds

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

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

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

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

metrikaCounterId

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

subid

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

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

Несколько виджетов на одной странице

Чтобы добавить несколько виджетов на одну страницу:

  1. вызовите в скрипте метод YaMarketAffiliate.createWidget нужное количество раз:

    <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: "market-widget1",
            ...   // Свойства первого виджета
          });
          w.YaMarketAffiliate.createWidget({
            containerId: "market-widget2",
            ...   // Свойства второго виджета
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
  2. Разместите в коде страницы контейнеры div для виджетов:

    <div id="market-widget1"></div>
    ...
    <div id="market-widget2"></div>

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

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

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

Виджеты «Где купить товар»

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

С товаром

Без товара

Список предложений

240 × 322

Полный: 240 × 100

Краткий: 240 × 75

Лента предложений

600 × 374

600 × 192

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

Виджеты «Подборка товаров»
  • Витрина: минимум 120 × 200 пикселей.

  • Полноразмерная подборка: всегда 300 × 600 пикселей.

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

  • Список товаров: минимальная высота — 128 пикселей, минимальная ширина — 240 пикселей.