Публикация виджетов

Под публикациий виджетов понимается процесс размещения HTML кода виджета на вашем сайте. Рассмотрим несколько типовых примеров использования виджетов.

Карточка товара

Допустим, на странице товара планируется добавить два виджета:

  • Отзывы о товаре
  • Рейтинг товара

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

  1. Настроить виджеты в ЛК (например, кол-во отзывов в виджете, критерии для сортироки отзывов и т.д)
  2. В шаблон страницы добавить JS код и контейнеры
  3. В скрипт добавить команды отрисовки виджетов

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

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

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

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

  • product-reviews — отзывы о товаре
  • inline-rating — рейтинг товара

Добавление контейнеров

Контейнер — это DOM элемент, в котором появится виджет.

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

Как показано на картинке, добавьте в шаблон страницы карточка товара два пустых контейнера с id:

  • sp-product-reviews-container — отзывы о товаре
  • sp-inline-rating-container — рейтинг товара

Команды для отображения виджетов

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

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

    // Добавить стили
    _shoppilot.push(['_addStyles', 'widgets']);

    // Установить идентификатор товара в карточке товара
    _shoppilot.push(['_setProductId', '<?= PRODUCT_ID ?>']);

    // Команды для отображения виджетов
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    _shoppilot.push(['_addProductWidget',
        'product-reviews', '#sp-product-reviews-container']);
    _shoppilot.push(['_addProductWidget',
        'inline-rating', '#sp-inline-rating-container']);

    var store_id = '<?= 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>

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

  • PRODUCT_ID — идентификатор продукта. Имеет то же значение, что и offer.id из YML файла.
  • STORE_ID — идентификатор витрины вашего интернет-магазина (доступен в ЛК).
  • _shoppilot.push(... — команда добавления виджета.

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

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

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

  1. Настроить виджет в ЛК (см. выше)
  2. В шаблон страницы добавить JS код и контейнеры
  3. В скрипт добавить команды отрисовки виджетов

Добавление контейнеров

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

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

Команды для отображения виджетов

Скопируйте и установите код на свой сайт сразу после открывающего тега <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 = '<?= 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>

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

  • STORE_ID — идентификатор витрины вашего интернет-магазина.
  • Все виджеты будут получены с помощью одного запроса.

Если используется 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 ""