Перейти к основному содержимому

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

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

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

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

<script>
  (function() {
    // Инициализация
    window._shoppilot = window._shoppilot || [];

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

    // Основная часть скрипта
    var store_id = '<?= APLAUT_STORE_ID ?>';
    var theme_id = 'default';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src =
      '//get.aplaut.io/f/v1/' + store_id + '/' + theme_id + '/app.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
  })();
</script>

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

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

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

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

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

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

_setProductId​

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

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

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

_setCategoryId​

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

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

_setBrandName​

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

Выставляет бренд 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'}
]);

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

_addCategoryWidget​

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

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

Добавляет виджет для категории. Контекст будет взят из глобально установленного значения или может быть переопределен через 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]'
]);

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

_addStoreWidget​

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

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

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

Добавляет написанному отзыву произвольные атрибуты, которые видно в ЛК и 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(…)
  }
]);

Задает функцию-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>