APIs

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

Wait for Smootify

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

If you don't want to care about using callbacks and you are hosting your scripts elsewhere and not inline you can add a script with type smootify-load, it will be loaded after APIs are available. The type of the module will be set based on the data-type attribute you add to the script or will be set as application/js by default.

<script
  src="https://yourcdnurl.tld/yourscript.js"
  type="smootify-load"
  data-type="module"
></script>

Shopify Files

You can also upload js files to Shopify > Content > Files and use that as CDN if you need 😉

Query

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

Syntax

Smootify.query(query);
Smootify.query(query, variables);

Parameters

Prop	Type	Default
`query`	`string`	-
`variables?`	`Record<string,any>`	`{}`

Examples

Get Shop ID

const result = await Smootify.query(`{
    shop {
        id
    }
}`);
 
const shopID = 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:

Handle Errors

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

Syntax

Smootify.queryCustomer(fields);

Parameters

Prop	Type	Default
`fields`	`string`	-

Examples

Load a metafield after customer status loaded

document.addEventListener('smootify:user_auth_change', (event) => {
 
    const shopifyCustomer = event.detail;
    if (shopifyCustomer) {
        const {customer} = await Smootify.queryCustomer(`
        id
        customField: metafield(namespace:"custom", key:"my_key") {
            value
        }`);
        console.log(customer.id, customer.customField)
    } else {
        // If you want to redirect here
    }
 
})

On button click query metafield

document.getElementById('my-button').addEventListener('click', () => {
 
    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 or error with the query`, e);
    }
 
})

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

Syntax

Smootify.applyCouponCode(code);

Parameters

Prop	Type	Default
`couponCode`	`string`	-

Examples

Add coupon code on button click

document.getElementById("welcome-button").addEventListener("click", () => {
  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

Syntax

Smootify.changeCountryByIsoCode(isoCode);

Parameters

Prop	Type	Default
`isoCode`	`string`	-

Examples

Change Market to Italy on button click

document.getElementById("italy-button").addEventListener("click", () => {
  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

Syntax

Smootify.changeMarketLanguage(isoCode);

Parameters

Prop	Type	Default
`isoCode`	`string`	-

Examples

Change Language to Italian on button click

document.getElementById("italy-button").addEventListener("click", () => {
  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

Syntax

Smootify.addToCart(lines);
Smootify.addToCart(lines, true);

Parameters

Prop	Type	Default
`lines`	`CartLineInput[]`	-
`goToCheckout?`	`boolean`	`false`

Examples

On specific button click add an item to the cart

document.getElementById("product-card-button").addEventListener("click", () => {
  const productsToAdd = [
    {
      attributes: [
        {
          key: "Attribute Key",
          value: "Attribute value",
        },
      ],
      quantity: 1,
      merchandiseId: "gid://shopify/ProductVariant/1",
    },
  ];
 
  Smootify.addToCart(productsToAdd);
});

If inside cart there is a specific item add another one

document.addEventListener("smootify:cart_updated", (event) => {
  const cart = event.detail;
 
  const userAddedMyProduct = !!cart.nodes.find(
    (node) => node.merchandise.product.title == "My Product"
  );
 
  const userAddedMyOtherProduct = !!cart.nodes.find(
    (node) => node.merchandise.product.title == "My Other Product"
  );
 
  if (userAddedMyProduct && !userAddedMyOtherProduct) {
    const productsToAdd = [
      {
        attributes: [
          {
            key: "Attribute Key",
            value: "Attribute value",
          },
        ],
        quantity: 1,
        merchandiseId: "gid://shopify/ProductVariant/1",
      },
    ];
 
    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

Syntax

Smootify.getCartID();

Examples

Set a Cart Metafield

const cartId = await Smootify.getCartID();
 
await Smootify.query(
  `mutation cartMetafieldsSet($metafields: [CartMetafieldsSetInput!]!) {
  cartMetafieldsSet(metafields: $metafields) {
    metafields {
      id
      value
    }
    userErrors {
      field
      message
    }
  }
}`,
  {
    metafields: [
      {
        key: "<your-key>",
        ownerId: cartId,
        type: "<your-type>",
        value: "<your-value>",
      },
    ],
  }
);

Reload Cart

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

Syntax

Smootify.reloadCart();

Clear Cart

It allows to remove all items from the cart

Syntax

Smootify.clearCart();

Format Money

It formats a string (cents) or a number as a money string based on the Shopify format

Syntax

Smootify.formatMoney(cents);

Parameters

Prop	Type	Default
`cents`	`string \| number`	-

Examples

Set a text element as a formatted price

document.querySelector('.my-text').textContent = Smootify.formatMoney('100');

Add Box to Cart

This function allows you to add a group of products as a box.

It requires Magic Box Add-on enabled

Syntax

Smootify.addBoxToCart(lines);
Smootify.addBoxToCart(lines, boxOptions);
Smootify.addBoxToCart(lines, boxOptions, true);

Parameters

Prop	Type	Default
`lines`	`CartLineInput[]`	-
`boxOptions`	`BoxOptions`	-
`goToCheckout?`	`boolean`	`false`

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

On this page