Versions Compared

Old Version 25

changes.mady.by.user Ekaterina Gurina (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>
Tip

To initialize the button, you need to call this code with a token, element and vendor code or article query:

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.

Tip

To display the button, you need to call the render method.

Code Block
languagejs
entryPoint.render();

...

Code Block
  fontSize,
  title,
  tooltipTitle,
  tooltipPosition,
  tooltipDisable,
  glitterDisable,
  className,
  borderRadius,
  parameters,
  background,
  color,
  width,
  height,
  border,
  image,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  elementSelector,
  insertElementPosition,
  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
Info

Description of this parameters you can find in the block of first integration.

Info

Parameters should write following this structure:
entryPoint.render({fontSize: '12px', title:'Custom title'});

Code Block
languagejs

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

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

...