Check general documentation about two-way shopping cart synchronization here.
Please note that our Magento plugin doesn’t include implementation of the two-way shopping cart synchronization, but this very functionality can be implemented by your tech team following the structure and characteristics of your shopping cart.
Please check some examples below with the ready-to-use scripts created for Magento to make the implementation process easier for you.
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:
<script type="text/x-magento-init">
{
"*": {
"your_module_name/js/wizart-cart": {}
}
}
</script>
Transferring items from Magento cart to Wizart
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.
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:
<script type="text/x-magento-init">
{
"*": {
"your_module_name/js/wizart-cart": {}
}
}
</script>
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
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.
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
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.
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 removing product to the shopping cart
*/
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'removeShoppigCartItem') {
console.log(event.data.payload.item.sku); //the sku of item
// Here can be a code to remove the item from 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
}
}
};
});