Two-way Favorites synchronization

1 1. Identifying the list of products in the favorites.
2 2. Obtain list of products from the favorites
3 3. Add a product to the favorites
4 4. Removing a product from the favorites
5 Example

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

Favorites 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 favorites.

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

wizart-fitting-room-object - is the iframe ID. You can see this ID here or in inspector.

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);

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.

wizartFittingRoom is iframe’s name.

2. Obtain list of products from the favorites

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

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

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.

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>