Often when Visualizer integrating on the full screen especially on mobile devices it is required to ensure that end clients are comfortable with adding products to shopping cart. For that cases Visualizer has shopping cart functionality. And provide two options for syncing items between Visualizer shopping cart and your website shopping cart.
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 cart.
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = WizartDeploymentKit.createVisualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container'),
});
visualizer.load().then(() => {
visualizer.show();
// When product added to Visualizer shopping cart
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 item from your shopping cart here */
},
WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART,
visualizer
);
// When shopping cart product count increased
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) => {
/** Your code remove item from your shopping cart here */
},
WizartDeploymentKit.VISUALIZER_EVENTS.CART_PRODUCT_CART_DECREASE,
visualizer
);
});
});
</script>
Visualizer shopping cart save state between sessions. That means that when end user reloads page he will have the same shopping cart state as before.
2.Two way sync
The end user has almost the same functionality but shopping cart state management is happens completely on your side.
Lets see in example
<script>
// any option to receive 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(
WizartDeploymentKit.EVENTS.SET_SHOPPING_CART_STATE,
yourShoppingCartState
)
);
visualizer.show();
const addToCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* 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
);
// When product removed from Visualizer shopping cart
const removeCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* 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.REMOVE_FROM_CART,
visualizer
);
// When shopping cart product count increased
const incrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* 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.CART_PRODUCT_COUNT_INCREASE,
visualizer
);
// When shopping cart product count decreased
const decrCartSubscrId = WizartDeploymentKit.EventBus.subscribe((event) => {
/* 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.CART_PRODUCT_CART_DECREASE,
visualizer
);
});
});
</script>