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 . When a product is added or removed from the Favorites, web-visualizer calls the method window.postMessage with certain parameters. These parameters should be processed and the current status of the list of selected products should be sent to the web-visualizer. 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:.

Web Visualizer calls method window.postMessage if any action is 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: addFavorite getFavorites.

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

Data format:
event.data = {
  eventName: 'addFavoritegetFavorites',
  payload: { 
    itemlist: {
      ['vendor_code:_1', 'vendor_code_2'], // type string
    },
  },
}

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. 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 removed from added to the Favorites, the web-visualizer calls event window.postMessage with the name: removeFavorite addFavorite.

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

Data format:
event.data = {
  eventName: 'removeFavoriteaddFavorite',
  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 addFavorite 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.

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

...

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: getFavorites removeFavorite.

// Subscription to the event toof getdelete favoritesproduct
window.addEventListener('message', (event) => {
  if (event.data && event.data.eventName === 'getFavoritesremoveFavorite') {
    // Event handling
  }
}, false);

Data format:
event.data = {
  eventName: 'getFavoritesremoveFavorite',
  payload: { 
    list: ['item: {
      vendor_code_1',: 'vendor_code_2'], // 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.

Example

Simple example:

<script>
  const items = [];
  
  window.addEventListener('message', (event) => {
    if (event.data && event.data.eventName === 'iframeLoaded') {
      window.frames.wizartFittingRoom.postMessage({
          eventName: 'setFavoritesStore',
          payload: items,
      }, '*');
    } 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 === 'removeFavorite') {
      const foundIndex = items.findIndex(
          (item) => item === event.data.payload.item.vendor_code,
      );
      if (foundIndex !== -1) {
        items.splice(foundIndex, 1);
        window.frames.wizartFittingRoom.postMessage({
            eventName: 'setFavoritesStore',
            payload: items,
          },
          '*',
        );
      }
    }
  }, false);
</script>