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

Перед тем, как добавить виджеты в категориях товара, убедитесь, что у уже установлен скрипт 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>

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

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

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