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>