...
To enable the shopping cart functionality in your PIM account (Configuration → Web)
...
Put a link to the shopping cart from your website
...
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 changesstate
const updateCartState = () => {visualizer.setShoppingCartState(yourShoppingCartState);
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 state visualizer
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> |
...