Remove all instances of optional chaining (#489)

* remove all instances of optional chaining * fix reviewer comments * fix formtting * fix youtube media on mobile viewports * fix spacing
Shopify · Aug 27, 2021 · 15e044c · 15e044c
1 parent a2796dd
commit 15e044c
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
     }
   }