Page Comparison

To activate two-way Favorites synchronization you need to set the parameter enable_two_way_favorites=1 in integration.

If you activate two-way Favorites synchronization, all management of Favorites functionality will be done on your side. Since iframe tag is used to integrate web-visualizer on your website, the interaction between web-visualizer and the website is implemented via the Favorites synchronization process works on the basis of method window.postMessage . If .

Web Visualizer calls method window.postMessage if any action is being done with selected products, web-visualizer calls the method window.postMessage with certain parameters to be processed and after that WEB visualizer should be reported about the current status of the list of selected products. When the visualizer opens, you must send the current status of the Favorites section to the web-visualizer to synchronize selected products by calling the event window.postMessage described below:taken in or with regard to the favorites.

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

1. Identifying the list of products in the favorites.

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: 'setFavoritesStore',
    payload: ['vendor_code_1', 'vendor_code_2'],
  }, '*');
});

or 
// second option
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'iframeLoaded') {
    window.frames.wizartFittingRoom.postMessage({
      eventName: 'setFavoritesStore',
      payload: ['vendor_code_1', 'vendor_code_2'],
    }, '*');
  }
}, false);

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

You should send list of vendor codes (or Unique SKU ID-es) within payload. Note:

2. Obtain list of products from the favorites

Anchor
obtain-list-of-products obtain-list-of-products

If you need to synchronize all selected products from the Favorites in the current moment, you should call event window.postMessage with the name: getFavoritesStore.

window.frames.wizartFittingRoom.onload = (() => {
    // Calling the event of getting the list of products from the favorites.
    window.frames.wizartFittingRoom.postMessage({
      eventName: 'getFavoritesStore'
    }, '*');
});

Web-visualizer replies on the request getFavoritesStore by calling the event window.postMessage with the name: getFavorites.

// Subscription to the event to get favorites
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'getFavorites') {
    // Event handling
  }
}, false);

Data format:
event.data = {
  eventName: 'getFavorites',
  payload: { 
    list: ['vendor_code_1', 'vendor_code_2'],
    },
  },
}

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

3. Add a product to the favorites

Anchor
obtain-list-of-products obtain-list-of-products

If any product is added to the Favorites, the web-visualizer calls event window.postMessage with the name: addFavorite.

// Subscription to the event of adding product to the fovarites
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'addFavorite') {
    // Event handling
  }
}, false);

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

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

Once you have processed the event addFavorite on your side, you need to send the current status of Favorites to the web-visualizer by calling the event setFavoritesStore described above.

4. Removing a product from the favorites

Anchor
removing-product removing-product

If any product is removed from the Favorites, the web-visualizer calls event window.postMessage with the name: removeFavorite.

// Subscription to the event of delete product
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'removeFavorite') {
    // Event handling
  }
}, false);

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

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

Once you have processed the event removeFavorite on your side, you need to send the current status of Favorites to the web-visualizer by calling the event setFavoritesStore described above. If you need to synchronize all selected products from the Favorites in the current moment, you should call event window.postMessage with the name: getFavoritesStore.

Example

Simple example:

window.frames.wizartFittingRoom.onload = ((<script>
  const items = [];
  
  window.addEventListener('message', (event) => {
    // Calling the event of getting the list of products from the shopping cart.if (event.data && event.data.eventName === 'iframeLoaded') {
      window.frames.wizartFittingRoom.postMessage({
          eventName: 'getFavoritesStoresetFavoritesStore',
          payload: items,
      }, '*');
    });

Web-visualizer replies on the request getFavoritesStore by calling the event window.postMessage with the name: getFavorites.

// Subscription to the event to get favorites
window.addEventListener('message', (event) => {
   else if (event.data && event.data.eventName === 'addFavorite') {
      items.push(event.data.payload.item.vendor_code);
      window.frames.wizartFittingRoom.postMessage({
          eventName: 'setFavoritesStore',
          payload: items,
      }, '*');
    } else if (event.data && event.data.eventName === 'getFavoritesremoveFavorite') {
      const foundIndex = items.findIndex(
   // Event handling   } }, false(item); => Data format:item === event.data.payload.item.vendor_code,
      );
      if (foundIndex !== -1) {
        items.splice(foundIndex, 1);
        window.frames.wizartFittingRoom.postMessage({
            eventName: 'getFavoritessetFavoritesStore',
            payload: items,
  {       list: ['vendor_code_1', 'vendor_code_2'], },
          '*',
        },);
      }
    }
  }, }false);
</script>