JS Events
Listen to any action made on Smootify elements
Global Events
Below all usefull events that you can listen up on the document element
API Loaded
This event get's dispatched on the document after all Smootify modules have been loaded.
document.addEventListener('smootify:loaded', () => {
console.log("Smootify APIs are available")
})User Auth Change
This event get's dispatched on the document on login status change and on page load to notify if an user is effectively logged in or not
document.addEventListener('smootify:user_auth_change', (event) => {
const customer = event.detail;
if (customer) {
// Do something with the customer object
} else {
// If you want to redirect here
}
})Cart Updated
This event get's dispatched on the document on any cart changes (also on the cart first load)
document.addEventListener('smootify:cart_updated', (event) => {
const cart = event.detail;
// Send cart analytics or open a popup or modify the free shipping bar... Just ideas :)
})Added to Cart
This event get's dispatched on the document on any add to cart event
document.addEventListener('smootify:added_to_cart', (event) => {
const {lines, cart, goToCheckout} = event.detail;
// Do something with the payload
})Removed from Cart
This event get's dispatched on the document on any product removed from the cart
document.addEventListener('smootify:removed_from_cart', (event) => {
// lineIds is an array of elements removed from the cart
const lineIds = event.detail;
})Product Loaded
This event get's dispatched on the document for each Product Loaded from the API
document.addEventListener('smootify:product_loaded', (event) => {
const {id, product} = event.detail
// Do something with the product
})Images Module Loaded
This event get's dispatched on the document every time after the Images JS module get's loaded. Module loaded doesn't ensure all images have been loaded
document.addEventListener('smootify:productImagesModuleLoaded', () => {
})
Addon State Changed
This event get's dispatched on the document if you have an add to cart with Magic Addons every time an add-on get's added or removed
document.addEventListener('addon:state_change', (event) => {
const {wrapper, product, variant, included} = event.detail
// Do something (E.G -> if the addon is included show up a property input)
})Product Custom Element Events
Below you can instead find all the events that are dispatched only on the Smootify Product Custom Element
Variant Change
This event get's dispatched each time a new Variant has been selected
const productWrapper = document.querySelector('smootify-product'); // First product wrapper element of the document
productWrapper.addEventListener('changeVariant', (event) => {
const variant = event.detail
// Do something with the variant
})Plan Change
This event get's dispatched each time the Variant plan changed
const productWrapper = document.querySelector('smootify-product'); // First product wrapper element of the document
productWrapper.addEventListener('changePlan', (event) => {
const {plan, variant} = event.detail
// Do something with the variant and the plan
// plan will be null if the subscription option has been deselected
})Product Variant Custom Element Events
Below you can instead find all the events that are dispatched by the Variant Custom Element
Variants Rendered
This event get's dispatched each time the Variants get rendered
document.body.addEventListener('variantsRendered', (event) => {
// Do something after variants have been rendered
})