# Команды загрузчика скрипта App.js

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

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

Код загрузчика скрипта:

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

STORE_ID — идентификатор витрины вашего интернет-магазина
Команды скрипта всегда вызываются до кода загрузки скрипта

Команды скрипта — это упрощенный способ вызова функций JS API.

WARNING

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

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

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

# _setProductId

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

1
2

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

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

# _setCategoryId

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

1
2

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

# _setBrandName

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

1
2

Выставляет бренд Samsung как контекст страницы. Используется на листингах бренда.

# _addProductWidget

_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'}])

1
2
3
4
5
6
7
8
9
10

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

# _addCategoryWidget

_shoppilot.push(['_setCategoryId', '55']);

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

1
2
3
4

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

# _addBrandWidget

_shoppilot.push(['_setBrandName', 'LG']);

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

1
2
3
4

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

# _addStoreWidget

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

1
2

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

# _addStyles

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

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

# _setReviewCustomAttributes

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

1
2
3
4
5

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

# _setReviewCustomSource

_shoppilot.push(['_setReviewCustomSource', 'lk-kabinet');

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

# _setReviewCustomMedium

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

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

# _setReviewCustomCampaign

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

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

# _setOnReady

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

1
2
3
4

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

# _setOnReady & Promises

<!-- Вверху страницы -->
<script>
  var ShoppilotAPI = $.Deferred();
</script>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

← Введение App.js - JS API →