Как создать код виджета вручную

  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: ...,
            /* Необязательные параметры */
            fallback: ...,
            rotate: ...,
            /* Обязательный параметр */
            params: {
              /* Обязательные параметры */
              clid: ...,
              themeId: ...,
              searchModelIds: ..., /* или */ searchSkuIds: ..., /* или */ searchText: ..., /* или */ searchSelector: ..., /* или */ searchImageUrl: ..., /* или */ searchImageSelector: ...,
              /* Необязательные параметры */
              searchSelectorAttr: ...,
              searchType: ...,
              defaultRegion: ...,
              searchCount: ...,
              searchMatch: ...,
              searchSort: ...,
              themeShowSortSelector: ...,
              searchInStock: ...,
              searchPromoTypes: ...,
              searchCategoryIds: ...,
              searchPriceFrom: ...,
              searchPriceTo: ...,
              searchShops: ...,
              searchShopsRecommended: ...,
              searchVendorIds: ...,
              searchLocalOffersFirst: ...,
              searchFilters: ...,
              themeButtonName: ...,
              themeBackgroundColor: ...,
              themeRows: ...,
              themeShowImage: ...,
              themeShowProductName: ...,
              linkToMarket: ...,
              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;" ...></div>

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

Параметры Описание Поддерживаемые сервисы Пример значения
containerId *

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

Маркет, Беру

"marketWidget"

type *

Тип виджета:

Виджеты Маркета
Виджеты Беру

Маркет, Беру

"offers"

fallback

Отображение рекомендательного виджета «Приглядитесь к этим предложениям» вместо исходного виджета Маркета, если для него не нашлось товаров.

Подробнее см. в разделе Замена виджета Маркета на рекомендательный виджет.

Маркет

false
rotate

Отображение вместо виджета Маркета подходящего виджета Беру или наоборот.

Подробнее см. в разделе Автозамена виджетов.

Маркет, Беру

false
params *

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

Маркет, Беру

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

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

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

Маркет, Беру

2310490

themeId *

Вид виджета.

Виджеты Маркета

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

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

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

  • 1 — витрина;
  • 3 — карусель;
  • 4 — список товаров;
  • 5 — компактный список товаров.

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

Виджеты Беру

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

  • 1 — подробный;
  • 2 — компактный.

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

  • 1 — витрина;
  • 2 — список.

Маркет, Беру

2

searchModelIds / searchSkuIds / searchText / searchSelector / searchSelector и searchSelectorAttr / searchCategoryIds / searchImageUrl / searchImageSelector **

Ограничения:

Маркет (кроме searchSkuIds), Беру

См. в разделах Поиск товаров для виджетов и Выбор рекомендательного виджета Маркета

searchType

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

Маркет

"recommended"

defaultRegion

Регион показа предложений по умолчанию.

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

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

Маркет, Беру

"Минск"

searchCount

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

  • Для виджетов Маркета — от 6 до 30.
  • Для виджетов Беру — от 1 до 30.

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

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

Маркет, Беру

10

searchMatch

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

Используется только вместе с параметрами searchText или searchSelector.

Маркет

"exact"
searchSort

Сортировка товаров и предложений.

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

Типы сортировки:

  • popular — по популярности;
  • aprice — сначала дешевые;
  • dprice — сначала дорогие;
  • discount_p — по размеру скидки;
  • rorp — по рейтингу и цене;
  • quality — по лучшим оценкам;
  • opinions — по отзывам;
  • ddate — по новизне.

По умолчанию задана сортировка по популярности.

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

Маркет, Беру

"aprice"
themeShowSortSelector

Скрытие из виджета фильтра по типу сортировки.

Внимание. Используется только для виджетов Маркета «Где купить товар».

По умолчанию фильтр доступен, если в виджете отображается товар, для которого на Маркете размещено больше 6 предложений. Если вы хотите убрать из виджета фильтр по типу сортировки, используйте параметр со значением false.

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

Маркет

false

searchInStock

Фильтр по товарам в продаже.

Внимание. Используется только для виджетов Маркета «Где купить товар».

Если параметр имеет значение false, в виджет могут попасть предложения товаров, которые уже не продаются. В этом случае вместо списка предложений появятся сообщение «Нет в продаже» и рекомендательная подборка «С этим товаром смотрят».

Значения по умолчанию:

Для остальных способов поиска фильтр не поддерживается.

Маркет

true

searchPromoTypes

Фильтр товаров по типу акции.

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

Типы акций:

Виджеты Маркета
  • discount — скидка на товар;

  • promo_code — промокод;
  • gift_with_purchase — подарок при покупке товара;

  • n_plus_m — при покупке N товаров M таких же товаров бесплатно.

Для виджетов Маркета вы можете указать один или несколько типов акций в массиве через запятую.

Виджеты Беру

Доступно только значение discount — скидка на товар.

Маркет, Беру

["discount"]

["promo_code", "gift_with_purchase"]

searchCategoryIds

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

Внимание.

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

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

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

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

https://market.yandex.ru/catalog/54726/list?hid=91491

https://beru.ru/catalog/81621?hid=14727164

Маркет, Беру

[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.

Беру

Откройте страницу категории, в которой есть товары производителя, выберите его в списке слева и посмотрите на URL страницы. Идентификатор производителя — это набор цифр после «...&glfilter=7893318%3A».

Например: https://beru.ru/catalog/81623/list?hid=14193088&glfilter=7893318%3A948937.

Маркет, Беру

[153043]

[153043, 153061]

searchLocalOffersFirst

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

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

Примечание. Проверяйте на практике эффективность использования этого параметра. Параметр может снизить количество кликов.

Маркет

true
searchFilters

Поиск товаров по характеристикам.

Используется только вместе с каким-либо обязательным параметром поиска.

Маркет

glfilter=13476053%3A1
themeButtonName

Название кнопки для перехода на Маркет, Беру или сайт магазина:

  • see — «Посмотреть»;
  • open — «Открыть»;
  • go_to — «Перейти»;
  • more_info — «Подробнее»;
  • to_shop — «В магазин»;
  • buy — «Купить»;
  • make_order — «Заказать».

По умолчанию используется значение see — «Посмотреть».

По статистике Яндекс.Маркета, названия кнопок «Посмотреть», «Открыть», «Перейти» и «Подробнее» приносят больше кликов, чем остальные.

Маркет, Беру more_info
themeBackgroundColor

Цвет и непрозрачность фона виджета.

Поддерживаются все способы задания цвета и непрозрачности, описанные в стандарте CSS. Например, задать серый фон можно любым из следующих значений:

  • "gray";
  • "#808080";
  • "rgb(128,128,128)";
  • "hsl(0,0%,50%)".

Задать серый фон с непрозрачностью 30% можно любым из следующих значений:

  • "rgba(128,128,128,0.3)";
  • "hsla(0,0%,50%,0.3)".

Маркет, Беру

"#808080"
themeRows

Количество рядов в виджете. По умолчанию в виджете 1 ряд.

Внимание. Используется только для виджетов Маркета в виде витрин («Где купить товар», «Подборка товаров» и рекомендательные виджеты) и для виджета Беру «Подборка товаров» в виде списка.

Маркет, Беру

2

themeShowImage

Отображение фотографий товаров в виджете.

Если вы хотите, чтобы товары отображались без изображений, используйте параметр со значением false. По умолчанию используется значение true: товары отображаются с изображениями.

Внимание. Используется только для виджета Маркета «Средняя цена» и виджетов Беру «Товар» в компактном виде и «Подборка товаров» в виде списка.

Маркет, Беру

true
themeShowProductName

Отображение информации о товарах (названий, рейтингов и т. д.) в виджете.

Если вы хотите, чтобы информация о товарах не  отображалась, используйте параметр со значением false. По умолчанию используется значение true: информация о товарах отображается в виджете.

Внимание. Используется только для виджета Маркета «Средняя цена» и виджетов Беру «Товар» в компактном виде и «Подборка товаров» в виде списка.

Маркет, Беру

true
linkToMarket

Использование в виджете ссылок на Маркет вместо ссылок на сайты магазинов.

Если указано значение true, по клику на товар пользователь перейдет на его страницу на Маркете. Партнер получит вознаграждение за переход с Маркета на сайт магазина или клик по номеру телефона в течение 7 дней.

По умолчанию используется значение false: клик по товару ведет на предложение, занимающее первое место в блоке «Топ‑6» на карточке товара. Партнер получит вознаграждение непосредственно за этот клик.

Подробнее о вознаграждениях см. в разделе Вознаграждение за продукты Маркета.

Внимание. Используется для виджетов Маркета «Подборка товаров» и рекомендательных виджетов Маркета.

Маркет

true
specificationGroups

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

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

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

Маркет

1

reviewsCount

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

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

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

Маркет

2
metrikaCounterId

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

Подробнее о статистике.

Маркет, Беру

12345

vid

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

Доступные значения: от 0 до 999. Для виджетов Беру также допускаются строки из латинских букв и цифр длиной до 150 символов. Например: list, review, u50188 и т. п. Такие VID чувствительны к регистру: например, review и Review считаются разными идентификаторами.

Маркет, Беру

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>