...
| Info |
|---|
wizart-fitting-room-object - is the iframe ID. You can see this ID here or in inspector. |
1. Identifying the list of products in the shopping cart.
| Anchor |
|---|
| identifying-list-of-products |
|---|
| identifying-list-of-products |
|---|
|
To identify the list of products in the shopping cart you need to call the method postMessage.
| Code Block |
|---|
|
// first option
const wizartFittingRoom = document.getElementById('wizart-fitting-room-object');
wizartFittingRoom.onload = (() => {
wizartFittingRoom.postMessage({
eventName: 'setShoppingCartStore',
payload: [
{
vendor_code: 'vendor_code', // type string,
quantity: 1, // type number,
},
],
}, '*');
});
or
// second option
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'iframeLoaded') {
wizartFittingRoom.postMessage({
eventName: 'setShoppingCartStore',
payload: [
{
vendor_code: 'vendor_code', // type string,
quantity: 1, // type number,
},
],
}, '*');
}
}, false); |
2. Obtain list of products from the shopping cart
| Anchor |
|---|
| obtain-list-of-products |
|---|
| obtain-list-of-products |
|---|
|
To get the list of products from the shopping cart you need to call the method postMessage getShoppingCartStore. Web Visualizer will catch this request for getting the list of products from the shopping cart and trigger the event getShoppingCartStore on its side.
Example:
| Code Block |
|---|
|
const wizartFittingRoom = document.getElementById('wizart-fitting-room-object');
wizartFittingRoom.onload = (() => {
// Calling the event of getting the list of products from the shopping cart.
wizartFittingRoom.postMessage({
eventName: 'getShoppingCartStore'
}, '*');
});
// Subscription to the event of getting the list of products from the shopping cart.
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'getShoppingCartStore') {
// Event handling
}
}, false)
Data format:
event.data = {
eventName: 'getShoppingCartStore',
payload: [{
vendor_code: 'vendor_code', // type string
quantity: 1, // type boolean
sku: 'sku', // type string
}],
} |
3. Changing the product quantity
| Anchor |
|---|
| changing-product-quantity |
|---|
| changing-product-quantity |
|---|
|
When a product is added to the shopping cart or its quantity is changed, the event addShoppigCartItem will be called.
| Code Block |
|---|
|
// Subscription to the event of adding product to the shopping cart
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'addShoppigCartItem') {
// Event handling
}
}, false)
Data format:
event.data = {
eventName: 'addShoppigCartItem',
payload: {
vendor_code: 'vendor_code', // type string
sku: 'sku', // type string
},
} |
4. Removing a product from the shopping cart
| Anchor |
|---|
| removing-product |
|---|
| removing-product |
|---|
|
When the product is removed from the shopping cart, event removeShoppigCartItem with parameters vendor_code and removeALL will called. removeAll - value “true” is used in the case when the product was totally removed from the shopping cart.
| Code Block |
|---|
|
// Subscription to the event of removing product to the shopping cart
window.addEventListener('message', (event) => {
if (event.data && event.data.eventName === 'removeShoppigCartItem') {
// Event handling
}
}, false)
Data format:
event.data = {
eventName: 'removeShoppigCartItem',
payload: {
vendor_code: 'vendor_code', // type string
removeAll: true, // type boolean
sku: 'sku', // type string
},
} |