Виджеты на листингах

Рассмотрим пример, когда на странице товарная категория расположен список товаров. Рядом с каждым товаром необходимо отобразить его рейтинг.

Чтобы виджеты появились на странице необходимо выполнить следующие действия:

  1. Добавить элементы-контейнеры для виджетов в нужные места шаблона.
  2. Настроить виджет в ЛК.
  3. Добавить виджеты в скрипт на сайте.

1. Шаблон страницы

Пример страницы с виджетами на листинге

Как показано на картинке, для каждого товара добавьте в шаблон листинга пустые контейнеры с DOM ID = sp-inline-rating-PRODUCT_ID, где PRODUCT_ID — идентификатор продукта. (то же, что и offer.id в YML файле).

2. Виджеты в личном кабинете

В личном кабинете в разделе Для сайта → Виджеты проверьте наличие виджетов:

Виджеты в личном кабинете

Каждый виджет имеет идентификатор, по которому на него можно сослаться:

  • category-inline-rating — рейтинг товара на странице категории

3. Скрипт на странице сайта

Скопируйте и установите код на свой сайт сразу после открывающего тега <body>:

<script>
  window._shoppilot = window._shoppilot || [];
  _shoppilot.push(['_addStyles', 'widgets']);
</script>

Далее для каждого товара на странице выполните команду: _addProductWidget

<? foreach($products as $product): ?>
<div class="product">
  <div class="product-name"><?= $product->name ?></div>
  <div class="product-price"><?= $product->price ?></div>
  <div
    class="product-rating"
    id="sp-inline-rating-<?= $product->id ?>"></div>
  <script>
    _shoppilot.push([
      '_addProductWidget',
      'category-inline-rating',
      '#sp-inline-rating-<?= $product->id ?>',
      { product_id: '<?= $product->id ?>' }
    ]);
  </script>
</div>
<? endforeach; ?>

После того, как все виджеты настроены, добавьте последнюю часть скрипта:

<script>
  (function() {
    var store_id = '<?= TODO: Store ID ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = '//get.shoppilot.ru/f/v1/'
      + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>

Этот код на странице должен появляться только один раз и команды _shoppilot.push() обязаны находиться перед ним. {: class="warning"}

Комментарии к скрипту:

  • Store ID — идентификатор витрины вашего интернет-магазина. Его можно найти в ЛК в разделе Настройки → Ключи API.
  • Несмотря на то, что виджетов на странице может быть много десятков, они будут получены с помощью лишь одного запроса.

Если используется AJAX пагинация

Если карточки товаров в листинге добавляются асинхронно, то использовать команды _shoppilot.push() для добавления виджетов нельзя. Вместо этого используйте JS API напрямую.

Вверху страницы:

<script>
  var ShoppilotAPI = $.Deferred();

  window._shoppilot = window._shoppilot || [];

  _shoppilot.push(['_setOnReady', function (Shoppilot) {
    ShoppilotAPI.resolve(Shoppilot);
  }]);
</script>

Этот HTML уже динамически добавлен в 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 products = document.querySelectorAll('.products .product');

  ShoppilotAPI.then(function (Shoppilot) {
    var ProductWidget = Shoppilot.require('product_widget');
    var MultiWidget = Shoppilot.require('multi_widget');
    var widgets = Array.prototype.slice.call(products).map(
      function (product) {
        return new ProductWidget({
          name: 'listing-inline-rating',
          product_id: product.dataset.id,
          container: product.querySelector('.product-rating')
        });
      }
    );
    MultiWidget.render(widgets);
  });
</script>

Комментарии к коду:

  • При работе с JS API удобно использовать Promise (в примере jQuery).
  • ID товаров в примере передается через атрибут data-id.

results matching ""

    No results matching ""