Скрипт Aplaut имеет две ответственности:

  • Отображать виджеты на сайте

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

Скрипт состоит из базовой части (загрузчик скрипта) и команд. Для начала нужно установите базовую часть скрипта в конце тега body. Она не меняется от страницы к странице.

Базовая часть скрипта - загрузчик


<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 — идентификатор витрины вашего интернет-магазина

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

Установите базовую скрипта часть на сайте

Перейдите в Настройки → Omnibox → Скрипт на сайт. Скопируйте весь скрипт. Так сразу будет указан ваш APLAUT_STORE_ID. Установите на сайте в конце тега body.

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


О командах

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

См список команд ниже.

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


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

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

Пример скрипта - базовая часть и команды для добавления виджетов:

<script>
(function() {
window._shoppilot = window._shoppilot || [];

// Стили виджетов
_shoppilot.push(['_addStyles', 'widgets']);

// Идентификатор товара в карточке товара
_shoppilot.push(['_setProductId', '<?= PRODUCT_ID ?>']);

// Команды для отображения виджетов
_shoppilot.push(['_addProductWidget',
'product-reviews', '#sp-reviews-container']);
_shoppilot.push(['_addProductWidget',
'inline-rating', '#sp-inline-rating-container']);

// Загрузчик скрипта
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>

Полный список команд


_setProductId

_setProductId выставляет товар c ID abc123 как контекст страницы по умолчанию. Используется на карточках товара. Омнибокс (формы отзывов, вопросов-ответов) будут работать в контексте этого товара. Товарные виджеты будут отображать контент для этого товара. Пример вызова:

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

_setCategoryId

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

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

_setBrandName

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

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

_addProductWidget

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

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

_addCategoryWidget

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

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

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

_addCategoryWidget

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

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

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

_addBrandWidget

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

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

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

_addStoreWidget

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

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

_addStyles

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

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

_setReviewCustomAttributes

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

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

_setReviewCustomSource

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

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

_setReviewCustomMedium

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

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

_setReviewCustomCampaign

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

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

_setOnReady

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

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

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

Вы нашли ответ?