Page Comparison

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

При двусторонней синхронизации избранных артикулов управление избранным полностью передается на вашу сторону. Так как интеграция ВЕБ-визуализатора в сайт происходит с помощью тега iframe, то общение между ВЕБ-визуализатором и сайтом происходит с помощью метода window.postMessage .  При каком либо действии с избранными артикулами ВЕБ-визуализатор вызывает метод window.postMessage с определенными параметрами которое необходимо обработать и после этого сообщить ВЕБ-визуализатору текущее состояние списка избранных артикулов.

При открытии визуализатора необходимо сообщить текущее состояние избранного ВЕБ-визуализатору для синхронизации избранных артикулов. Для это необходимо вызвать событие window.postMessage описанное ниже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.

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

где в payload необходимо передать массив vendor кодов и wizartFittingRoom это iframe’s name.

...

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.

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

После того как выполните на своей стороне действия по обработке события addFavorite необходимо сообщить ВЕБ-визуализатору текущее состояние избранного вызвав событие setFavoritesStore описанное выше.

При удалении артикула из избранного ВЕБ-визуализатор вызывает событие window.postMessage с 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
    },
  },
}

После того как выполните на своей стороне действия по обработке события removeFavorite необходимо сообщить ВЕБ-визуализатору текущее состояние избранного вызвав событие setFavoritesStore описанное выше.

...

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:

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: 'getFavoritesStore'setFavoritesStore',
          payload: items,
      }, '*');
    });

В ответ на запрос getFavoritesStore ВЕБ-визуализатор вызывает событие window.postMessage с 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>