Versions Compared

Old Version 17

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

Saved on

compared with

New Version 18

changes.mady.by.user Ekaterina Slesarchik

Saved on

Key

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

...

Shopping cart synchronization process works on the basis of method window.postMessage.

Web Visualizer calls method window.postMessage if any action is taken in or with regard to the shopping cart.

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

Info

wizart-fitting-room-object - is the iframe ID. You can see this ID here or in inspector.

...

Code Block
languagejs
// first option
const wizartFittingRoom = document.getElementById('wizart-fitting-room-object');
wizartFittingRoom.onload = (() => {
  wizartFittingRoom.postMessage({
    eventName: 'setShoppingCartStore',
    payload: [
      {
        vendor_code: 'vendor_code', // type string,
        quantity: 1, // type number,
      },
    ],
  }, '*');
});

or

// second option
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'iframeLoaded') {
    wizartFittingRoom.postMessage({
    eventName: 'setShoppingCartStore',
    payload: [
      {
        vendor_code: 'vendor_code', // type string,
        quantity: 1, // type number,
      },
    ],
    }, '*');
  }
}, false);

Next code should be write where code of floating button or entry point button is located.

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. Obtain list of products from the shopping cart
Anchor
obtain-list-of-products
obtain-list-of-products

...

Code Block
languagejs
const wizartFittingRoom = document.getElementById('wizart-fitting-room-object');
wizartFittingRoom.onload = (() => {
    // Calling the event of getting the list of products from the shopping cart.
    wizartFittingRoom.postMessage({
      eventName: 'getShoppingCartStore'
    }, '*');
});
  
// Subscription to the event of getting the list of products from the shopping cart.   
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'getShoppingCartStore') {
    // Event handling
  }
}, false)

Data format:
event.data = {
  eventName: 'getShoppingCartStore',
  payload: [{ 
    vendor_code: 'vendor_code', // type string
    quantity: 1, // type boolean
    sku: 'sku', // type string
  }],
}

Next code should be write where code of floating button or entry point button is located.

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. Changing the product quantity
Anchor
changing-product-quantity
changing-product-quantity

...

Code Block
languagejs
// Subscription to the event of adding product to the shopping cart
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'addShoppigCartItem') {
    // Event handling
  }
}, false)

Data format:
event.data = {
  eventName: 'addShoppigCartItem',
  payload: { 
    vendor_code: 'vendor_code', // type string
    sku: 'sku', // type string
  },
}

Next code should be write where code of floating button or entry point button is located.

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

4. Removing a product from the shopping cart
Anchor
removing-product
removing-product

...

Code Block
languagejs
// Subscription to the event of removing product to the shopping cart
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'removeShoppigCartItem') {
    // Event handling
  }
}, false)

Data format:
event.data = {
  eventName: 'removeShoppigCartItem',
  payload: { 
    vendor_code: 'vendor_code', // type string
    removeAll: true, // type boolean
    sku: 'sku', // type string
  },
}

Next code should be write where code of floating button or entry point button is located.

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