function getFocusableElements(container) { return Array.from( container.querySelectorAll( "summary, a[href], button:enabled, [tabindex]:not([tabindex^='-']), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe" ) ); } document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => { summary.setAttribute('role', 'button'); summary.setAttribute('aria-expanded', 'false'); if(summary.nextElementSibling.getAttribute('id')) { summary.setAttribute('aria-controls', summary.nextElementSibling.id); } summary.addEventListener('click', (event) => { event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open')); }); if (summary.closest('header-drawer')) return; summary.parentElement.addEventListener('keyup', onKeyUpEscape); }); const trapFocusHandlers = {}; function trapFocus(container, elementToFocus = container) { var elements = getFocusableElements(container); var first = elements[0]; var last = elements[elements.length - 1]; removeTrapFocus(); trapFocusHandlers.focusin = (event) => { if ( event.target !== container && event.target !== last && event.target !== first ) return; document.addEventListener('keydown', trapFocusHandlers.keydown); }; trapFocusHandlers.focusout = function() { document.removeEventListener('keydown', trapFocusHandlers.keydown); }; trapFocusHandlers.keydown = function(event) { if (event.code.toUpperCase() !== 'TAB') return; // If not TAB key // On the last focusable element and tab forward, focus the first element. if (event.target === last && !event.shiftKey) { event.preventDefault(); first.focus(); } // On the first focusable element and tab backward, focus the last element. if ( (event.target === container || event.target === first) && event.shiftKey ) { event.preventDefault(); last.focus(); } }; document.addEventListener('focusout', trapFocusHandlers.focusout); document.addEventListener('focusin', trapFocusHandlers.focusin); elementToFocus.focus(); } // Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it. try { document.querySelector(":focus-visible"); } catch { focusVisiblePolyfill(); } function focusVisiblePolyfill() { const navKeys = ['ARROWUP', 'ARROWDOWN', 'ARROWLEFT', 'ARROWRIGHT', 'TAB', 'ENTER', 'SPACE', 'ESCAPE', 'HOME', 'END', 'PAGEUP', 'PAGEDOWN'] let currentFocusedElement = null; let mouseClick = null; window.addEventListener('keydown', (event) => { if(navKeys.includes(event.code.toUpperCase())) { mouseClick = false; } }); window.addEventListener('mousedown', (event) => { mouseClick = true; }); window.addEventListener('focus', () => { if (currentFocusedElement) currentFocusedElement.classList.remove('focused'); if (mouseClick) return; currentFocusedElement = document.activeElement; currentFocusedElement.classList.add('focused'); }, true); } function pauseAllMedia() { document.querySelectorAll('.js-youtube').forEach((video) => { video.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); }); document.querySelectorAll('.js-vimeo').forEach((video) => { video.contentWindow.postMessage('{"method":"pause"}', '*'); }); document.querySelectorAll('video').forEach((video) => video.pause()); document.querySelectorAll('product-model').forEach((model) => { if (model.modelViewerUI) model.modelViewerUI.pause(); }); } function removeTrapFocus(elementToFocus = null) { document.removeEventListener('focusin', trapFocusHandlers.focusin); document.removeEventListener('focusout', trapFocusHandlers.focusout); document.removeEventListener('keydown', trapFocusHandlers.keydown); if (elementToFocus) elementToFocus.focus(); } function onKeyUpEscape(event) { if (event.code.toUpperCase() !== 'ESCAPE') return; const openDetailsElement = event.target.closest('details[open]'); if (!openDetailsElement) return; const summaryElement = openDetailsElement.querySelector('summary'); openDetailsElement.removeAttribute('open'); summaryElement.setAttribute('aria-expanded', false); summaryElement.focus(); } class QuantityInput extends HTMLElement { constructor() { super(); this.input = this.querySelector('input'); this.changeEvent = new Event('change', { bubbles: true }) this.querySelectorAll('button').forEach( (button) => button.addEventListener('click', this.onButtonClick.bind(this)) ); } onButtonClick(event) { event.preventDefault(); const previousValue = this.input.value; event.target.name === 'plus' ? this.input.stepUp() : this.input.stepDown(); if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent); } } customElements.define('quantity-input', QuantityInput); function debounce(fn, wait) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn.apply(this, args), wait); }; } function fetchConfig(type = 'json') { return { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': `application/${type}` } }; } /* * Shopify Common JS * */ if ((typeof window.Shopify) == 'undefined') { window.Shopify = {}; } if ((typeof window.shopsConfig) != 'undefined') { window.Shopify = { ...window.shopsConfig }; } Shopify.bind = function(fn, scope) { return function() { return fn.apply(scope, arguments); } }; Shopify.setSelectorByValue = function(selector, value) { for (var i = 0, count = selector.options.length; i < count; i++) { var option = selector.options[i]; if (value == option.value || value == option.innerHTML) { selector.selectedIndex = i; return i; } } }; Shopify.addListener = function(target, eventName, callback) { target.addEventListener ? target.addEventListener(eventName, callback, false) : target.attachEvent('on'+eventName, callback); }; Shopify.postLink = function(path, options) { options = options || {}; var method = options['method'] || 'post'; var params = options['parameters'] || {}; var form = document.createElement("form"); form.setAttribute("method", method); form.setAttribute("action", path); for(var key in params) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); form.appendChild(hiddenField); } document.body.appendChild(form); form.submit(); document.body.removeChild(form); }; Shopify.CountryProvinceSelector = function(country_domid, province_domid, options) { this.countryEl = document.getElementById(country_domid); this.provinceEl = document.getElementById(province_domid); this.provinceContainer = document.getElementById(options['hideElement'] || province_domid); Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler,this)); this.initCountry(); this.initProvince(); }; Shopify.CountryProvinceSelector.prototype = { initCountry: function() { var value = this.countryEl.getAttribute('data-default'); Shopify.setSelectorByValue(this.countryEl, value); this.countryHandler(); }, initProvince: function() { var value = this.provinceEl.getAttribute('data-default'); if (value && this.provinceEl.options.length > 0) { Shopify.setSelectorByValue(this.provinceEl, value); } }, countryHandler: function(e) { var opt = this.countryEl.options[this.countryEl.selectedIndex]; var raw = opt.getAttribute('data-provinces'); var provinces = JSON.parse(raw); this.clearOptions(this.provinceEl); if (provinces && provinces.length == 0) { this.provinceContainer.style.display = 'none'; } else { for (var i = 0; i < provinces.length; i++) { var opt = document.createElement('option'); opt.value = provinces[i][0]; opt.innerHTML = provinces[i][1]; this.provinceEl.appendChild(opt); } this.provinceContainer.style.display = ""; } }, clearOptions: function(selector) { while (selector.firstChild) { selector.removeChild(selector.firstChild); } }, setOptions: function(selector, values) { for (var i = 0, count = values.length; i < values.length; i++) { var opt = document.createElement('option'); opt.value = values[i]; opt.innerHTML = values[i]; selector.appendChild(opt); } } }; class MenuDrawer extends HTMLElement { constructor() { super(); this.mainDetailsToggle = this.querySelector('details'); if (navigator.platform === 'iPhone') document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`); this.addEventListener('keyup', this.onKeyUp.bind(this)); this.addEventListener('focusout', this.onFocusOut.bind(this)); this.bindEvents(); } bindEvents() { this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this))); this.querySelectorAll('button').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this))); } onKeyUp(event) { if(event.code.toUpperCase() !== 'ESCAPE') return; const openDetailsElement = event.target.closest('details[open]'); if(!openDetailsElement) return; openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector('summary')) : this.closeSubmenu(openDetailsElement); } onSummaryClick(event) { const summaryElement = event.currentTarget; const detailsElement = summaryElement.parentNode; const isOpen = detailsElement.hasAttribute('open'); const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); function addTrapFocus() { trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button')); summaryElement.nextElementSibling.removeEventListener('transitionend', addTrapFocus); } if (detailsElement === this.mainDetailsToggle) { if(isOpen) event.preventDefault(); isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement); } else { setTimeout(() => { detailsElement.classList.add('menu-opening'); summaryElement.setAttribute('aria-expanded', true); !reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus); }, 100); } } openMenuDrawer(summaryElement) { setTimeout(() => { this.mainDetailsToggle.classList.add('menu-opening'); }); summaryElement.setAttribute('aria-expanded', true); trapFocus(this.mainDetailsToggle, summaryElement); document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`); } closeMenuDrawer(event, elementToFocus = false) { if (event !== undefined) { this.mainDetailsToggle.classList.remove('menu-opening'); this.mainDetailsToggle.querySelectorAll('details').forEach(details => { details.removeAttribute('open'); details.classList.remove('menu-opening'); }); document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`); removeTrapFocus(elementToFocus); this.closeAnimation(this.mainDetailsToggle); } } onFocusOut(event) { setTimeout(() => { if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer(); }); } onCloseButtonClick(event) { const detailsElement = event.currentTarget.closest('details'); this.closeSubmenu(detailsElement); } closeSubmenu(detailsElement) { detailsElement.classList.remove('menu-opening'); detailsElement.querySelector('summary').setAttribute('aria-expanded', false); removeTrapFocus(); this.closeAnimation(detailsElement); } closeAnimation(detailsElement) { let animationStart; const handleAnimation = (time) => { if (animationStart === undefined) { animationStart = time; } const elapsedTime = time - animationStart; if (elapsedTime < 400) { window.requestAnimationFrame(handleAnimation); } else { detailsElement.removeAttribute('open'); if (detailsElement.closest('details[open]')) { trapFocus(detailsElement.closest('details[open]'), detailsElement.querySelector('summary')); } } } window.requestAnimationFrame(handleAnimation); } } customElements.define('menu-drawer', MenuDrawer); class HeaderDrawer extends MenuDrawer { constructor() { super(); } openMenuDrawer(summaryElement) { this.header = this.header || document.getElementById('shopify-section-header'); this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0; document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`); setTimeout(() => { this.mainDetailsToggle.classList.add('menu-opening'); }); summaryElement.setAttribute('aria-expanded', true); trapFocus(this.mainDetailsToggle, summaryElement); document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`); } } customElements.define('header-drawer', HeaderDrawer); class ModalDialog extends HTMLElement { constructor() { super(); this.querySelector('[id^="ModalClose-"]').addEventListener( 'click', this.hide.bind(this) ); this.addEventListener('keyup', (event) => { if (event.code.toUpperCase() === 'ESCAPE') this.hide(); }); if (this.classList.contains('media-modal')) { this.addEventListener('pointerup', (event) => { if (event.pointerType === 'mouse' && !event.target.closest('deferred-media, product-model')) this.hide(); }); } else { this.addEventListener('click', (event) => { if (event.target.nodeName === 'MODAL-DIALOG') this.hide(); }); } } show(opener) { this.openedBy = opener; const popup = this.querySelector('.template-popup'); document.body.classList.add('overflow-hidden'); this.setAttribute('open', ''); if (popup) popup.loadContent(); trapFocus(this, this.querySelector('[role="dialog"]')); window.pauseAllMedia(); } hide() { document.body.classList.remove('overflow-hidden'); this.removeAttribute('open'); removeTrapFocus(this.openedBy); window.pauseAllMedia(); } } customElements.define('modal-dialog', ModalDialog); class ModalOpener extends HTMLElement { constructor() { super(); const button = this.querySelector('button'); if (!button) return; button.addEventListener('click', () => { const modal = document.querySelector(this.getAttribute('data-modal')); if (modal) modal.show(button); }); } } customElements.define('modal-opener', ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); const poster = this.querySelector('[id^="Deferred-Poster-"]'); if (!poster) return; poster.addEventListener('click', this.loadContent.bind(this)); } loadContent() { window.pauseAllMedia(); if (!this.getAttribute('loaded')) { const content = document.createElement('div'); content.appendChild(this.querySelector('template').content.firstElementChild.cloneNode(true)); this.setAttribute('loaded', true); this.appendChild(content.querySelector('video, model-viewer, iframe')).focus(); } } } customElements.define('deferred-media', DeferredMedia); class SliderComponent extends HTMLElement { constructor() { super(); this.slider = this.querySelector('ul'); this.sliderItems = this.querySelectorAll('li'); this.pageCount = this.querySelector('.slider-counter--current'); this.pageTotal = this.querySelector('.slider-counter--total'); this.prevButton = this.querySelector('button[name="previous"]'); this.nextButton = this.querySelector('button[name="next"]'); if (!this.slider || !this.nextButton) return; const resizeObserver = new ResizeObserver(entries => this.initPages()); resizeObserver.observe(this.slider); this.slider.addEventListener('scroll', this.update.bind(this)); this.prevButton.addEventListener('click', this.onButtonClick.bind(this)); this.nextButton.addEventListener('click', this.onButtonClick.bind(this)); } initPages() { const sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0); this.sliderLastItem = sliderItemsToShow[sliderItemsToShow.length - 1]; if (sliderItemsToShow.length === 0) return; this.slidesPerPage = Math.floor(this.slider.clientWidth / sliderItemsToShow[0].clientWidth); this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1; this.update(); } update() { if (!this.pageCount || !this.pageTotal) return; this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1; if (this.currentPage === 1) { this.prevButton.setAttribute('disabled', 'disabled'); } else { this.prevButton.removeAttribute('disabled'); } if (this.currentPage === this.totalPages) { this.nextButton.setAttribute('disabled', 'disabled'); } else { this.nextButton.removeAttribute('disabled'); } this.pageCount.textContent = this.currentPage; this.pageTotal.textContent = this.totalPages; } onButtonClick(event) { event.preventDefault(); const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth; this.slider.scrollTo({ left: slideScrollPosition }); } } customElements.define('slider-component', SliderComponent); class VariantSelects extends HTMLElement { constructor() { super(); this.addEventListener('change', this.onVariantChange); } onVariantChange() { this.updateOptions(); this.updateMasterId(); this.toggleAddButton(true, '', false); this.updatePickupAvailability(); this.removeErrorMessage(); if (!this.currentVariant) { this.toggleAddButton(true, '', true); this.setUnavailable(); } else { this.updateMedia(); this.updateURL(); this.updateVariantInput(); this.renderProductInfo(); this.updateShareUrl(); } } updateOptions() { this.options = Array.from(this.querySelectorAll('select'), (select) => select.value); } updateMasterId() { this.currentVariant = this.getVariantData().find((variant) => { return !variant.options.map((option, index) => { return this.options[index] === option; }).includes(false); }); } updateMedia() { if (!this.currentVariant) return; if (!this.currentVariant.featured_media) return; const newMedia = document.querySelector( `[data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]` ); if (!newMedia) return; if ($('.slider-for-product').length) { var currentVariant = this.currentVariant let targetIndex = -1 $($('.product-slide-image .slick-slide').get().reverse()).each(function (idx, el) { if (targetIndex != -1) return const mediaId = $(el).find('.slider__slide').data('media-id') const slideIdx = $(el).data('slick-index') if (mediaId === `main-${currentVariant.featured_media.id}`) { console.log('result', slideIdx); targetIndex = slideIdx } }) $('.slider-nav-product').slick('slickGoTo', targetIndex) } else { const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`); const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`); const parent = newMedia.parentElement; if (parent.firstChild == newMedia) return; modalContent.prepend(newMediaModal); parent.prepend(newMedia); this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header'); if(this.stickyHeader) { this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal')); } window.setTimeout(() => { parent.scrollLeft = 0; parent.querySelector('li.product__media-item').scrollIntoView({behavior: 'smooth'}); }); } } updateURL() { if (!this.currentVariant || this.dataset.updateUrl === 'false') return; window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`); } updateShareUrl() { const shareButton = document.getElementById(`Share-${this.dataset.section}`); if (!shareButton) return; shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`); } updateVariantInput() { const productForms = document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment`); productForms.forEach((productForm) => { const input = productForm.querySelector('input[name="id"]'); input.value = this.currentVariant.id; input.dispatchEvent(new Event('change', { bubbles: true })); }); } updatePickupAvailability() { const pickUpAvailability = document.querySelector('pickup-availability'); if (!pickUpAvailability) return; if (this.currentVariant && this.currentVariant.available) { pickUpAvailability.fetchAvailability(this.currentVariant.id); } else { pickUpAvailability.removeAttribute('available'); pickUpAvailability.innerHTML = ''; } } removeErrorMessage() { const section = this.closest('section'); if (!section) return; const productForm = section.querySelector('product-form'); if (productForm) productForm.handleErrorMessage(); } renderProductInfo() { fetch(`${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${this.dataset.section}`) .then((response) => response.text()) .then((responseText) => { const id = `price-${this.dataset.section}`; const html = new DOMParser().parseFromString(responseText, 'text/html') const destination = document.getElementById(id) let source = null if (this.dataset.section.indexOf('featured-product') > -1) { source = html.getElementById('price-main-product') } else { source = html.getElementById(id); } if (source && destination) destination.innerHTML = source.innerHTML; const price = document.getElementById(`price-${this.dataset.section}`); if (price) price.classList.remove('visibility-hidden'); this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut); }); } toggleAddButton(disable = true, text, modifyClass = true) { const productForm = document.getElementById(`product-form-${this.dataset.section}`); if (!productForm) return; const addButton = productForm.querySelector('[name="add"]'); const addButtonText = productForm.querySelector('[name="add"] > span'); if (!addButton) return; if (disable) { addButton.setAttribute('disabled', 'disabled'); if (text) addButtonText.textContent = text; } else { addButton.removeAttribute('disabled'); addButtonText.textContent = window.variantStrings.addToCart; } if (!modifyClass) return; } setUnavailable() { const button = document.getElementById(`product-form-${this.dataset.section}`); const addButton = button.querySelector('[name="add"]'); const addButtonText = button.querySelector('[name="add"] > span'); const price = document.getElementById(`price-${this.dataset.section}`); if (!addButton) return; addButtonText.textContent = window.variantStrings.unavailable; if (price) price.classList.add('visibility-hidden'); } getVariantData() { this.variantData = this.variantData || JSON.parse(this.querySelector('[type="application/json"]').textContent); return this.variantData; } } customElements.define('variant-selects', VariantSelects); class VariantRadios extends VariantSelects { constructor() { super(); } updateOptions() { const fieldsets = Array.from(this.querySelectorAll('fieldset')); this.options = fieldsets.map((fieldset) => { return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value; }); } } customElements.define('variant-radios', VariantRadios);