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 описанное ниже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 . 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:

window.frames.wizartFittingRoom.onload = (() => {
  window.frames.wizartFittingRoom.postMessage({
    eventName: 'setFavoritesStore',
    payload: ['vendor_code_1', 'vendor_code_2'],
  }, '*');
});

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

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

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

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

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

Если необходимо получить все артикулы находящиеся в избранном на текущий момент необходимо вызывать событие window.postMessage с 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 shopping cart.
    window.frames.wizartFittingRoom.postMessage({
      eventName: 'getFavoritesStore'
    }, '*');
});

В ответ на запрос 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'],
    },
  },
}

...