ZEST theme
Try Zest freeResourcesOther solutions
  • What is Zest theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Zest theme
    • Set up my store as Zest demo
    • Update Zest theme
    • Theme license & Transfer
  • build for success series
    • Landing page like puravida
  • Page's global sections
    • General settings
    • Announcement bar
    • Banner logo 🔥
    • Header
    • Footer
    • Menu
      • Add a banner to mega menu
      • Add products to mega menu
      • Add collections to mega menu
      • Add custom cards to mega menu
      • Customize a hovering menu
    • Mobile navigation bar
    • Age verifier pop-up
    • Pop-up
  • Theme sections
    • Auto-scrolling promotion
    • Before/ After image slider
    • Blog posts
    • Collage tab
    • Collapsible tab
    • Collection list
    • Collection list slider
    • Collections showcase 🔥
    • Collection tab
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid & HTML
    • Favorite collection 🔥
    • Favorite products
    • Featured product
    • Featured product slider
    • Featured collection
    • Gallery images
    • Handpicked products
    • Highlight text with image 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider
    • Layered images 🔥
    • Logo list
    • Lookbook
    • Map
    • Mixed image cards 🔥
    • Multicolumn
    • Newsletter
    • Products bundle
    • Product tabs
    • Promotion banner 🔥
    • Press
    • Rich text
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Animations
    • Cart
    • Checkout
    • Color swatches
    • Colors & Color schemes
    • Currency format
    • Cookies banner
    • Layout
    • Product card
    • Product quick view
    • Search
    • Social media
    • Theme style
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Product description
      • Breadcrumbs
      • Product information
      • Recently viewed products
      • Product recommendations
      • Quick order list 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Languages & Countries/Regions
    • Languages
    • Countries/ Regions
  • Other pages
    • 404 page
    • About us
    • Blogs
    • Blog posts
    • Cart & Checkout
    • FAQs page
    • Password
    • Search page
  • FAQs
    • Generic
      • Add custom fonts
      • Add custom CSS
      • Add custom badges to the product card and product page
      • Add gift wrap option to my cart
      • Add product review apps to my theme
      • Change the copyright text at the footer
      • Compare Zest with other Shopify themes
      • Does Zest support RTL languages?
      • JavaScript events for developers
      • How to migrate your Zest theme to version 7.0.0
      • My store has a low speed score - How can I improve it?
      • Show Payment icons on the Footer 🔥
    • Product page
      • Add a size chart to your product page
      • Add recipient fields to my gift card product
      • Customize the checkout
      • Edit product breadcrumbs using metafields
      • How to remove 'Powered by Shopify' in Copyright
      • Remove text Tax included and Shipping calculated at checkout below the product price
      • Set up quantity rules and volume pricing 🔥
    • Collection page
      • Change the default sorting of a collection
    • Shopify functions
      • Combined listings app 🔥
      • Does Zest support Section groups?
      • Get to know dynamic checkout buttons
  • Troubleshooting
    • Mega menu not working when changing the store languages
Powered by GitBook
On this page
  • 1. Page loaded
  • 2. Product successfully added to the Ajax cart
  • 3. Product could not be added to the Ajax cart
  • 4. Cart updated
  • 5. Quick view modal has been opened
  • 6. Quick view modal has been loaded
  • 7. Variant selection changed
  • 8. Collection page is refreshed
  • 9. Trigger cart drawer to refresh
  1. FAQs
  2. Generic

JavaScript events for developers

Learn to use custom Javascript event listeners and triggers in Zest theme

PreviousDoes Zest support RTL languages?NextHow to migrate your Zest theme to version 7.0.0

Last updated 2 months ago

Zest leverages JavaScript extensively to optimize loading times and ensure seamless performance of features, such as the quick view.

In certain cases, you may need to capture these events after they occur, enabling you to execute custom scripts or integrate third-party applications.

All objects returned are vanilla JS objects and can be edited however you see fit.

1. Page loaded

The event is triggered when the HTML document has been fully parsed, and all deferred scripts have finished downloading and running.

document.addEventListener('page:loaded', function() {
  // Page has loaded and theme assets are ready
})

2. Product successfully added to the Ajax cart

.

document.addEventListener('product-ajax:added', function(evt) {
  console.log(evt.detail.product);
});

3. Product could not be added to the Ajax cart

The error message will let you know the problem. Most of the time it is quantity related.

document.addEventListener('product-ajax:error', function(evt) {
  console.log(evt.detail.errorMessage);
});

4. Cart updated

JavaScript updates the cart object once the quantity is modified. This event is triggered after the cart markup has been updated and is open to customization.

document.addEventListener('cart:updated', function(evt) {
    console.log(evt.detail.cart);
});

5. Quick view modal has been opened

The first time the modal is opened, certain elements, like the add-to-cart form, are lazy-loaded. These elements are not immediately available.

document.addEventListener('quick-view:open', function(evt) {
  console.log(evt.detail.productUrl);
});

6. Quick view modal has been loaded

Only fires the first time the modal is opened.

document.addEventListener('quick-view:loaded', function(evt) {
  console.log(evt.detail.productUrl);
});

7. Variant selection changed

document.addEventListener('variant:changed', function(evt) {
    console.log(evt.detail.variant);
});

8. Collection page is refreshed

Fired when the collection page is re-rendered after filters are updated.

document.addEventListener('collection:rerendered', function() {
    console.log('collection refreshed');
});

9. Trigger cart drawer to refresh

Set the open parameter to false if you don't want the cart drawer to be open after the update.

document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));

.

.

Product object returned
Cart object returned
Variant object returned