// Below are example event listeners. They listen for theme events that Pipeline
// fires in order to make it easier for you to add customizations.
// Keep your scripts inside this IIFE function call to avoid leaking your
// variables into the global scope.
document.addEventListener('theme:variant:change', function(event) {
// You might use something like this to write a pre-order feature or a
// custom swatch feature.
var variant = event.detail.variant;
var container = event.target;
console.log('Container ———————— ↓');
console.log('Variant —————————— ↓');
// ... update some element on the page
document.addEventListener('theme:cart:change', function(event) {
var cart = event.detail.cart;
console.log('Cart ———————————— ↓');
// ... update an app or a custom shipping caluclator
// Fired when page loads to update header values
document.addEventListener('theme:cart:init', (e) => {
console.log('theme:cart:init');
// Debounced scroll listeners. Up and down only fire on direction changes
// These events are useful for creating sticky elements and popups.
document.addEventListener('theme:scroll', e => { console.log(e); });
document.addEventListener('theme:scroll:up', e => { console.log(e); });
document.addEventListener('theme:scroll:down', e => { console.log(e); });
// Debounced resize listener to bundle changes that trigger document reflow
document.addEventListener('theme:resize', e => { console.log(e); });
// Locks and unlocks page scroll for modals and drawers
// These are commented out because firing them will lock the page scroll
// the lock event must set `detail` to the modal or drawer body so the
// scroll locking code knows what element should maintain scoll.
// document.dispatchEvent(new CustomEvent('theme:scroll:lock', {bubbles: true, detail: scrollableInnerElement}));
// document.dispatchEvent(new CustomEvent('theme:scroll:unlock', {bubbles: true}));
// ^^ Keep your scripts inside this IIFE function call to avoid leaking your
// variables into the global scope.