JS Events

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
})

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
   
})

On this page