Page Comparison

...

You can activate the functionality via your PIM account from section called “Configuration“.

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

Веб-визуализатор вызывает метод 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.

1. Identifying the list of products in the shopping cart.

Anchor
identifying-list-of-products identifying-list-of-products

To identify the list of products in the shopping cart you need to call the method postMessage.

...

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

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

To get the list of products from the shopping cart you need to call the method postMessage getShoppingCartStore. Web Visualizer will catch this request for getting the list of products from the shopping cart and trigger the event getShoppingCartStore on its side.
Example:

...

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.

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

When a product is added to the shopping cart or its quantity is changed, the event addShoppigCartItem will be called.

//

...

 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.

window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

4. Removing a product from the shopping cart

Anchor
removing-product removing-product

When the product is removed from the shopping cart, event removeShoppigCartItem with parameters vendor_code and removeALL will called. removeAll - value “true” is used in the case when the product was totally removed from the shopping cart.

//

...

 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.

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

window.wizartDK.onRemoveShoppingCartItem(callback);

To set the current state of the shopping cart, please use the following methods:

1. Floating button;

2. Entry point button.

Example

<script>
  const items = [];
  const shoppingCartItems = [];

  window.addEventListener(
    'message',
    (event) => {
      if (event.data && event.data.eventName === 'addShoppigCartItem') {
        shoppingCartItems.push({ vendor_code: event.data.payload.item.vendor_code });
        window.postMessage(
          {
            eventName: 'setShoppingCartStore',
            payload: shoppingCartItems,
          },
          '*',
        );
      }
      if (event.data && event.data.eventName === 'removeShoppigCartItem') {
        // Event handling
        const foundIndex = shoppingCartItems.findIndex(
          (item) => item.vendor_code === event.data.payload.item.vendor_code,
        );
        console.log(foundIndex);
        if (foundIndex !== -1) {
          shoppingCartItems.splice(foundIndex, 1);
          window.postMessage(
            {
              eventName: 'setShoppingCartStore',
              payload: shoppingCartItems,
            },
            '*',
          );
        }
      }
    },
    false,
  );
</script>