Contents:
Overview
This article details how to add the appropriate code to your webpage to ensure add to cart functionality works with your Smartzer project or playlist.
Recommended Method
The easiest way to add add-to-cart integration to your site is to add our SDK to your page. This requires adding the following script to your site:
https://scripts.smartzer.com/sdk/latest/embed.js
The SDK will then expose an event for handling the add to cart, along with 2 callback events you can use to notify the player that the add-to-cart was successful or failed.
Please note: the add to cart process is purely client side, and no customer information is sent to Smartzer. All network calls required for actually adding items to customer carts must be handled on your side
The event of smrtzr:broadcast:callToAction trigger whenever a user clicks an “add to bag” button within the Smartzer player, and will send through the CTA value of the button. This value should then be used to trigger your native add-to-cart function, calling the same action that would be triggered if they were to click one of your own “add to cart” buttons.
If you want to notify the player (and you are using the awaitInlineConfirmation setting from the share area) then you can dispatch the following 2 events respectively, sending back the event details you received (event.detail in the code example below):
smrtzr:trigger:callToActionSuccess
smrtzr:trigger:callToActionFail
Please see below for a full example (you will need to replace “yourCustomAddToCartFunction” with the call to your internal function)
document.addEventListener('smrtzr:broadcast:callToAction', (event) => {
const success = yourCustomAddToCartFunction(event.detail)
if (success) {
document.dispatchEvent(
new CustomEvent('smrtzr:trigger:callToActionSuccess', {
detail: event.detail,
})
);
} else {
document.dispatchEvent(
new CustomEvent('smrtzr:trigger:callToActionFail', {
detail: event.detail,
})
);
}
});
Alternative (iframe only)
For an alternative way for add to cart to work via iFrame, ensure the following PostMessage is present on the page that the Smartzer player is embedded on, replacing 'YourCustomAddToCartFunction' with whatever code you need and use the value of 'msg.data.cta' as the SKU:
if (!window.smrtzrPostMessage) {
window.smrtzrPostMessage = true;
window.addEventListener('message', (msg) => {
if (msg.data.event_type === 'smrtzr_cta') {
// handle custom add to cart code here
yourCustomAddToCartFunction(msg.data.cta);
}
});
}
If you would like add to cart confirmation to show in the player, you will need to use the SDK method for add to cart.