Searching products for widgets

  1. By a text query
  2. By a request from an HTML element
  3. By product ID on Yandex.Market
  4. By product ID on Beru
  5. By category ID
  6. By image
  7. By an image from the element img
  8. By product specifications

By a text query

Set a query so that the widget shows the products found on this query. To make sure a specific model is found, specify its main parameters in the query. For example: Sony PlayStation 4 Slim 500 ГБ. If the model isn't found, the results of a search for a similar model on Yandex.Market or Beru are loaded.

How to set a query
  • In the constructor: In the Search menu, select by text query and enter the query.
  • Manually in code: specify the query in the searchText parameter (for example, searchText: "Умная колонка").
Exact-match search

A widget may show only those products whose names contain all the words from your query. For this:

If no product is found (for example, it's no longer available on Yandex.Market or Beru), the widget isn't displayed.

By a request from an HTML element

Attention. No search by a request from an HTML element is supported if you embed a widget on a Turbo page.

Choose a selector for the element to take a search query from. The products found on this query are uploaded to the widget. If the page contains multiple suitable elements, the first one is used.

To make sure the desired product gets into the widget that shows offers, use the element with the product name and its parameters only. If other words are included in the query, the search result may be inaccurate. If the page doesn't have a matching element, you can add a hidden element (with the style="display: none;" attribute).

How to specify a selector
  • In the constructor: In the Search menu, choose by request from HTML tag and specify the selector.
  • Manually in code: specify the selector in searchSelector. To set a separate attribute, add it to searchSelectorAttr.
How to set a query in container code

You can use the widget container as a search element adding to it an attribute with the product name. To do this, specify the container selector in the searchSelector parameter and the attribute name in the searchSelectorAttr parameter. That's convenient if you need to embed the same widget script on different pages, changing the container code only.

Attention. If a search query is set in the container code, the widget is displayed later than performing a search using a text query: only after the full HTML code of the page loads. Users may not see the widget before it's loaded (for example, if they scroll through it or leave the page) and may fail to make paid clicks.
Example

In the head element:

<script async src="https://aflt.market.yandex.ru/widget/script/api" type="text/javascript"></script>
<script type="text/javascript">
  ...
  w.YaMarketAffiliate.createWidget({
    containerId: "marketWidget",
    type: "offers",
    params: {
      clid: 2310490,
      searchSelector: "div#marketWidget",
      searchSelectorAttr: "data-search-text",
      themeId: 2
    }
  });
  ...
</script>

In the body element:

<div id="marketWidget" data-search-text="Яндекс.Телефон"></div>
Exact-match search

A widget may show only those products whose names contain all the words from your query. For this:

If no product is found (for example, it's no longer available on Yandex.Market or Beru), the widget isn't displayed.

Selector and query examples
Element on the site What to specify Resulting query

Page title:

<h1>Обзор товара <span>Яндекс.Устройство</span></h1>

Constructor:

Selector: h1

Обзор товара Яндекс.Устройство (“Yandex.Device product overview”)

Code:

searchSelector: "h1"

Part of the title:

<h1>Обзор товара <span>Яндекс.Устройство</span></h1>

Constructor:

Selector: h1 span

Яндекс.Устройство (“Yandex.Device”)

Code:

searchSelector: "h1 span"

Page name:

<title>Обзор товара Яндекс.Устройство</title>

Constructor:

Selector: title

Обзор товара Яндекс.Устройство (“Yandex.Device product overview”)

Code:

searchSelector: "title"

Any tag with the id attribute. Query text in the tag itself:

<div id="model_name">Яндекс.Устройство</div>

Constructor:

Selector:div#model_name

Яндекс.Устройство (“Yandex.Device”)

Code:

searchSelector: "div#model_name"

Any tag with any attribute. Query text in the tag itself:

<span itemprop="title">Яндекс.Устройство</span>

Constructor:

Selector: span[itemprop='title']

Яндекс.Устройство (“Yandex.Device”)

Code:

searchSelector: "span[itemprop='title']"

Any tag with any attribute. Query text in the attribute:

<meta property="og:title" content="Яндекс.Устройство"/>

Constructor:

Selector: meta[property='og:title']

Attribute: content

Яндекс.Устройство (“Yandex.Device”)

Code:

searchSelector: "meta[property='og:title']",
searchSelectorAttr: "content"

By product ID on Yandex.Market

Yandex.Market or Beru widgets may show products found by product IDs on Yandex.Market.

How to specify the product ID
  • In the constructor: In the Search menu, select by product ID on Yandex.Market and enter comma-separated IDs.
  • Manually in code: Specify the IDs in the searchModelIds parameter. For example: searchModelIds: [1971204201, 177547282].
Attention. You can only specify one ID for the Yandex.Market Where to buy a product widgets, recommendation widgets, widgets with product information, and the Beru “Product” widget in a detailed form.
How to find out the product ID

Open the product card on Yandex.Market and check out its URL. An ID is a set of numbers prior to the question mark (or, if there's none, at the end of the URL). Example:

https://market.yandex.ru/product/1971204201
https://market.yandex.ru/product--smartfon-yandex-telefon/1971204201?glfilter==...

By product ID on Beru

Beru widgets may show products found by product IDs on Beru. Specify comma-separated IDs in the searchSkuIds parameter. For example: searchSkuIds: [100307940935, 100482444893].

Attention. You can only specify one ID for the “Product” widget in a detailed form.
How to find out the product ID on Beru

Open the product card on Beru and check out its URL. An ID is a set of numbers prior to the question mark (or, if there's none, at the end of the URL). Example:

https://beru.ru/product/100307940933
https://beru.ru/product/smartfon-yandex-telefon/100307940933?sku_main_pic=...

By category ID

Attention. An independent search by category ID is only supported for the Yandex.Market Collection of products widget. In the Yandex.Market Where to buy a product widgets, recommendation widgets such as Popular products and Discounts of the day, widgets with product information, and Beru widgets, a search by category ID is only used along with another search type.

The Yandex.Market Collection of products widget may display products of certain categories.

How to specify category IDs
  • In the constructor: In the Search menu, select by category ID and enter comma-separated IDs.
  • Manually in code: Specify the IDs in the searchCategoryIds parameter. For example: searchModelIds: [1971204201, 177547282].

If you specify multiple category IDs, the widget will display products of these categories alternately. For example, if you specify the categories A, B, and C, the order is as follows:

  1. The first product of the category A.
  2. The first product of the category B.
  3. The first product of the category C.
  4. The second product of the category A.
  5. The second product of the category B.
  6. The second product of the category C and so on.
How to find out the category ID

Open the category page on Yandex.Market and check out its URL. An ID is a set of numbers after “...?hid=”. Example:

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

By image

Attention. A search by image isn't available for Yandex.Market recommendation widgets.

Widgets may show products found by images. If no product is found, Yandex.Market or Beru search results are loaded.

How to set links to products
  • In the constructor: In the Search menu, choose by link to image and specify the link.
  • Manually in code: specify the link in the searchImageUrl parameter.

By an image from the element img

Attention. A search by an image from the img element isn't available for Yandex.Market recommendation widgets. Moreover, it isn't supported if you embed a widget on a Turbo page.

In the searchImageSelector element, specify the selector for the element that contains the image link. It must be in the src attribute.

The constructor doesn't support a search by an image from the img element.

Examples
Element on the site What to specify
<img id="ProductPhoto" src="http://shop-example.ru/images/yandex-device.jpg" alt="Яндекс.Устройство фото">
searchImageSelector: "#ProductPhoto"
<div id="ProductPhoto">
  <a href="http://shop-example.ru/images/yandex-device-big.jpg">
    <img src="https://shop-example.ru/images/yandex-device.jpg" alt="Яндекс.Устройство фото">
  </a>
</div>
searchImageSelector: "#ProductPhoto > a > img"

By product specifications

A widget may show products found by certain parameters on Yandex.Market (for example, Android smartphones with a 5.5-5.9" screen). You can specify all parameters that are used on Yandex.Market.

Attention. In this case, widget code must also specify any of the search parameters mentioned above (for example, searchText or searchSelector). See the example.

To specify product parameters in a widget:

  1. Open the desired category and select filtering parameters (for example, Android OS or a 5.5-5.9" screen).
  2. Copy all the glfilter parameters from the address bar.

  3. Add to your widget code the searchFilters parameter set to the value copied from the address bar.

    <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",
            type: "models",
            params: {
              clid: 2310490,
              searchText: "Смартфон",
              themeId: 1,
              searchFilters: "glfilter=13476053%3A1&glfilter=15156912%3A15934123"
            }
          });
        }
        w.YaMarketAffiliate
          ? start()
          : w.addEventListener("YaMarketAffiliateLoad", start);
      })(window);
    </script>
    <div id="marketWidget"></div>