Установка виджетов с рейтингом в категориях товара

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

Перед тем, как добавить виджеты в категориях товара, убедитесь, что у уже установлен скрипт Aplaut. Читайте: Установка скрипта Aplaut
​

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

_shoppilot.push(['_addProductWidget', 'listing-inline-rating', '#sp-inline-rating-product-<?= PRODUCT_ID ?>', {
  product_id: '<?= PRODUCT_ID ?>'
}]);

Обратите внимание, что на странице категория товара у продуктовых виджетов разные product_id.

Проверьте

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

<div id="sp-inline-rating-product-100"></div>
<div id="sp-inline-rating-product-101"></div>

<script>
  (function() {
    window._shoppilot = window._shoppilot || [];
    
    // Стили виджетов
    _shoppilot.push(['_addStyles', 'widgets']);
    
    // Команды для отображения виджетов    
    _shoppilot.push(['_addProductWidget', 'listing-inline-rating', '#sp-inline-rating-product-100', {product_id: '100'}]);
    _shoppilot.push(['_addProductWidget', 'listing-inline-rating', '#sp-inline-rating-product-101', {product_id: '101'}]);


    // Загрузчик скрипта
    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>

☝️Чтобы при загрузке виджетов страница не дергалась от появления новых элементов, задайте через стили минимальную высоту контейнерам инлайн-рейтингов.

☝️ Большое кол-во виджетов не создает дополнительной нагрузки для вашего сайта, т.к. все виджеты будут получены с помощью одного запроса.