First integration option

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:

...

Floating button maintains the following parameters:

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

...

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
   language js
   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
   language js
   const callback = () => { console.log(payload); // [{vendor_code: 'vendor_code1', quantity: 1}, ...] } window.wizartDK.getShoppingCartStore(callback);

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

   Code Block
   language js
   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:

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

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

floatingButton.render();

The following parameters can be passed to the render method:

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

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

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

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

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