Extend Smootify with JS

JS Extensibility

Smootify JS Extensibility

Smootify is JS dev friendly! It exposes many Events and APIs that you can use to further customize and enrich your Webflow site and react to user actions!

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

Product Wrapper Events

Below you can instead find all the events that are dispatched only on the Smootify Product DOM 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

    })

APIs

Below you can find all methods exposed by Smootify to further enhance your Webflow project

The Smootify instance is exposed only after the APIs are loaded, so be sure to wrap all your code inside the API Loaded callback, e.g:

    document.addEventListener('smootify:loaded', () => {
        console.log("Smootify APIs are available")
        // Smootify object is now accessible
    })

Query

It allows you to access the whole storefront graphql api without thinking about any fetch call, tokens and all the rest

    // Typescript interface
    // Smootify.query<T>(query: string, variables = {}): Promise<T>

    const result = await Smootify.query(`{
        shop {
            id
        }
    }`);

    console.log(result.shop.id)

Query Customer

It allows you to query customer fields for the current logged in customer, it can automatically fetch either from the old or new customers account APIs based on if you are using passwordless login or not. This is not the full Customer Accounts Api but is limited to only query the Customer object, schemas below:

    // Typescript interface
    // Smootify.queryCustomer(fields: string): Promise<{customer: any}>

    try {
        const {customer} = await Smootify.queryCustomer(`
            id
            customField: metafield(namespace:"custom", key:"my_key") {
                value
            }
        `);

        console.log(customer.id, customer.customField)
    } catch(e) {
        console.log('Customer not logged in')
    }

Enable Analytics

It allows to enable analytics after getting user consent

    // Typescript interface
    // Smootify.enableAnalytics(userConsent: boolean): Promise<void>

    if (userGaveConsent) { // YOU HAVE TO ENSURE YOU HAVE CONSENT
         Smootify.enableAnalytics(true);
    }

Apply Coupon Code

It allows to apply a coupon code to the cart without user interaction, usefull if you want to add a specific coupon code based on your js interactions

    // Typescript interface
    // Smootify.applyCouponCode(couponCode: string): Promise<Cart | UserErrors[]>


         Smootify.applyCouponCode('welcome20');

Change Market By Country ISO Code

It allows to change up the market by an ISO code, usefull if you want to use some ip localization or select the market manually

    // Typescript interface
    // Smootify.changeCountryByIsoCode(isoCode: string): Promise<void>


         Smootify.changeCountryByIsoCode('IT');