Перейти на сайт

Установка виджетов с отзывами в карточках товара

Добавьте виджеты в карточку

На продуктовых страницах / карточках товара по-умолчанию располагаются два виджета с отзывами:

  • Отзывы о товаре

  • Инлайн-рейтинг (звёзды товара)

В зависимости от вашего кейса, в карточке могут присутствовать и другие виджеты. Принцип установки не меняется.


Внимание: Перед установкой виджетов убедитесь, что у вас уже:

Добавляем виджеты

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

    // Стили виджетов
    _shoppilot.push(['_addStyles', 'widgets']);

    // Идентификатор товара в карточке товара
    _shoppilot.push(['_setProductId', '<?= PRODUCT_ID ?>']);

    // Команды для отображения виджетов
    _shoppilot.push(['_addProductWidget',
        'product-reviews', '#sp-reviews-container']);
    _shoppilot.push(['_addProductWidget',
        'inline-rating', '#sp-inline-rating-container']);


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

Эти команды подключать виджеты отзывы и рейтинги в карточках товара.


Проверьте

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


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

    // Стили виджетов
    _shoppilot.push(['_addStyles', 'widgets']);

    // Идентификатор товара в карточке товара
    _shoppilot.push(['_setProductId', '<?= PRODUCT_ID ?>']);

    // Команды для отображения виджетов
    _shoppilot.push(['_addProductWidget',
        'product-reviews', '#sp-reviews-container']);
    _shoppilot.push(['_addProductWidget',
        'inline-rating', '#sp-inline-rating-container']);

    // Загрузчик скрипта
    var store_id = '<?= APLAUT_STORE_ID ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = '//get.aplaut.io/f/v1/'
      + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>


Еще:

👆 На этом пока всё