Versions Compared

Old Version 21

changes.mady.by.user Andrey Gerasimchuk (Deactivated)

Saved on

compared with

New Version 22

changes.mady.by.user Andrey Gerasimchuk (Deactivated)

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-files.fra1.cdn.digitaloceanspaces.com/production/integration/entry-point.min.js"></script>

...

  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:

Tip

For successful integration of this button, you need include library to you website in the header.

Code Block
languagejs
<script type="application/javascript" src="https://wizart-files.fra1.cdn.digitaloceanspaces.com/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 wendow.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.

Tip

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

Code Block
languagejs
entryPoint.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,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  elementSelector,
  insertElementPosition,
  iframeElementSelector,
  insertIframeElementPosition,

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