Seventh > Developer documentation

Here's a list of all the public events that you, as a developer, can hook into and run your own custom script or integrate a third-party app. We only use vanilla JS in our themes, so everything can be manipulated in any way.

Product events

krown:variant:change

Fires whenever a variant is selected (whether it's inside the product page, featured product card or the quick buy modal)

document.addEventListener('krown:variant:change', (event) => {
  // your code here
});

Returned data:

• variant: the selected variant object
• productForm: the product's form

Cart events

krown:cart:add

Fires when a product (variant) has been added to the cart. This event fires even if the item is already in the cart.

document.addEventListener('krown:cart:add', (event) => {
  // your code here
});

Returned data:

• productForm: the product's from
• variantId: the id of the variant which was just added to the cart

krown:cart:update

Fires when an item that is already in the cart gets updated (quantity change or removed).

document.addEventListener('krown:cart:update', (event) => {
  // your code here
});

Returned data:

• itemKey: the updated item's product unique key
• itemQty: the updated item's new quantity
• itemVariantId: the updated item's variant id
• itemProductId: the updated item's product id

krown:cart:error

Fires when the cart throws an error. It filters out any kind of error, so if for example, a customer tries to add more items to the cart than available stock, he will get both the cart:add/update event along with the cart:error event.

document.addEventListener('krown:cart:error', (event) => {
  // your code here
});

Returned data:

• error: the error's text content as it comes from Shopify

Cart drawer events

krown:cart-sidebar:show

Fires whenever the cart sidebar (drawer) is opened, no matter what triggered it.

document.addEventListener('krown:cart-sidebar:show', (event) => {
  // your code here
});

Returned data:

• sidebarElement: the cart sidebar's DOM element

krown:cart-sidebar:hide

Fires whenever the cart sidebar (drawer) is closed, no matter what triggered it.

document.addEventListener('krown:cart-sidebar:hide', (event) => {
  // your code here
});

Returned data:

• sidebarElement: the cart sidebar's DOM element

Quick view modal events

krown:product-modal:init

First the first time a user clicks the "quick buy" button and a product is first loaded inside a modal window. It's the point where you can run javascript events on the product that was loaded inside the modal window. This event only fires once per each product.

document.addEventListener('krown:product-modal:init', (event) => {
  // your code here
});

Returned data:

• productId: the product's id
• variant: the selected variant object

krown:product-modal:show

Fires whenever a product modal window (quick buy popup) is shown.

document.addEventListener('krown:product-modal:show', (event) => {
  // your code here
});

Returned data:

• modalElement: the modal DOM element

Collection page events

krown:main-collection-grid:filtered

Fires when the customer filters the collection grid. At that point, the entire grid of products is dynamically changed through AJAX, so any JS that runs inside product cards needs to be reinitialized.

document.addEventListener('krown:main-collection-grid:filtered', (event) => {
  // your code here
});

Returned data:

• gridElement: the grid DOM element

Refresh the cart

KROWN.functions.updateCart(openDrawer = true)

This function provides a way to update the contents of the drawer cart after a custom app or third party code adds a product to the cart or does changes to it. It not only updates the cart, but also the products count from the cart icon in the header of your store.

KROWN.functions.updateCart(true);

Parameters:

• openDrawer {boolean}: Specifies whether the drawer should be opened after the refresh or not.

KROWN.functions.closeCartDrawer()

KROWN.functions.closeCartDrawer();

Closes the cart drawer (if it's opened).

KROWN.functions.openCartDrawer()

KROWN.functions.openCartDrawer();

Open the cart drawer (if it's closed).