Often when Visualizer When integrating on the Visualizer in full-screen mode, especially on mobile devices it is required , it’s essential to ensure that end clients are comfortable with adding end users can comfortably add products to their shopping cart. For that cases The Visualizer has provides shopping cart functionality . And provide with two options for syncing items between Visualizer shopping cart and your website shopping cart.synchronization options:
1. One way sync.
End users have out of the box functionality for working with Visualizer shopping cart, but you don’t have ability to push products to Visualizer app outside of it. For example put them from your shopping cart before open Visualizer.
Each time when user adds or remove item to the Visualizer shopping cart application will push event which you can subscribe and manage products in your website shopping cart.
-Way Sync
In this setup:
End users interact with the Visualizer’s shopping cart directly.
You cannot pre-populate the Visualizer cart with products from your website.
Whenever users add or remove items from the Visualizer cart, events are triggered, allowing you to synchronize these changes with your website’s cart.
Steps to enable the one-way shopping cart sync
To enable the shopping cart functionality in your PIM account (Configuration → Web)
Turn on shopping cart and one-way sync.
...
Add integration code
| Code Block |
|---|
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container'),
});
visualizer.load().then(() => {
visualizer.show();
// WhenSubscribe productto added"add to Visualizer shopping cart" events
const addToCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/** Your code put item to your shopping cart here */
},
WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
visualizer
);
// When product removed from Visualizer shopping cart
const removeCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
//** Your code remove Add item fromto your shoppingwebsite cart here
*/ },
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVEADD_FROMTO_CART,
visualizer
);
// WhenSubscribe shoppingto cart"remove productfrom countcart" increasedevents
const incrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/** Your code put item to your shopping cart here */
},
WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_COUNT_INCREASE,
visualizer
);
// When shopping cart product count decreased
const decrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
//** YourRemove code remove item from your shoppingwebsite cart
here */ },
WizartDeploymentKit.VISUALIZER_EVENTS.CARTREMOVE_PRODUCTFROM_CART_DECREASE,
visualizer
);
});
});
</script> |
Add shopping cart link.
When user clicks Proceed to checkout button in Visualizer it will redirect a user to your shopping cart save state between sessions. That means that when end user reloads page he will have the same shopping cart state as before.2.Two way sync
The end user has almost the same functionality but shopping cart state management is happens completely on your side.
Lets see in examplecart URL.
| Code Block |
|---|
https://example.com/cart?vendorCode[]=wallpaper_1&quantity[]=2&vendorCode[]=wallpaper_2&quantity[]=1 |
Note: The Visualizer saves the cart state between sessions, so the cart will retain its contents after a page reload.
2. Two-Way Sync
In this setup:
The Visualizer’s cart state is fully managed by your website.
You can pre-load the Visualizer cart with products already in your website cart.
Changes in either cart must be synchronized by pushing updates between your website and the Visualizer.
Turn on shopping cart and two-way sync
...
Add integration code.
| Code Block |
|---|
<script>
// anyExample optioninitial towebsite receivecart state
of your website shopping cart
const yourShoppingCartState = [{
{ vendor_code: 'Wallpaper _01 2d',
quantity: 1 }
}];
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container'),
});
visualizer.load().then(() => {
// Set initial Visualizer shopping cart state
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
);
.setShoppingCartState(yourShoppingCartState);
visualizer.show();
WizartDeploymentKit.EventBus.subscribe(
const addToCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* modifyModify your shopping cart state */
// then update state of visualizer
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
visualizer
);
// When product removed from Visualizer shopping cart
WizartDeploymentKit.EventBus.subscribe(
const removeCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* modifyModify your shopping cart state */
// then update state of visualizer
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
visualizer
);
// When shopping cart product count increased
WizartDeploymentKit.EventBus.subscribe(
const incrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* modifyModify your shopping cart state */
// then update state of visualizer
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_COUNT_INCREASE,
visualizer
);
WizartDeploymentKit.EventBus.subscribe(
// When shopping cart product count decreased const decrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* modifyModify your shopping cart state */
//
then update state of visualizer WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_CART_DECREASE,
visualizer
);
});
});
</script>
|
Key Notes
One-Way Sync: Easier to implement but less flexible (no pre-loading products).
Two-Way Sync: More control but requires active state management.
Always ensure event handling and synchronization logic are optimized for real-time updates.