Two-way Favorites synchronization

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

// 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 should send list of vendor codes (or Unique SKU ID-es) within payload. Note: wizartFittingRoom is iframe’s name.

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

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.

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

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.

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'],
    },
  },
}

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>