Versions Compared

Old Version 26

changes.mady.by.user Nikolay Motaev (Deactivated)

Saved on

compared with

New Version Current

changes.mady.by.user Ekaterina Slesarchik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

-First integration option:

Tip

For successful integration of this button, you need to add several lines of JS-code to the place, where you would like to display the button. The minimum amount of integration code is:

Code Block
languagejs
<script class="wizart__entry-point" data-token="token" src="https://wizart-filesd35so7k19vd0fx.fra1.cdn.digitaloceanspaces.comcloudfront.net/production/integration/entry-point.min.js"></script>

...

Code Block
languagehtml
<script
  class="wizart__entry-point"
  data-token="token"
  data-title=""
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-image=""
  data-color=""
  data-background=""
  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-onload-callback=""
  data-on-close-callback=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
  src="https://wizart-filesd35so7k19vd0fx.fra1.cdn.digitaloceanspaces.comcloudfront.net/production/integration/entry-point.min.js"
></script>

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!").

Optional

data-vendor_code

Unique SKU ID of the product uploaded to Wizart system.

Optional

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 functionJSON.stringify();.

Optional

data-color

Button text color.

Optional

data-background

Button background.

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

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

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

Additional parameters for “data-parameters” attribute

Anchor
additional-parameters
additional-parameters

Parameters

Type

Description

user_id

string

User identifier or Device identifier

context

array

main_page_link

string

Link added to your clickable logo.

open_first_room

bool 1/0

Skipping step a room selection and open any first room

room_uuid

string

The room with the selected uuid will be opened

deactivate_custom_photo

bool 1/0

For deactivating uploading photo.

Two-way shopping cart synchronization:

Anchor
two-way-sync
two-way-sync

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

  1. Setting the current state of items in the shopping cart – setShoppingCartStore. To transfer the current state of the shopping cart to the visualizer, call the method

    Code Block
    languagejs
    const payload = [{vendor_code: 'vendor_code1', quantity: 1 }];
window.wizartDK.setShoppingCartStore(payload);

    The method is available after opening the visualizer.

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

    Code Block
    languagejs
    const callback = () => {
  console.log(payload);
  // [{vendor_code: 'vendor_code1', quantity: 1}, ...]
}

window.wizartDK.getShoppingCartStore(callback);

  3. Removing an items 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.

    Code Block
    languagejs
    const callback = () => {
  console.log(payload);
  // {  vendor_code: 'vendor_code', removeAll: true }
}

window.wizartDK.onRemoveShoppingCartItem(callback);

  4. Adding an item to the shopping cart – onAddShoppigCartItem. To add a product, you need to call the onAddShoppigCartItem function with a parameter { vendor_code: 'vendor_code' } . The method is available after opening the visualizer.

    Code Block
    window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

Second integration option:

...

Code Block
languagejs
<script type="application/javascript" src="https://wizart-filesd35so7k19vd0fx.fra1.cdn.digitaloceanspaces.comcloudfront.net/production/integration/entry-point.min.js"></script>

...

Code Block
languagejs
const entryPoint = new window.WEntryPoint({
  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: '',
  }),
});

Parameter

Description

Type

token

api token - generated and issued by Wizart Administrator.

Required

element

link to the element to insert the entry point button (e.g
document.getElementsByTagName("")[0])

Optional

vendorCode

Unique SKU ID of the product uploaded to Wizart system.

Optional

articleQuery

vendor_code (unique SKU ID of the product uploaded to Wizart system)
collection_name (name of collection)

Optional

Info

Element articleQuery takes precedence over element vendorCode.

...