Ajax пагинация

Используйте JS API если на сайте используется Ajax пагинация

Если товары на странице добавляются асинхронно, то нельзя использовать команды _shoppilot.push() для добавления виджетов.

Вместо этого необходимо использовать JS API напрямую.

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

// Для удобства оборачиваем API в promise
// После загрузки скрипта promise станет resolved
var ShoppilotAPI = new Promise(function (resolve) {
_shoppilot.push([
'_setOnReady',
function (Shoppilot) {
resolve(Shoppilot);
}
]);
});

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

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

Внимание: В примере выше используется нативный Promise. Это API не поддерживается некоторыми старыми браузерами. Существуют кроссбраузерные библиотеки, например, jQuery Deferred.

Допустим, такой HTML уже вы загружаете через AJAX и уже добавили его в DOM:

<div class="products">
<div class="product" data-id="10000">
<div class="product-name">A product</div>
<div class="product-rating"></div>
</div>
<div class="product" data-id="10001">
<div class="product-name">A product</div>
<div class="product-rating"></div>
</div>
<div class="product" data-id="10002">
<div class="product-name">A product</div>
<div class="product-rating"></div>
</div>
</div>

Где-то в вашем коде:

<script>
var product_containers = document.querySelectorAll('.products .product');

// Получаем объект API из промиса
ShoppilotAPI.then(function (Shoppilot) {
var ProductWidget = Shoppilot.require('product_widget');
var MultiWidget = Shoppilot.require('multi_widget');

// Создаём экземпляр виджета для каждого товара на странице
var widgets = Array.prototype.slice
.call(product_containers)
.map(function (product_container) {
var widget_container = product_container.querySelector(
'.product-rating'
);

// В этом примере ID получаем из data-атрибута
// Способ получения product_id неважен
var product_id = product_container.dataset.id;

return new ProductWidget({
name: 'listing-inline-rating',
product_id: product_id,
container: widget_container
});
});

// Одним запросом получаем все виджеты
MultiWidget.render(widgets);
});
</script>
👆 На этом пока всё