...
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();
// Subscribe to "add to cart" events
WizartDeploymentKit.EventBus.subscribe(
(event) => {
// Add item to your website cart
},
WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART,
visualizer
);
// Subscribe to "remove from cart" events
WizartDeploymentKit.EventBus.subscribe(
(event) => {
// Remove item from your website cart
},
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
visualizer
);
});
});
</script> |
Add shopping cart link.
When user clicks Proceed to checkout button in Visualizer it will redirect a user to your shopping cart 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.
...
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>
// Example initial website cart state
const yourShoppingCartState = [
{ vendor_code: 'Wallpaper_01', quantity: 1 }
];
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container'),
});
visualizer.load().then(() => {
// Set Synchronizeinitial cart state
changes visualizer.setShoppingCartState(yourShoppingCartState);
const updateCartState = () => { visualizer.show();
WizartDeploymentKit.EventBus.pushEvent(
subscribe(
(event) => {
visualizer,
/* Modify your cart state */
new WizartDeploymentKitvisualizer.WizartEvent(setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.SETADD_SHOPPINGTO_CART_STATE,
,
visualizer
);
yourShoppingCartState WizartDeploymentKit.EventBus.subscribe(
(event) => {
/* Modify your cart state */
visualizer.setShoppingCartState(yourShoppingCartState);
};,
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
// Set initial cart statevisualizer
updateCartState();
visualizer.show();
WizartDeploymentKit.EventBus.subscribe(
(event) => {
/* Modify your cart state */
updateCartStatevisualizer.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.ADDCART_PRODUCT_TOCOUNT_CARTINCREASE,
visualizer
);
WizartDeploymentKit.EventBus.subscribe(
(event) => {
/* Modify your cart state */
updateCartStatevisualizer.setShoppingCartState(yourShoppingCartState);
},
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVECART_FROMPRODUCT_CART_DECREASE,
visualizer
);
});
});
</script> |
...