JavaScript events for developers

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

Sleek theme uses JavaScript to enhance loading times and ensure that features like Quick View work fast.

If you want to connect with events after they occur to integrate custom scripts or link with third-party apps, we offer some post-event options.

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

1. Trigger event 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() {})

2. Trigger event product ajax added

Product object returned.

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

3. Trigger event product ajax failed to add to cart

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

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

4. Trigger event cart drawer update

Use this event to update the cart object after the quantity of items has been changed. This event is triggered after the cart markup is updated and is free to customize.

Cart object returned.

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

5. Trigger event quick view modal is opened

The first time the modal is opened some elements are lazyloaded. Those elements are not available right away.

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

6. Trigger event quick view content is loaded

Only fires the first time the modal is opened.

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

7. Trigger event variant changed

Variant object returned.

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

8. Trigger event collection page is re-rendered

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

document.addEventListener('collection:rerendered', function(event) {
  console.log('Collection page re-rendered')
})