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

Установка скрипта

Скрипт, который устанавливается на ваш сайт имеет 2 ответственности:

  • Отображать виджеты. Читайте далее.
  • Отображать веб-формы (отзыв, вопрос, ответ, комментарий).

Загрузчик скрипта

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<script>
  (function() {
    // Инициализация
    window._shoppilot = window._shoppilot || [];

    // Команды скрипта
    // …

    // Основная часть скрипта
    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 — идентификатор витрины вашего интернет-магазина
  • Команды скрипта всегда вызываются до кода загрузки скрипта

Команды скрипта

Команды скрипта — это упрощенный способ вызова функий JS API. Команды должны быть расположены после инициализации, но до основной части. Они обрабатываются лишь один раз, сразу после того, как скрипт загрузится.

Пример вызова команды:

1
_shoppilot.push(['command', 'arg1', 'arg2', 'arg3']);

_setProductId

1
2
// <offer id="abc123"></offer> в YML файле
_shoppilot.push(['_setProductId', 'abc123']);

Выставляет товар c ID abc123 как контекст страницы. Используется на карточках товара.

Омнибокс будет работать в контексте этого товара. Товарные виджеты будут отображать контент для этого товара.

_setCategoryId

1
2
// <category id="321"></category> в YML файле
_shoppilot.push(['_setCategoryId', '321']);

Выставляет категорию c ID abc123 как контекст страницы. Используется на листингах категории.

_setBrandName

1
2
// <offer id="abc123"><vendor>Samsung</vendor></offer> в YML файле
_shoppilot.push(['_setBrandName', 'Samsung']);
Выставляет бренд Samsung как контекст страницы. Используется на листингах бренда.

_addProductWidget

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
_shoppilot.push(['_setProductId', 'abc123']);

// Добавит виджет product-reviews для товара abc123 в элемент с ID "product-reviews"
_shoppilot.push(['_addProductWidget', 'product-reviews', '#product-reviews']);

// Добавит виджет questions для товара abc123 в элемент с ID "product-questions"
_shoppilot.push(['_addProductWidget', 'questions', '#product-questions']);

// Добавит виджет inline-rating для товара qwe890 в элемент с классом "inline-rating-qwe890"
_shoppilot.push(['_addProductWidget', 'inline-rating', '.inline-rating-qwe890', {product_id: 'qwe890'}])

Добавляет виджет для товара. Контекст будет взят из глобально установленного значения или может быть переопределен через options.product_id.

_addCategoryWidget

1
2
3
4
_shoppilot.push(['_setCategoryId', '55']);

// Добавит виджет category-reviews для категории 55 в элемент с ID "category-reviews"
_shoppilot.push(['_addCategoryWidget', 'category-reviews', '#category-reviews']);

Добавляет виджет для категории. Контекст будет взят из глобально установленного значения или может быть переопределен через options.category_id.

_addBrandWidget

1
2
3
4
_shoppilot.push(['_setBrandName', 'LG']);

// Добавит виджет brand-reviews для бренда LG в элемент <div data-brand-reviews></div>
_shoppilot.push(['_addBrandWidget', 'brand-reviews', 'div[data-brand-reviews]']);

Добавляет виджет для бренда. Контекст будет взят из глобально установленного значения или может быть переопределен через options.brand_name.

_addStoreWidget

1
2
// Добавит виджет store-review в элемент с ID "store-reviews"
_shoppilot.push(['_addStoreWidget', 'brand-reviews', '#store-reviews']);

Добавляет виджет для витрины. Контекстом будет сам магазин (сайт).

_addStyles

1
_shoppilot.push(['_addStyles', 'widgets']);

Добавляет на страницу необходимые для виджетов стили.

_setReviewCustomAttributes

1
2
3
4
5
_shoppilot.push(['_setReviewCustomAttributes', {
  my_number: 1,
  my_string: 'with some value',
  my_timestamp: {time: '2018-08-08T17:06:42+03:00'}
});

Добавляет написанному отзыву произвольные атрибуты, которые видно в ЛК и API.

_setReviewCustomSource

1
_shoppilot.push(['_setReviewCustomSource', 'lk-kabinet');
Присваиает написанному отзыву название источника.

_setReviewCustomMedium

1
_shoppilot.push(['_setReviewCustomMedium', 'desktop');

Присваиает написанному отзыву типа источника.

_setReviewCustomCampaign

1
_shoppilot.push(['_setReviewCustomCampaign', 'скидка 20% на след. покупку');

Присваиает написанному отзыву название кампании.

_setOnReady

1
2
3
4
_shoppilot.push(['_setOnReady', function (Shoppilot) {
  // API готово к работе
  // Shoppilot.require(…)
}]);

Задает функцию-callback, которая будет вызвана по завершении инициализации скрипта.

_setOnReady & Promises

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Вверху страницы -->
<script>
  var ShoppilotAPI = $.Deferred();
</script>

<!-- Какой-то код, использующий Shoppilot API -->
<script>
  ShoppilotAPI.then(function (Shoppilot) {
    var ProductWidget = Shoppilot.require('product_widget');
    // ...
  });
</script>

<!-- Скрипт Shoppilot -->
<script>
  // ...
  window._shoppilot = window._shoppilot || [];
  _shoppilot.push(['_setOnReady', function (Shoppilot) {
    ShoppilotAPI.resolve(Shoppilot);
  }]);
  // ...
</script>