JavaScript events

This guide covers all JavaScript events that the Athens theme fires before or after various user actions, along with any possible data returned from each event.

All events are fired on the document level. For example:

document.addEventListener('cart:item-remove', (event) => {
	console.log(event.detail);
	// Do something with this event and its `detail` object if available
});

A lot of the following events will also provide additional data based on the action that was taken in the form of event.detail. In such a case they are documented under each event.

cart-drawer:close

This event fires any time the cart drawer closes. It has no additional data.

cart-drawer:open

This event fires any time the cart drawer opens. It has no additional data.

cart:item-add

This event fires any time a product is added to the cart, regardless of where it was added from. A special context value in event.detail provides more information on which section the product was added from.

Additional data in event.detail:

{
  context: string; The section where the product was added. See available values below.
  items: object[]; An array containing the cart items added as returned from Shopify's API.
}

Available values for event.detail.context:

MainProduct
FeaturedProductSection
ProductCardProductRecommendations
ProductCardCollectionTabsSection
ProductCardCustomRelatedProductsSection
ProductCardFeaturedCollectionSection
ProductCard - Collection: {CollectionName}
ProductCardSearchPage
ProductCardComplementaryProducts

cart:item-quantity-update

This event fires whenever a product’s quantity is updated in the cart. Currently there are two places this can be done from, both documented as context in event.detail.

Additional data in event.detail:

{
  context: string; The section from which the action was taken.
  cart: object; The cart object as returned from Shopify's API.
}

Available values for event.detail.context:

MainCart
CartPage

cart:item-remove

This event fires whenever a product is removed from the cart. Currently there are two places this can be done from, both documented as context in event.detail.

Additional data in event.detail:

{
  context: string; The section from which the action was taken.
  cart: object; The cart object as returned from Shopify's API.
}

Available values for event.detail.context:

MainCart
CartPage

collection:product-filters

This event fires any time user changes the product filters on any collection or search page.

Additional data in event.detail:

{
 filters: Object; An object containing the names of the filters that are selected.
}

mobile-menu:close

This event fires any time the mobile menu drawer closes. It has no additional data.

mobile-menu:open

This event fires any time the mobile menu drawer opens. It has no additional data.

pagination:page-change

This event fires whenever the page is changed in a collection or search template when the “Products pagination” setting is set to “Ajax pagination”.

Additional data in event.detail:

{
  page: number; The number of the new page.
}

pickup-availability-drawer:close

This event fires any time the pick availability drawer closes in the main product template. It has no additional data.

pickup-availability-drawer:open

This event fires any time the pick availability drawer opens in the main product template. It has no additional data.

product:modal-close

This event fires any time the main product image modal opens. It has no additional data.

product:modal-open

This event fires any time the main product image modal opens. It has no additional data.

product:quantity-update

This event fires any time the user changes the product quantity in the main product template or the featured product section.

Additional data in event.detail:

{
  quantity: number; A number representing the quantity input's value after the change.
}

product:variant-change

This event fires any time the user changes the variant in the main product template or the featured product section.

Additional data in event.detail:

{
  variant: Object; The variant that was selected.
}

search:close

This event fires any time the predictive search drawer in the header closes. It has no additional data.

search:open

This event fires any time the predictive search drawer in the header opens. It has no additional data.

slider:slide-change

Desktop only. This event fires whenever a slide occurs when the “Slider” layout option is enabled in the following sections: Banner list, Brands, Collection list, Collection tabs, Featured collection, Promotion blocks, Simple collection list.

Additional data in event.detail:

{
  id: string; The slider's element ID.
  index: number; 0-based index of the slide that was navigated to.
}

slideshow:slide-change

This event fires whenever a slide change occurs in the Slider section.

Additional data in event.detail:

{
  id: string; The slider's element ID.
  index: number; 0-based index of the slide that was navigated to.
}