Руководство по установке Widgets 2.0 на сайт, с помощью data-атрибутов

В статье описан рекомендованный процесс установки виджетов 2.0 — с помощью data-атрибутов

Виджеты это готовый продукт, все что нужно для установки, это добавить несколько сниппетов кода в <head> сайта, а также DOM-контейнеры. Благодаря этому, обычно, установка занимает не более 5-15 минут чистого времени.

Шаг 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>

‼️Обратите внимание

- Базовый скрипт должен быть добавлен на все страницы, где будут размещены виджеты.

- Если базовый скрипт будет установлен не в <head>, это может вызвать некорректную работу виджетов.

Шаг 2. Размещение виджетов

Чтобы интегрировать виджет на страницу, создайте специальный DOM-элемент с нужными параметрами.

‼️Обратите внимание

Тип тега должен соответствовать типу виджета.

Пример:

<ap-reviews class="aplaut-widget-instance" 
     data-context-id="{CONTENT_ID}" 
     data-widget="{WIDGET_TYPE}">
</ap-reviews>

🔹 Что означают параметры?

class="aplaut-widget-instance" – обязательный атрибут, который сообщает скрипту, что это контейнер для виджета.

data-context-id="{CONTENT_ID}" – ID товара из вашего каталога Aplaut ( offer.id из YML-каталога).

data-widget="{WIDGET_TYPE}" – тип виджета, который нужно разместить (см. таблицу ниже).

1. Основные виджеты:

Тип виджета	WIDGET_TYPE	Тег виджета (вэб компоненты)
Отзывы	`reviews`	`<ap-reviews></ap-reviews>`
Инлайн-рейтинг	`inlineInformer`	`<ap-informer></ap-informer>`
Вопросы/ответы*	`questionsAnswers`	`<ap-questions-answers></ap-questions-answers>`

*Обратите внимание, функционал и виджет "Вопросы и ответы" входят не во все тарифы. Убедитесь, что у вас в договоре включен данный функционал.

2. Дополнительные виджеты:

Тип виджета	WIDGET_TYPE	Тег виджета (вэб компоненты)
Фото/видео галерея	`reviewsGallery`	`<ap-reviews-gallery></ap-reviews-gallery>`
Суммаризация отзывов**	`summary`	`<ap-reviews-summary></ap-reviews-summary>`
Форма написания отзыва	`reviewsForm`	`<ap-reviews-form></ap-reviews-form>`

**Для уточнения условий и активации функционала Суммаризации обратитесь к менеджеру Aplaut.

☝️ Рекомендуем задать контейнеру с виджетом Инлайн-рейтинг фиксированную высоту (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>
    ...
    <!-- Инлайн рейтинг -->
    <ap-informer class="aplaut-widget-instance" 
      data-context-id="12345" 
      data-widget="inlineInformer">
    </ap-informer>
    ...
    <!-- Отзывы -->
    <ap-reviews class="aplaut-widget-instance" 
      data-context-id="12345" 
      data-widget="reviews">
    </ap-reviews>
    ...    
  </body>
</html>

👆 На этом пока всё