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:

• Old Customer Object
• New Customer Object

Danger

If the customer is not logged in it will throw up an error, so handle it in your custom code

    // 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

Danger

We are not responsible of a not compliant analytics tracks on your website. You have to enable analytics only previous explicit 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');

Change Market Language

It allows to change up the market language, usefull if you want to use some ip localization or select the market language manually

    // Typescript interface
    // Smootify.changeMarketLanguage(languageCode: string): Promise<void>

         Smootify.changeMarketLanguage('IT');

Add to Cart

It allows to add lines to the cart and refresh the cart render automatically, you can also optionally redirect directly to the Checkout

    // Typescript interface
    // Smootify.addToCart(lines: CartLineInput[], goToCheckout?: boolean): Promise<Cart>

    // /** The input fields to create a merchandise line on a cart. */
    // export type CartLineInput = {
    //   /** An array of key-value pairs that contains additional information about the merchandise line. */
    //   attributes?: InputMaybe<Array<AttributeInput>>;
    //   /** The ID of the merchandise that the buyer intends to purchase. */
    //   merchandiseId: Scalars['ID'];
    //   /** The quantity of the merchandise. */
    //   quantity?: InputMaybe<Scalars['Int']>;
    //   /** The ID of the selling plan that the merchandise is being purchased with. */
    //   sellingPlanId?: InputMaybe<Scalars['ID']>;
    // };

    const productsToAdd = [{
        attributes: [{
            key: "Attribute Key",
            value: "Attribute value"
        }],
        quantity: 1,
        merchandiseId: "gid://shopify/ProductVariant/123123123"
    }]

     Smootify.addToCart(productsToAdd);

Get Cart ID

It allows to get the current cart ID, usefull if you want to directly mutate the cart state using your own queries

    // Typescript interface
    // Smootify.getCartID(): Promise<string>

     Smootify.getCartID();

Reload Cart

It allows to re-render the cart, usefull if you modified the cart state using your own queries

    // Typescript interface
    // Smootify.reloadCart(): Promise<Cart>

     Smootify.reloadCart();

Add Box to Cart

This function allows you to add a group of products as a box (It requires Magic Box checkout function enabled in your Shopify store).

    // Typescript interface
    // Smootify.addBoxToCart(lines: CartLineInput[], boxOptions?: {title?: string, image?: string}, goToCheckout?: boolean): Promise<Cart>

    // /** The input fields to create a merchandise line on a cart. */
    // export type CartLineInput = {
    //   /** An array of key-value pairs that contains additional information about the merchandise line. */
    //   attributes?: InputMaybe<Array<AttributeInput>>;
    //   /** The ID of the merchandise that the buyer intends to purchase. */
    //   merchandiseId: Scalars['ID'];
    //   /** The quantity of the merchandise. */
    //   quantity?: InputMaybe<Scalars['Int']>;
    //   /** The ID of the selling plan that the merchandise is being purchased with. */
    //   sellingPlanId?: InputMaybe<Scalars['ID']>;
    // };

        const productsToAdd = [{
        attributes: [{
            key: "Attribute Key",
            value: "Attribute value"
        }],
        quantity: 1,
        merchandiseId: "gid://shopify/ProductVariant/123123123"
    },
    {
        attributes: [{
            key: "Attribute Key",
            value: "Attribute value"
        }],
        quantity: 1,
        merchandiseId: "gid://shopify/ProductVariant/12312312312"
    }]

    const boxOptions = {
        title: "My Custom Box",
        image: "https://cdn.shopify.com/s/files/1/0563/0689/2909/files/image.webp" // The image must be hosted on Shopify CDN!
    }

     Smootify.addBoxToCart(productsToAdd, boxOptions);