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 -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.
| Code Block |
|---|
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = WizartDeploymentKit.createVisualizer({
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> |
Note: The Visualizer shopping saves the cart save state between sessions. That means that when end user reloads page he will have the same shopping cart state as before, 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.
| 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 = WizartDeploymentKit.createVisualizer({
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(
Synchronize cart changes
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
);
visualizer.show();
const addToCartSubscrId = WizartDeploymentKit.EventBus.subscribe((eventconst updateCartState = () => {
/* modify your shopping cart state */ // then update state of visualizer
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
);
},
WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
visualizer
);
// WhenSet product removed from Visualizer shopping initial cart state
const removeCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
updateCartState();
/* modify your shopping cart state */
// then update state of visualizer
WizartDeploymentKit.EventBus.pushEvent(
visualizer,
new WizartDeploymentKit.WizartEvent(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
).show();
},
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,WizartDeploymentKit.EventBus.subscribe(
visualizer
);
// When shopping cart product count increased
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
)
updateCartState();
);
},
WizartDeploymentKit.VISUALIZER_EVENTS.CARTADD_PRODUCTTO_COUNT_INCREASECART,
visualizer
);
// When shopping cart product count decreasedWizartDeploymentKit.EventBus.subscribe(
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
)updateCartState();
);
},
WizartDeploymentKit.VISUALIZER_EVENTS.CARTREMOVE_PRODUCTFROM_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.