Two-way shopping cart synchronization

To activate two-way shopping cart synchronization you need to set the parameter enable_two_way_shopping_cart=1.

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.

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

   // first option
   window.frames.wizartFittingRoom.onload = (() => {
     window.frames.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') {
       window.frames.wizartFittingRoom.postMessage({
       eventName: 'setShoppingCartStore',
       payload: [
         {
           vendor_code: 'vendor_code', // type string,
           quantity: 1, // type number,
         },
       ],
       }, '*');
     }
   }, false);

2. 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:
   

   window.frames.wizartFittingRoom.onload = (() => {
       // Calling the event of getting the list of products from the shopping cart.
       window.frames.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
     }],
   }

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

4. 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
     },
   }