Перейти к содержанию

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

Типы виджетов

Виджеты могут размещаться на любой странице вашего сайта в любой её части и иметь любой дизайн.

Для сайтов интернет-магазинов существуют четыре типа виджетов в зависимости от контекста их использования:

  • Товар
  • Категория товара
  • Бренд/производитель товара
  • Компания

Контекст виджета определяет доступный внутри этого виджета набор переменных.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>:

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<? 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; ?>

После разместите основную часть скрипта:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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.

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

1
2
3
4
5
6
7
8
9
<script>
  var ShoppilotAPI = $.Deferred();

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

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

Этот HTML уже динамически добавлен в DOM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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>

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<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.