Первый вариант интеграции

Для успешной интеграции этой кнопки вам нужно указать несколько строк JS-кода в то место, где вы хотите указать кнопку. Минимальный объем кода интеграции:

<script class="wizart__floating-button" data-token="token" src="https://wizart-files.fra1.cdn.digitaloceanspaces.com/production/integration/floating-button.min.js"></script>

Плавающая кнопка поддерживает следующие параметры:

<script
  class="wizart__floating-button"
  data-title="Custom button title"
  data-token="token"
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-background=""
  data-color=""
  data-image=""
  data-tooltip-title=""
  data-tooltip-position=""
  data-tooltip-disable=""
  data-glitter-disable=""
  data-width=""
  data-height=""
  data-border=""
  data-border_radius=""
  data-class_name=""
  data-compact=""
  data-tutorial=""
  data-tutorial-delay=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
  src="https://wizart-files.fra1.cdn.digitaloceanspaces.com/production/integration/floating-button.min.js"
></script>

Параметр	Описание	Тип
класс	Обязательный параметр. `Не может быть изменено` .	обязательный
src	Ссылка на js-файл с кодом интеграции.	обязательный
токен данных	токен api - генерируется и выдается администратором Wizart.	обязательный
заголовок данных	Текст, который будет работать на кнопке (значение по умолчанию - «в комнате в один клик!»).	по желанию
data-vendor_code	Уникальный SKU ID продукта, загруженного в систему Wizart.	по желанию
data-article_query	Обязателен в случае, если программа data-vendor_code недостаточно для поиска товара в системе Wizart. Результат результата быть результатом функции `JSON.stringify ();` .	по желанию
фон данных	Фон кнопки	по желанию
цвет данных	Цвет текста кнопки	по желанию
data-tooltip-disable	Если значение равно «истина», всплывающая подсказка характер не будет.	по желанию
data-tooltip-title	Текст, который будет во всплывающей подсказке (значение по умолчанию - «Смотри в его комнате!»).	по желанию
data-tooltip-position	Положение всплывающей подсказки по направлению к кнопке. Доступные значения: верхнее, правое, нижнее, левое (значение по умолчанию - верхнее).	по желанию
данные-glitter-disable	Если блеск не будет значение истинно.	по желанию
ширина данных	Максимальная ширина кнопки	по желанию
высота данных	Высота кнопки	по желанию
граница данных	Граница кнопки	по желанию
data-border-radius	Радиус границы кнопки	по желанию
данные-изображение	Ссылка на значок, который будет на кнопке.	по желанию
data-class_name	Класс, который будет установлен для кнопки на странице	по желанию
компактный	Если значение истинно, кнопка будет в компактном режиме.	по желанию
данные-учебник	Если значение true, а data-compact - true, кнопка будет анимирована: из компактного в полный режим, а затем обратно в компактный режим. Анимация повторяется только один раз.	по желанию
данные-учебник-задержка	Период времени до активации анимации. Доступные периоды: 5, 10, 20 или 30 секунд. Если этот параметр не установлен, кнопка будет сразу же анимирована.	по желанию
данные-параметры	Результат результата быть результатом функции `JSON.stringify ();` . К этому атрибуту можно добавить дополнительные параметры из таблицы ниже.	по желанию
data-onload-callback	Имя функции, которая будет в глобальной области видимости. Функция будет вызываться при загрузке визуализатора.	По желанию
данные при закрытии обратного вызова	Имя функции, которая будет в глобальной области видимости. Функция будет вызвана после закрытия визуализатора.	По желанию
селектор-элемент-данных	Селектор CSS для выбора элемента на странице и вставки кнопки в нужное место.	По желанию
данные-вставка-элемент-позиция	Позиция вставки элемента. Значения: добавить, до, после. значение по умолчанию: добавить.	По желанию
data-iframe-element-selector	Селектор CSS для выбора элемента на странице и вставки примерочной в нужное место.	По желанию
данные-вставка-iframe-элемент-позиция	Позиция вставки элемента. Значения: добавить, до, после. значение по умолчанию: добавить.	По желанию

