Sleek
Try Sleek freeResourcesOther solutions
  • What is Sleek theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Sleek theme
    • Set up my store as Sleek demo
    • Update Sleek theme
    • Theme license & Transfer
  • BUILD FOR SUCCESS SERIES
    • Homepage for Health & Beauty 🔥
  • Page's global sections
    • General settings
    • Announcement bar
    • Cart drawer
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Mobile navigation bar
    • Pop-up
    • Quick view
  • Theme sections
    • Before/ After image slider
    • Blog post
    • Card images
    • Collage tabs
    • Collapsible tabs
    • Collection image showcase
    • Collection list
    • Collections showcase
    • Collections slider
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products
    • Feature list
    • Featured product
    • Featured collection
    • Featured products tab
    • Highlight text with image
    • Image gallery
    • Image with text
    • Image with text columns
    • Image with text overlay
    • Layered images with text
    • Lookbook banner
    • Lookbook cards
    • Lookbook slider
    • Media with collection
    • Multicolumn
    • Press
    • Products bundle
    • Product tabs
    • Product showcase
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Store locator
    • Testimonials
    • Video
    • Video hero
    • Video with text
  • Theme settings
    • General 🔥
    • Animations
    • Buttons
    • Custom CSS
    • Blog cards
    • Cart
    • Collection cards
    • Color swatches
    • Colors
    • Currency format
    • Layout
    • Logo
    • Product cards
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumbs
        • Product information
        • Related products
        • Sticky add to cart bar 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Generic
      • Add gift wrap option to my cart
      • Combined listings app
      • How to add custom fonts in Sleek? 🔥
      • JavaScript events for developers
    • Product
      • Set up quantity rules and volume pricing 🔥
      • Add custom badges using product tags
      • Set up Local Pickup option
      • Show dynamic content for Products using Metafields 🔥
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 Sleek theme

PreviousHow to add custom fonts in Sleek? 🔥NextProduct

Last updated 1 month ago

Sleek 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