diff --git a/assets/cart-notification.js b/assets/cart-notification.js index 49b14a02f2d..b2c09969a7d 100644 --- a/assets/cart-notification.js +++ b/assets/cart-notification.js @@ -38,7 +38,7 @@ class CartNotification extends HTMLElement { this.getSectionInnerHTML(parsedState.sections[section.id], section.selector); })); - this.header?.reveal(); + if (this.header) this.header.reveal(); this.open(); } diff --git a/assets/cart.js b/assets/cart.js index 5c3ff9d173f..3b96f73a064 100644 --- a/assets/cart.js +++ b/assets/cart.js @@ -72,7 +72,9 @@ class CartItems extends HTMLElement { .then((state) => { const parsedState = JSON.parse(state); this.classList.toggle('is-empty', parsedState.item_count === 0); - document.getElementById('main-cart-footer')?.classList.toggle('is-empty', parsedState.item_count === 0); + const cartFooter = document.getElementById('main-cart-footer'); + + if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0); this.getSectionsToRender().forEach((section => { const elementToReplace = @@ -83,7 +85,8 @@ class CartItems extends HTMLElement { })); this.updateLiveRegions(line, parsedState.item_count); - document.getElementById(`CartItem-${line}`)?.querySelector(`[name="${name}"]`)?.focus(); + const lineItem = document.getElementById(`CartItem-${line}`); + if (lineItem) lineItem.querySelector(`[name="${name}"]`).focus(); this.disableLoading(); }).catch(() => { this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden')); diff --git a/assets/collection-filters-form.js b/assets/collection-filters-form.js index 800baf69878..2558750026a 100644 --- a/assets/collection-filters-form.js +++ b/assets/collection-filters-form.js @@ -26,7 +26,7 @@ class CollectionFiltersForm extends HTMLElement { } onHistoryChange(event) { - const searchParams = event.state?.searchParams || ''; + const searchParams = event.state ? event.state.searchParams : ''; this.renderPage(searchParams, null, false); } @@ -97,7 +97,10 @@ class CollectionFiltersForm extends HTMLElement { const facetDetailsElements = parsedHTML.querySelectorAll('#CollectionFiltersForm .js-filter, #CollectionFiltersFormMobile .js-filter'); - const matchesIndex = (element) => element.dataset.index === event?.target.closest('.js-filter')?.dataset.index + const matchesIndex = (element) => { + const jsFilter = event ? event.target.closest('.js-filter') : undefined; + return jsFilter ? element.dataset.index === jsFilter.dataset.index : false; + } const facetsToRender = Array.from(facetDetailsElements).filter(element => !matchesIndex(element)); const countsToRender = Array.from(facetDetailsElements).find(matchesIndex); diff --git a/assets/global.js b/assets/global.js index 3f502fcaa86..f9011dc484c 100644 --- a/assets/global.js +++ b/assets/global.js @@ -62,7 +62,9 @@ function pauseAllMedia() { video.contentWindow.postMessage('{"method":"pause"}', '*'); }); document.querySelectorAll('video').forEach((video) => video.pause()); - document.querySelectorAll('product-model').forEach((model) => model.modelViewerUI?.pause()); + document.querySelectorAll('product-model').forEach((model) => { + if (model.modelViewerUI) modelViewerUI.pause(); + }); } function removeTrapFocus(elementToFocus = null) { @@ -394,9 +396,10 @@ class ModalDialog extends HTMLElement { show(opener) { this.openedBy = opener; + const popup = this.querySelector('.template-popup'); document.body.classList.add('overflow-hidden'); this.setAttribute('open', ''); - this.querySelector('.template-popup')?.loadContent(); + if (popup) popup.loadContent(); trapFocus(this, this.querySelector('[role="dialog"]')); } @@ -414,8 +417,11 @@ class ModalOpener extends HTMLElement { super(); const button = this.querySelector('button'); - button?.addEventListener('click', () => { - document.querySelector(this.getAttribute('data-modal'))?.show(button); + + if (!button) return; + button.addEventListener('click', () => { + const modal = document.querySelector(this.getAttribute('data-modal')); + if (modal) modal.show(button); }); } } @@ -424,7 +430,9 @@ customElements.define('modal-opener', ModalOpener); class DeferredMedia extends HTMLElement { constructor() { super(); - this.querySelector('[id^="Deferred-Poster-"]')?.addEventListener('click', this.loadContent.bind(this)); + const poster = this.querySelector('[id^="Deferred-Poster-"]'); + if (!poster) return; + poster.addEventListener('click', this.loadContent.bind(this)); } loadContent() { @@ -537,7 +545,8 @@ class VariantSelects extends HTMLElement { } updateMedia() { - if (!this.currentVariant || !this.currentVariant?.featured_media) return; + 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}"]` ); @@ -574,7 +583,7 @@ class VariantSelects extends HTMLElement { const pickUpAvailability = document.querySelector('pickup-availability'); if (!pickUpAvailability) return; - if (this.currentVariant?.available) { + if (this.currentVariant && this.currentVariant.available) { pickUpAvailability.fetchAvailability(this.currentVariant.id); } else { pickUpAvailability.removeAttribute('available'); @@ -593,13 +602,17 @@ class VariantSelects extends HTMLElement { if (source && destination) destination.innerHTML = source.innerHTML; - document.getElementById(`price-${this.dataset.section}`)?.classList.remove('visibility-hidden'); + 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 addButton = document.getElementById(`product-form-${this.dataset.section}`)?.querySelector('[name="add"]'); + const productForm = document.getElementById(`product-form-${this.dataset.section}`); + if (!productForm) return; + const addButton = productForm.querySelector('[name="add"]'); if (!addButton) return; @@ -615,10 +628,12 @@ class VariantSelects extends HTMLElement { } setUnavailable() { - const addButton = document.getElementById(`product-form-${this.dataset.section}`)?.querySelector('[name="add"]'); + const button = document.getElementById(`product-form-${this.dataset.section}`); + const addButton = button.querySelector('[name="add"]'); + const price = document.getElementById(`price-${this.dataset.section}`); if (!addButton) return; addButton.textContent = window.variantStrings.unavailable; - document.getElementById(`price-${this.dataset.section}`)?.classList.add('visibility-hidden'); + if (price) price.classList.add('visibility-hidden'); } getVariantData() { diff --git a/assets/pickup-availability.js b/assets/pickup-availability.js index f0ae9674c8d..816c1b01ee8 100644 --- a/assets/pickup-availability.js +++ b/assets/pickup-availability.js @@ -22,7 +22,8 @@ if (!customElements.get('pickup-availability')) { this.renderPreview(sectionInnerHTML); }) .catch(e => { - this.querySelector('button')?.removeEventListener('click', this.onClickRefreshList); + const button = this.querySelector('button'); + if (button) button.removeEventListener('click', this.onClickRefreshList); this.renderError(); }); } diff --git a/assets/product-model.js b/assets/product-model.js index 4d3b55534da..5a7361b7f75 100644 --- a/assets/product-model.js +++ b/assets/product-model.js @@ -53,4 +53,6 @@ window.ProductModel = { }, }; -window.addEventListener('DOMContentLoaded', () => { window.ProductModel?.loadShopifyXR(); }); +window.addEventListener('DOMContentLoaded', () => { + if (window.ProductModel) window.ProductModel.loadShopifyXR(); +}); diff --git a/assets/share.js b/assets/share.js index c1bca759b9e..a71071a790b 100644 --- a/assets/share.js +++ b/assets/share.js @@ -10,7 +10,7 @@ if (!customElements.get('share-button')) { successMessage: this.querySelector('[id^="ShareMessage"]'), urlInput: this.querySelector('input') } - this.urlToShare = this.elements.urlInput?.value || document.location.href; + this.urlToShare = this.elements.urlInput ? this.elements.urlInput.value : document.location.href; if (navigator.share) { this.mainDetailsToggle.setAttribute('hidden', ''); diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid index 34908dea66d..acd75c42364 100644 --- a/sections/featured-product.liquid +++ b/sections/featured-product.liquid @@ -414,13 +414,15 @@ } ) const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`); + const activeMediaTemplate = activeMedia.querySelector('template'); + const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null; activeMedia.classList.add('active'); activeMedia.scrollIntoView(); const container = this.querySelector('[role="document"]'); container.scrollLeft = (activeMedia.width - container.clientWidth) / 2; - if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMedia.querySelector('template')?.content?.querySelector('.js-youtube')) + if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube')) activeMedia.loadContent(); } }); diff --git a/sections/footer.liquid b/sections/footer.liquid index 6da7e88a364..3055617f968 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -342,8 +342,9 @@ onItemClick(event) { event.preventDefault(); + const form = this.querySelector('form'); this.elements.input.value = event.currentTarget.dataset.value; - this.querySelector('form')?.submit(); + if (form) form.submit(); } openSelector() { diff --git a/sections/main-product.liquid b/sections/main-product.liquid index 855565aa8c6..848c34089d1 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -466,13 +466,15 @@ } ) const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`); + const activeMediaTemplate = activeMedia.querySelector('template'); + const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null; activeMedia.classList.add('active'); activeMedia.scrollIntoView(); const container = this.querySelector('[role="document"]'); container.scrollLeft = (activeMedia.width - container.clientWidth) / 2; - if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMedia.querySelector('template')?.content?.querySelector('.js-youtube')) + if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube')) activeMedia.loadContent(); } }