Руководство по установке Widgets 2.0 на сайт, с помощью data-атрибутов
Шаг 1. Установка базового скрипта
1. Добавление оптимизационных ссылок
Секция <head> вашего HTML-документа.
Сразу после открывающего тега <head>, добавьте следующие элементы <link>:
<link rel="preconnect" href="https://get.aplaut.io" /> <link rel="preconnect" href="https://get.apltcdn.com" />
Оптимизационные ссылки улучшают время соединения и быстроту получения ресурсов, что напрямую влияет на скорость инициализации сервисов на вашем сайте.
2. Интеграция скрипта
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. Разместите данный скрипт в теге <head>
| ‼️Обратите внимание Базовый скрипт должен быть добавлен на все страницы, где будут размещены виджеты. |
Шаг 2. Размещение виджетов
Чтобы интегрировать виджет на страницу, создайте специальный DOM-элемент с нужными параметрами.
Пример:
<div class="aplaut-widget-instance"
data-context-id="{CONTENT_ID}"
data-widget="{WIDGET_TYPE}">
</div>🔹 Что означают параметры?
class="aplaut-widget-instance" – обязательный атрибут, который сообщает скрипту, что это контейнер для виджета.
data-context-id="{CONTENT_ID}" – ID товара из вашего каталога Aplaut ( offer.id из YML-каталога).
data-widget="{WIDGET_TYPE}" – тип виджета, который нужно разместить.
| Доступные типы виджетов: |
|---|
|
*Обратите внимание, функционал и виджет "Вопросы и ответы" входят не во все тарифы. Убедитесь, что у вас в договоре включен данный функционал.
**Для активации Суммаризации обратитесь к менеджеру Aplaut.
☝️ Рекомендуем задать контейнеру <div id='ap-inlineInformer-container'/> фиксированную высоту (CSS min-height). Чтобы будущий виджет с рейтингом при загрузке страницы не дергал верстку сайта. |
Пример использования
<html lang="ru">
<head>
<title>Document</title>
<link rel="preconnect" href="https://get.aplaut.io" />
<link rel="preconnect" href="https://get.apltcdn.com" /
<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/123456789/app.js", "aplaut", ["createWidget", "setUser",
"on", "emit", "setParams", "setConsumer", "setAuthParams", "manageOrder", "clearFormData", "setAuthStrategy"]);</script>
</head>
<body>
<!-- Инлайн рейтинг -->
<div class="aplaut-widget-instance"
data-context-id="34554"
data-widget="inlineInformer"></div>
<!-- Отзывы -->
<div class="aplaut-widget-instance"
data-context-id="34554"
data-widget="reviews"></div>
</body>
</html>