...
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 = 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> |
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 = WizartDeploymentKit.createVisualizer({
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.WizartEventsetShoppingCartState(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> |
...