...
There are 2 possible ways of implementation to synchronize all items in the visualizer shopping cart and your Magento website cart: transferring product items from the visualizer shopping cart to your website shopping cart; and transferring product items from your website shopping cart to the visualizer shopping cart. This is the way you can ensure 2-way shopping cart synchronization.
Transferring items from Magento cart to the visualizer cart
In this case, you have to develop Magento js component and add it to all pages with the Wizart Visualizer. Please check the example below:
...
| Info |
|---|
Check more details about this functionality here. |
When the visualizer is launched, you have to sync all product items in your Magento cart with the product items in the visualizer cart.
| Code Block | ||
|---|---|---|
| ||
define([
'jquery',
'Magento_Customer/js/customer-data'
], function ($, customerData) {
'use strict';
return function (config) {
//magento the cart object
const cartData = customerData.get('cart');
/**
* Updating wizart shopping cart every time when the fitting room is oppened.
*/
window.addEventListener('message', function (event) {
if (
event.data
&& event.data.eventName === 'wizart_analytics' //base name of all wizart events
&& event.data.analyticsEventName === 'wizart_session_start' //exact name of triggered event (gallery_open, apply, etc.)
) {
updateFittingRoomCart(cartData);
}
});
/**
* The method obtain items from magento shopping cart and add them into wizart shopping cart.
*/
function updateFittingRoomCart (cartData) {
//wizart fitting room object
const wizartFittingRoom = window.wizartDK;
if (cartData().items && cartData().items.length !== 0) {
let payload = [];
cartData().items.forEach(function (item, i, arr) {
payload.push({
vendor_code: item.product_sku, // type string,
quantity: item.qty, // type number,
});
});
wizartFittingRoom.setShoppingCartStore(payload);//add items into the cart
}
}
};
});
|
Transferring items from the visualizer cart to Magento cart
In this case, you have to develop Magento js component and add it to all pages with the Wizart Visualizer. Please check the example below:
...
Next, you need to write code to handle two actions in the visualizer: add an item to the shopping cart and remove an item from the shopping cart.
Adding an item to Magento cart from the visualizer
| Info |
|---|
Check more details about this functionality here. |
When a customer adds an item to shopping cart in the visualizer, you need to catch this event and add the item to Magento cart too.
| Code Block | ||
|---|---|---|
| ||
define([
'jquery',
'Magento_Customer/js/customer-data'
], function ($, customerData) {
'use strict';
return function (config) {
//magento the cart object
const cartData = customerData.get('cart');
/**
* Subscription to the event of adding product to the shopping cart
*/
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'addShoppigCartItem') {
console.log(event.data.payload.item.sku); //the sku of item
// Here can be a code to add the item into magento cart
updateFittingRoomCart(cartData);
}
}, false)
/**
* The method obtain items from magento shopping cart and add them into wizart shopping cart.
*/
function updateFittingRoomCart (cartData) {
//wizart fitting room object
const wizartFittingRoom = window.wizartDK;
if (cartData().items && cartData().items.length !== 0) {
let payload = [];
cartData().items.forEach(function (item, i, arr) {
payload.push({
vendor_code: item.product_sku, // type string,
quantity: item.qty, // type number,
});
});
wizartFittingRoom.setShoppingCartStore(payload);//add items into the cart
}
}
};
});
|
Removing an item from Magento cart
| Info |
|---|
Check more details about this functionality here. |
When a customer removes an item from the visualizer cart, you have to catch this event and remove the item from Magento cart correspondingly.
...