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

Команды загрузчика скрипта 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>