Перед добавлением виджетов требуется подготовить ваш сайт и добавить туда DOM-элементы, который будет контейнером (родительским элементом) для виджетов. Рассмотрим:

• Карточку товара

• Страницу категории (листинг)

Добавление DOM контейнеров в карточке товара

Как показано на картинке ниже, добавьте в шаблон страницы Карточка товара два пустых контейнера. Пример:

• <div id='sp-inline-rating-container' /> — рейтинг товара

• <div id='sp-reviews-container'/> — отзывы о товаре

Позже ваши виджеты появится внутри этих элементов и заменят собой все содержимое.

Рекомендация: Задайте контейнеру <div id='sp-inline-rating-container' /> — рейтинг товара фиксированную высоту (CSS min-height). Чтобы будущий виджет с рейтингом при загрузке страницы не дергал верстку сайта.

Важно: виджет с отзывами содержит микроразметку отзывов Schema.org. Чтобы поисковые системы смогли корректно прочитать микроразметку отзывов, нужно разместить виджет внутри микроразметки товара. Следует учитывать, что поисковики могут иметь собственные требования к микроразметке, отличные от спецификации Schema.org. Например, вот требования к разметке товара Google.

Добавление DOM контейнеров в категории товара

На страницах категории товара будут расположены рейтинги у каждого товара листинга.

Как показано на картинке ниже, добавьте в шаблон страницы Категория товара DOM-элемент, который будет являться контейнером для виджетов. Пример:

Поместите в нужное место каждого блока с товаром элемент

<div id="sp-inline-rating-product-<?= PRODUCT_ID ?>"></div>,

где PRODUCT_ID — идентификатор продукта (offer.id в YML файле).

Таким образом, на странице категории у каждого товара будет свой контейнер для виджета с уникальным id.

Рекомендация: Задайте контейнерам фиксированную высоту (CSS min-height). Чтобы будущие виджеты с рейтингами товара при загрузке страницы не дергал верстку сайта.

Обратите внимание: виджетов на вашем сайте может быть гораздо больше. Например на главной странице, на странице бренда, итд. Учитывайте это при добавлении ДОМ-элементов.

Еще: