Руководство по установке Widgets 2.0 на сайт
1. Установка базового скрипта
1. Перейдите в ЛК Aplaut, проследуйте по следующему пути: Настройки ➝ Разработчикам ➝ store_id
2. Скопируйте скрипт и замените {Store ID} на store_id из ЛК Aplaut:
// Базовый скрипт
<script>!function(t, e, n, c){if(!t[n]){var r, o, c;function s(t){r[t]=function(){o.push([t].concat(Array.prototype.slice.call(arguments, 0)))}}t[n]={}, (r=t[n]).v="1.0", r.q=[], o=r.q, r.init=function(t, e){r.initArgs=arguments}, r.start=function(){for(i=0;i<c.length;i++)s(c[i])}, r.start(), a=document.createElement("script"), m=document.getElementsByTagName("script")[0], a.async=1, a.src=e, a.type="module", m.parentNode.insertBefore(a, m)}}(window, "https://get.aplaut.io/f/v2/{Store ID}/app.js", "aplaut", ["createWidget","setUser","on","emit","setParams","setConsumer","setAuthParams","manageOrder","clearFormData",]);</script>3. Добавьте базовый скрипт Widgets 2.0 после открывающего тега <body> на страницах сайта где планируете использовать виджеты
Базовый скрипт должен быть установлен на всех страницах, где планируется размещение виджетов
2. Подготовка контейнеров
1. Создайте DOM контейнеры на страницах, где планируется разместить виджеты:
- <div id='ap-reviews-container'/> — для виджета отзывов
- <div id='ap-inlineInformer-container'/> — для виджета с краткой сводкой по товару (рейтинг, кол-во отзывов)
- <div id='ap-questionsAnswers-container'/> — для виджета вопросов и ответов
- Рекомендуем задать контейнеру <div id='ap-inlineInformer-container'/> фиксированную высоту (CSS min-height). Чтобы будущий виджет с рейтингом при загрузке страницы не дергал верстку сайта.- Нименование контейнеров может быть изменено |
3. Размещение виджетов
| - Перед установкой убедитесь, что у вас уже установлен базовый скрипт и добавлены DOM контейнеры под все необходимые виджеты, как описано в пунктах выше. - Команды размещения виджетов должны быть расположены после базового скрипта. |
Виджет Reviews
Виджет может быть расположен в карточке товара.
1. Вставьте скрипт, расположенный ниже, после базового скрипта:
aplaut.createWidget({
container_id: "ap-reviews-container",
type: "reviews",
context_id: "{CONTEXT_ID}"
});2. Укажите {CONTENT_ID} товара из каталога ЛК Aplaut (offer.id товара из YML-каталога, импортируемого в Aplaut)
Виджет InlineInformer
Виджет может быть расположен в карточке товара.
1. Вставьте скрипт, расположенный ниже, после базового скрипта:
aplaut.createWidget({
container_id: "ap-inlineInformer-container",
type: "inlineInformer",
context_id: "{CONTEXT_ID}",
params: {
scrollTarget: "ap-reviews-container"
}
});2. Укажите {CONTENT_ID} товара из каталога ЛК Aplaut (offer.id товара из YML-каталога, импортируемого в Aplaut)
Виджет questionsAnswers*
Виджет может быть расположен в карточке товара.
1. Вставьте скрипт, расположенный ниже, после базового скрипта:
aplaut.createWidget({
container_id: "ap-questionsAnswers-container",
type: "questionsAnswers",
context_id: "{CONTEXT_ID}"
});2. Укажите {CONTENT_ID} товара из каталога ЛК Aplaut (offer.id товара из YML-каталога, импортируемого в Aplaut)
*Обратите внимание, функционал и виджет "Вопросы и ответы" входят не во все тарифы. Убедитесь, что у вас в договоре включен данный функционал.
Пример использования
<html lang="ru">
<body>
<div id="ap-reviews-container"></div>
<div id="ap-inlineInformer-container"></div>
<div id="ap-questionsAnswers-container"></div>
<script>!function(t, e, n, c){if(!t[n]){var r, o, c;function s(t){r[t]=function(){o.push([t].concat(Array.prototype.slice.call(arguments, 0)))}}t[n]={},(r=t[n]).v="1.0", r.q=[], o=r.q, r.init=function(t, e){r.initArgs=arguments},r.start=function(){for(i=0;i<c.length;i++)s(c[i])}, r.start(),a=document.createElement("script"),m=document.getElementsByTagName("script")[0],a.async=1, a.src=e, a.type="module", m.parentNode.insertBefore(a, m)}}(window,"https://get.aplaut.io/f/v2/{Store ID}/app.js", "aplaut", ["createWidget", "setUser","on", "emit", ]);</script>
<script>
const productId = "123123";
aplaut.createWidget({
container_id: "ap-reviews-container",
type: "reviews",
context_id: productId,
});
aplaut.createWidget({
container_id: "ap-inlineInformer-container",
type: "inlineInformer",
context_id: productId,
params: {
scrollTarget: "ap-reviews-container"
}
});
aplaut.createWidget({
container_id: "ap-questionsAnswers-container",
type: "questionsAnswers",
context_id: productId,
});
</script>
</body>
</html>