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

Структура

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

  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: ...,
            params: {
              clid: ...,
              themeId: ...,
              searchText: ..., /* или */ searchSelector: ..., /* или */ searchModelIds: ...,
    /* или */ searchSkuIds: ..., /* или */ searchCategoryIds: ...,
              searchSelectorAttr: ...,
              searchFilters: ...,
              searchAdult: ...,
              searchType: ...,
              defaultRegion: ...,
              searchCount: ...,
              buttonLinkType: ...,
              searchMatch: ...,
              searchSort: ...,
              searchInStock: ...,
              searchPromoTypes: ...,
              searchPriceTo: ...,
              searchShops: ...,
              searchShopsRecommended: ...,
              searchVendorIds: ...,
              searchLocalOffersFirst: ...,          
              themeButtonName: ...,
              themeBackgroundColor: ...,
              themeRows: ...,
              themeShowOfferName: ...,
              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>

Список параметров

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

buttonLinkType

С помощью параметра вы можете выбрать действие и название кнопки виджета для товаров, которые можно купить на Маркете:

Доступные кнопки указаны в таблице ниже.

Значение параметра Название кнопки Действие кнопки
add_to_cart В корзину

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

checkout Купить

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

product Посмотреть

Откроется карточка товара. Эта кнопка используется по умолчанию.

⚠ Параметр вложен в params.

clid

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

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

⚠ Параметр вложен в params и является обязательным.

containerId

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

⚠ Обязательный параметр.

defaultRegion

С помощью данного параметра вы можете указать регион показа предложений по умолчанию.

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

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

⚠ Параметр вложен в params.

fallback

С помощью данного параметра вы можете отобразить рекомендательный виджет «Приглядитесь к этим предложениям» вместо исходного виджета Маркета, если для него не нашлось товаров:

  • true — автозамена включена;

  • false — автозамена выключена.

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

linkToMarket

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

Если указано значение true, по клику на товар пользователь перейдет на его карточку на Маркете.

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

⚠ Параметр вложен в params.

metrikaCounterId

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

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

⚠ Параметр вложен в params.

params

В данном объекте содержится большинство параметров виджета.

⚠ Обязательный параметр.

reviewsCount

Вы можете указать в данном параметре количество отзывов в виджете Маркета «Отзывы».

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

⚠ Параметр вложен в params.

searchAdult

Используйте параметр для отображения интим‑товаров в виджете. Поиск таких товаров осуществляется по категории Товары для взрослых с возрастным ограничением 18+.

Чтобы показать в виджете интим‑товары, укажите текстовый поисковый запрос и добавьте в код виджета параметр searchAdult со значением true.

Если в поисковом запросе вы указали ID интим‑товара на Маркете, он отобразится в виджете. При этом параметр searchAdult не повлияет на результаты поиска. Поэтому параметр не нужно добавлять в код при настройке поиска по ID товара.

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

⚠ Параметр вложен в params.

searchCategoryIds

С помощью данного параметра вы можете добавить поиск товаров по ID категории.

Самостоятельный поиск по ID категории поддерживается только для виджета Маркета «Подборка товаров». При этом он используется только вместе с другим видом поиска для виджетов:

Помимо поиска параметр также используется в качестве фильтра по категориям товаров для виджетов Маркета:

Указывайте идентификаторы категорий через запятую, например:

searchCategoryIds: [91072, 91498] // или
searchCategoryIds: [91072]
Скопировано

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

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

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

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

⚠ Параметр вложен в params и является обязательным, если в виджете «Подборка товаров» вы используете данный способ поиска вместо других. Подробнее см. в разделе Поиск товаров для виджетов.

searchCount

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

Параметр принимает значение:

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

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

⚠ Параметр вложен в params.

searchFilters

Используйте параметр, чтобы добавить поиск товаров по характеристикам.

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

searchInStock

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

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

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

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

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

⚠ Параметр вложен в params.

searchLocalOffersFirst

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

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

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

⚠ Параметр вложен в params.

searchMatch

С помощью данного параметра вы можете включить поиск товаров по точному запросу. Тогда в виджете отобразятся те товары, названия которых содержат все слова из поискового запроса.

Чтобы использовать точный поиск, укажите значение exact.

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

⚠ Параметр вложен в params.

searchModelIds

Используйте данный параметр, если вы выбрали способ поиска по ID товара на Маркете.

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

searchPriceTo

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

⚠ Параметр вложен в params.

searchPromoTypes

Вы можете отфильтровать товары по типу акции.

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

Типы акций:

  • discount — скидка на товар;

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

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

При желании вы можете указать несколько типов акций в массиве через запятую, например:

searchPromoTypes: ["promo_code", "gift_with_purchase"] // или
searchPromoTypes: ["discount"]
Скопировано

⚠ Параметр вложен в params.

searchSelector

Используйте данный параметр, если вы выбрали поиск товаров по запросу из HTML‑элемента. Укажите в нем селектор для HTML‑элемента, из которого формируется поисковый запрос.

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

searchSelectorAttr

С помощью данного параметра вы можете указать атрибут HTML‑элемента, который добавляется к селектору для формирования поискового запроса.

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

searchShops

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

searchShops: ["shop123.ru", "shop456.ru"] // или
searchShops: ["example-shop.ru"]
Скопировано
Примечание. Виджет будет содержать только предложения магазина, домен которого вы указали. Например, в виджете с доменом shop123.ru не будет предложений магазина another-shop123.ru.

⚠ Параметр вложен в params.

searchShopsRecommended

С помощью данного параметра вы можете показать в виджете товары или предложения от магазинов, которые рекомендует производитель. Для этого используйте параметр со значением true.

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

⚠ Параметр вложен в params.

searchSkuIds

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

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

searchSort

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

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

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

⚠ Параметр вложен в params.

searchText

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

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

searchType

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

  • also_viewed — «C этим товаром смотрят»;

  • accessories — «С этим товаром часто покупают»;

  • populars — «Популярные товары»;

  • bestdeals — «Скидки дня»;

  • attractive — «Приглядитесь к этим предложениям»;

  • recommended — «Похоже на то, что вы смотрели».

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

⚠ Параметр вложен в params.

searchVendorIds

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

searchVendorIds: [153043, 153061] // или
searchVendorIds: [153043]
Скопировано
Как узнать идентификатор производителя

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

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

⚠ Параметр вложен в params.

specificationGroups

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

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

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

⚠ Параметр вложен в params.

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)".

⚠ Параметр вложен в params.

themeButtonName

Вы можете указать в данном параметре название кнопки для перехода на Маркет или сайт магазина:

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

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

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

⚠ Параметр вложен в params.

themeId

С помощью данного параметра задайте внешний вид виджета.

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

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

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

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

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

⚠ Параметр вложен в params и является обязательным.

themeRows

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

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

⚠ Параметр вложен в params.

themeShowOfferName

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

Учитывайте, что параметр доступен только для некоторых видов виджета «Один товар»:

  • список предложений с описанием товара;
  • список предложений без описания товара;
  • компактный список предложений без описания товара;
  • витрина.

⚠ Параметр вложен в params.

type

С помощью данного параметра укажите тип виджета:

⚠ Обязательный параметр.

vid

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

⚠ Параметр вложен в params.