Возможны два сценария использования нескольких виджетов на странице.

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

Второй сценарий ­– когда требуется в статье выводить несколько раз виджет одного и того же формата с разными товарами. К примеру, такой вариант хорошо монетизирует статьи вида «10 лучших смартфонов этого года». Для этого необходимо вставлять виджет с дополнительной html­-разметкой.

В html­-коде страницы сначала вставляется разметка в соответствующих местах статьи:

<div data-widget-id="XXXXXX" class="smw3" data-model-id="A"></div>
<div data-widget-id="XXXXXX" class="smw3" data-model-id="B"></div>
<div data-widget-id="XXXXXX" class="smw3" data-model-id="C"></div>

А в конце страницы однократно вставляется главный код виджета:

<noscript><a href="http://socialmart.ru" title="SocialMart" target="_blank">Виджет от SocialMart</a></noscript>
<script async type="text/javascript" charset="UTF­8" src="http://widget.socialmart.ru/init.php?render=js&wid=XXXXXX"></script>

Здесь XXXXXX –­ это идентификатор виджета, а A, B и C – это номера моделей товаров, по которым идет поиск. Номер модели берется с карточки модели на Яндекс.Маркет.

Рассмотрим подробнее, как это делается, на примере материала.

Код, полученный партнером в личном кабинете, имеет следующий вид:

<div data-widget-id="6SaWAIeN" class="smw3"></div>
<noscript><a href="http://socialmart.ru" title="SocialMart" target="_blank">Виджет от SocialMart</a></noscript>
<script async type="text/javascript" charset="UTF­8" src="http://widget.socialmart.ru/init.php?render=js&wid=6SaWAIeN"></script>

Верхнюю строчку кода мы вставляем несколько раз в соответствующих местах статьи, добавляя каждый раз data­-model-id="Номер модели", а нижнюю часть кода вставляем однократно в конце статьи. Получится следующий код:

На этом разметка и настройка завершена. Также существует альтернативный вариант разметки, вместо data-model-id="Номер модели" можно использовать data-search="Название модели".

Например, для Apple iPad Air 2 строка соответствующей разметки будет такой:

<div data-widget-id="hJvqmEC" class="smw3" data-search="Apple iPad Air 2"> </div>

Подробнее о настройках через html можно прочитать в соответствующем разделе.

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

Вы нашли ответ?