Additional parameters for “data-parameters” attribute

Parameter	Description
user_id
context
main_page_link	Link added to your clickable logo.

Two-way shopping cart synchronization:

Когда визуализатор открыт, в window.wizartDK добавляются методы для синхронизации корзины покупок.

Установка текущего состояния товаров в корзине - setShoppingCartStore . Чтобы передать текущее состояние корзины покупок в визуализатор, вызовите метод
```
const payload = [{vendor_code: 'vendor_code1', quantity: 1 }];
window.wizartDK.setShoppingCartStore(payload);
```
Метод доступен после открытия визуализатора.
Получение текущего состояния товаров в корзине - getShoppingCartStore . Чтобы получить товары в корзине, вызовите метод getShoppingCartStore с функцией обратного вызова. Функция обратного вызова получит товары из корзины. Метод доступен после открытия визуализатора.
```
const callback = () => {
  console.log(payload);
  // [{vendor_code: 'vendor_code1', quantity: 1}, ...]
}

window.wizartDK.getShoppingCartStore(callback);
```
Удаление товара из корзины - onRemoveShoppingCartItem . Чтобы получить товары при их удалении, необходимо вызвать метод onRemoveShoppingCartItem с функцией обратного вызова. Метод доступен после открытия визуализатора.
```
const callback = () => {
  console.log(payload);
  // {  vendor_code: 'vendor_code', removeAll: true }
}

window.wizartDK.onRemoveShoppingCartItem(callback);
```
Добавление товара в корзину - onAddShoppigCartItem . Чтобы добавить товар, вам нужно вызвать функцию onAddShoppigCartItem с параметром {vendor_code: 'vendor_code'} . Метод доступен после открытия визуализатора.
```
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });
```

Второй вариант интеграции:

Чтобы эта кнопка успешно интегрировалась, вам необходимо включить следующую библиотеку в заголовок вашего сайта:

<script type="application/javascript" src="https://wizart-files.fra1.cdn.digitaloceanspaces.com/production/integration/floating-button.min.js"></script>

Чтобы инициализировать кнопку, вам нужно вызвать этот код с помощью токена, элемента и кода поставщика или запроса статьи:

const floatingButton = new window.WFloatingButton({
  token: "your token for wizart",
  element: "link to the element to insert the entry point button", // example document.getElementById("0000")
  vendorCode: "vendor code for first apply",
  articleQuery: Json.stringify({
    vendor_code: 'vendor code for first apply',
    collection_name: '',
  }),
});

Элемент articleQuery имеет приоритет над элементом vendorCode .

Чтобы отобразить кнопку, нужно вызвать метод рендеринга.

floatingButton.render();

В метод рендеринга можно передать следующие параметры:

  fontSize,
  title,
  tooltipTitle,
  tooltipPosition,
  tooltipDisable,
  glitterDisable,
  className,
  borderRadius,
  parameters,
  background,
  color,
  width,
  height,
  border,
  image,
  compact,
  tutorial,
  tutorialDelay,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  iframeElementSelector,
  insertIframeElementPosition,
  onAddShoppigCartItem, // the function is called on the event of adding an article to the cart
  onRemoveShoppingCartItem, // the function is called on the event of deleting an article to the cart

const onAddShoppigCartItem = (payload) => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code' }};
}

const onRemoveShoppingCartItem = () => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code', removeAll: true }};
}

Метод set можно использовать для установки vendorCode или articleQuery.

floatingButton.set({ vendorCode: '' });
floatingButton.set({ articleQuery: Json.stringify({ vendor_code: '' })});

Метод setShoppingCartStore позволяет установить текущее состояние корзины покупок.

  floatingButton.setShoppingCartStore(payload);
  // payload format [{vendor_code: 'vendor_code', quantity: 1 }, ...]

Floating button

Первый вариант интеграции

Второй вариант интеграции: