Товарные виджеты SocialMart можно разместить на турбо–страницах Яндекса, используя в разметке турбо–страницы компонент ExtSocialMartWidget следующего вида:

<ExtSocialMartWidget 
data-widget-id="Widget ID"
data-model-id="Model ID"
data-search="Text for search"
data-category-ids="Category ID"
data-vendor-ids="Vendor ID"
data-matrix-cols="Cols"
data-matrix-rows="Rows"
data-sm-source="CSS selector"
data-sm-source-target="CSS selector"
data-iframe-width="Width"
data-iframe-height="Height"
/>

Для настройки компонента ExtSocialMartWidget используются следующие атрибуты:

  • data-widget-id — атрибут является обязательным и принимает значение ID виджета. ID виджета можно посмотреть в личном кабинете в разделе Инструменты/Виджеты.

Остальные атрибуты не обязательные, их можно не использовать:

  • data-model-id — ID или список ID моделей у Яндекс.Маркета, разделенных запятой. ID модели можно узнать на карточке модели на Яндекс.Маркет. При использовании этого атрибута все остальные атрибуты, касающиеся поиска моделей, игнорируются.
  • data-search — текст, который будет использован в качестве поискового запроса.
  • data-category-ids — один или несколько идентификаторов категорий, которые будут использованы для ограничения поиска. ID категорий можно посмотреть на Яндекс.Маркет на странице соответствующей категории.
  • data-vendor-ids — один или несколько идентификаторов производителей, которые будут использованы для ограничения поиска. ID производителей можно посмотреть на Яндекс.Маркет на странице бренда.
  • data-matrix-cols — количество колонок матричного виджета.
  • data-matrix-rows — количество строк матричного виджета.
  • data-sm-sourceиспользуется для режима каталожного отображения виджетов. Данная настройка указывает на html–элемент, в котором указан текст и/или data-model-id, по которому нужно произвести поиск товара. Если у указанного элемента прописан data-model-id, то в данном случае текст игнорируется и поиск производится по указанному ID модели.
  • data-sm-source-targetиспользуется для режима каталожного отображения виджетов. Необязательная настройка, которая указывает на html–элемент, в который нужно будет вставить виджет. Важно: если настройка установлена, то количество элементов, подходящих под селектор из data-sm-source-target , должно совпадать с количеством элементов, подходящих под селектор из data-sm-source.
  • data-iframe-width — ширина iframe блока виджета.
  • data-iframe-height — высота iframe блока виджета.

Подробнее о примерах использования data–атрибутов читайте в статье.

Для размещения виджета вставьте компонент ExtSocialMartWidget в раздел <![CDATA[]]> внутри элемента turbo:content.

Пример:

<turbo:content> 
<![CDATA[
...
<ExtSocialMartWidget
data-widget-id="6sm4PHh7"
data-model-id="418964205"
data-iframe-width="300"
data-iframe-height="700"
/>
...
]]>
</turbo:content>

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

Также, виджеты на турбо–страницах можно разместить через сервис размещения рекламы ADFOX, следуя инструкции от Яндекса.

При этом необходимо внимательно следовать инструкциям:

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