First integration option

...

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

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

Code Block

language	js

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

Floating button maintains the following parametersПлавающая кнопка поддерживает следующие параметры:

Code Block

language	html

<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>

optional

ParameterПараметр	DescriptionОписание	TypeТип
classкласс	Required parameterОбязательный параметр. `Cannot be changedНе может быть изменено` .	required обязательный
src	Link to Ссылка на js-file with integration codeфайл с кодом интеграции.	required
data-token	api token - generated and issued by Wizart Administrator.	required
data-title	Text to be displayed on the button (the default value is "Try it in your room in one click!").	обязательный
токен данных	токен api - генерируется и выдается администратором Wizart.	обязательный
заголовок данных	Текст, который будет работать на кнопке (значение по умолчанию - «в комнате в один клик!»).	по желанию
data-vendor_code	Unique Уникальный SKU ID of the product uploaded to Wizart system.optionalпродукта, загруженного в систему Wizart.	по желанию
data-article_query	Required in the case if parameter Обязателен в случае, если программа data-vendor_code is not enough for product search in the Wizart system. Parameter value should be a result of the functionнедостаточно для поиска товара в системе Wizart. Результат результата быть результатом функции `JSON.stringify ();` .	optional
data-background	Button background	optional
data-color	Button text color	optionalпо желанию
фон данных	Фон кнопки	по желанию
цвет данных	Цвет текста кнопки	по желанию
data-tooltip_-disable	If the value is “true”, the tooltip will not be displayed.	optionalЕсли значение равно «истина», всплывающая подсказка характер не будет.	по желанию
data-tooltip_-title	Text to be displayed on the tooltip (the default value is "See it in your room!").	optionalТекст, который будет во всплывающей подсказке (значение по умолчанию - «Смотри в его комнате!»).	по желанию
data-tooltip_-position	Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top)	optional
data-glitter_disable	If the value is true, glitter will not be displayed	optional
data-width	Max button width	optional
data-height	Button height	optional
data-border	Button border	optional
data-border_radius	Button border-radius	optional
data-image	Link to the icon that will be displayed on the button.	optional
data-class_name	Class to be set for the button element on the page	optional
data-compact	If the value is true, button will be displayed in the compact mode	optional
data-tutorial	If the value is true and data-compact is true, the button will be animated: from the compact to the full mode and then back to compact mode. Animation repeats only once.	optional
data-tutorial-delay	Period of time before the animation is activated. Available periods are 5, 10, 20 or 30 seconds. If this parameter is not set, the button will be animate immediately.	optional
data-parameters	Parameter value should be a result of the function `JSON.stringify();` . Additional parameters from the table below can be added to this attribute.	optional
data-onload-callback	The name of the function to be in the global scope. The function will be called when the visualizer is loaded.	Optional
data-on-close-callback	The name of the function to be in the global scope. The function will be called after the visualizer is closed.	Optional
data-element-selector	A CSS selector to select an element on the page to insert a button where you want.	Optional
data-insert-element-position	The insertion position of the element. Values: append, before, after. default value: append.	OptionalПоложение всплывающей подсказки по направлению к кнопке. Доступные значения: верхнее, правое, нижнее, левое (значение по умолчанию - верхнее).	по желанию
данные-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	A CSS selector to select an element on the page to insert the fitting room where you want.	Optional	data-insert-iframe-element-position	The insertion position of the element. Values: append, before, after. default value: append.	OptionalСелектор CSS для выбора элемента на странице и вставки примерочной в нужное место.	По желанию
данные-вставка-iframe-элемент-позиция	Позиция вставки элемента. Значения: добавить, до, после. значение по умолчанию: добавить.	По желанию

Additional parameters for “data-parameters” attribute

...

Two-way shopping cart synchronization:

When the visualizer is open, methods are added to the window.wizartDK to synchronize the shopping cart.

...

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

Установка текущего состояния товаров в корзине - setShoppingCartStore . Чтобы передать текущее состояние корзины покупок в визуализатор, вызовите метод
Code Block
language js
const payload = [{vendor_code: 'vendor_code1', quantity: 1 }]; window.wizartDK.setShoppingCartStore(payload);
The method is available after opening the visualizer.
Getting the current state of items in the shopping cart – getShoppingCartStore. To get the items in the shopping cart, call the getShoppingCartStore method with a callback function. The callback function will receive the items in the shopping cart. The method is available after opening the visualizerМетод доступен после открытия визуализатора.
Получение текущего состояния товаров в корзине - getShoppingCartStore . Чтобы получить товары в корзине, вызовите метод getShoppingCartStore с функцией обратного вызова. Функция обратного вызова получит товары из корзины. Метод доступен после открытия визуализатора.
Code Block
language js
const callback = () => { console.log(payload); // [{vendor_code: 'vendor_code1', quantity: 1}, ...] } window.wizartDK.getShoppingCartStore(callback);
Removing an item from the shopping cart – onRemoveShoppingCartItem. To get the goods when they are removed, you must call the onRemoveShoppingCartItem method with a callback function. The method is available after opening the visualizerУдаление товара из корзины - onRemoveShoppingCartItem . Чтобы получить товары при их удалении, необходимо вызвать метод onRemoveShoppingCartItem с функцией обратного вызова. Метод доступен после открытия визуализатора.
Code Block
language js
const callback = () => { console.log(payload); // { vendor_code: 'vendor_code', removeAll: true } } window.wizartDK.onRemoveShoppingCartItem(callback);
Adding an item to the shopping cart – onAddShoppigCartItem. To add a product, you need to call the onAddShoppigCartItem function with a parameter Добавление товара в корзину - onAddShoppigCartItem . Чтобы добавить товар, вам нужно вызвать функцию onAddShoppigCartItem с параметром {vendor_code: 'vendor_code'} . The method is available after opening the visualizerМетод доступен после открытия визуализатора.
Code Block
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

...

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

Tip
To get this button successfully integrate, you need to include the following library in the header of your websiteЧтобы эта кнопка успешно интегрировалась, вам необходимо включить следующую библиотеку в заголовок вашего сайта:

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

Tip
To initialize the button, you need to call this code with a token, element and vendor code or article queryЧтобы инициализировать кнопку, вам нужно вызвать этот код с помощью токена, элемента и кода поставщика или запроса статьи:

Code Block

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: '',
  }),
});

Info
Element `articleQuery` takes precedence over element Элемент `articleQuery` имеет приоритет над элементом `vendorCode` .

Tip
To display the button, you need to call the render methodЧтобы отобразить кнопку, нужно вызвать метод рендеринга.

Code Block
floatingButton.render();

The following parameters can be passed to the render methodВ метод рендеринга можно передать следующие параметры:

Code Block

  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

...

Code Block

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

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

Info
The set method can be used to set vendorCode or Метод set можно использовать для установки vendorCode или articleQuery.

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

Info
The `setShoppingCartStore` method allows you to set the current state of the shopping cartМетод `setShoppingCartStore` позволяет установить текущее состояние корзины покупок.

Code Block

language	js

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

Versions Compared

Old Version 25

New Version 26

Key

First integration option

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

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

Page Comparison

Versions Compared

Old Version 25

New Version 26

Key

First integration option

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

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