Установка скрипта Aplaut
Скрипт 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>