...
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)
...
Put a link to the shopping cart from your website
Add integration code
| Code Block |
|---|
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = WizartDeploymentKit.createVisualizer({
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> |
...