Page Comparison

...

Entry point button maintains the following parameters:

Code Block

language	html

<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-files.fra1.cdn.digitaloceanspaces.com/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 function`JSON.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

...

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

Code Block

language	js

const entryPoint = new wendowwindow.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: '',
  }),
});

Info
Element `articleQuery` takes precedence over element `vendorCode`.

...

Code Block

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

language	js

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

language	js

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

Info
The `setShoppingCartStore` method allows you to set the current state of the shopping cart.

Code Block

language	js

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

Versions Compared

Old Version 22

New Version 23

Key