Виджеты в карточке товара

Рассмотрим пример, когда на странице два виджета:

  • Отзывы о товаре
  • Рейтинг товара

Чтобы виджеты появились на странице необходимо выполнить следующие действия:

  1. Добавить элементы-контейнеры для виджетов в нужные места шаблона.
  2. Настроить виджеты в ЛК.
  3. Добавить виджеты в скрипт на сайте.

1. Шаблон страницы

Пример страницы с виджетами

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

  • sp-product-reviews-container — отзывы о товаре
  • sp-inline-rating-container — рейтинг товара

2. Виджеты в личном кабинете

В личном кабинете в разделе Для сайта → Виджеты проверьте наличие виджетов:

Виджеты в личном кабинете

Каждый виджет имеет идентификатор, по которому на него можно сослаться:

  • product-reviews — отзывы о товаре
  • inline-rating — рейтинг товара

3. Скрипт на странице сайта

Скопируйте и установите код на свой сайт сразу после открывающего тега <body>:

<script>
  (function() {
    window._shoppilot = window._shoppilot || [];

    // Добавить стили
    _shoppilot.push(['_addStyles', 'widgets']);

    // Установить идентификатор товара в карточке товара
    _shoppilot.push(['_setProductId', '<?= TODO: Product ID ?>']);

    // Добавить виджет 'отзывы о товаре' в DOM контейнер #sp-product-reviews
    _shoppilot.push(['_addProductWidget', 
        'product-reviews', '#sp-product-reviews-container']);

    // Добавить виджет 'инлайн рейтинг' в dom контейнер #sp-inline-rating
    _shoppilot.push(['_addProductWidget', 
        'inline-rating', '#sp-inline-rating-container']);

    var store_id = '<?= TODO: Store ID ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = '//get.shoppilot.ru/f/v1/'
      + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>

Скрипт на странице должен появляться только один раз. {: class="warning"}

Комментарии к скрипту:

  • Product ID — идентификатор продукта. Имеет то же значение, что и offer.id из YML файла.
  • Store ID — идентификатор витрины вашего интернет-магазина. Его можно найти в ЛК в разделе Настройки → Ключи API.
  • _shoppilot.push(['_addProductWidget', ... — это добавление виджета в DOM контейнер на странице.

results matching ""

    No results matching ""