Tweaks to fix JS error and modal content not updating when switching …

…away from a variant with a featured image
Shopify · Feb 28, 2024 · 1da0e36 · 1da0e36
1 parent b9951dd
commit 1da0e36
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -1143,13 +1143,12 @@ class VariantSelects extends HTMLElement {
       });
     }
 
-    document.querySelector(`[id^="MediaGallery-${this.dataset.section}"]`).setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, false);
+    document.querySelector(`[id^="MediaGallery-${this.dataset.section}"]`).setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media?.id}`);
 
     // update media modal
     const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
-    if (modalContent && this.currentVariant.featured_media) {
-      modalContent.prepend(modalContent.querySelector(`[data-media-id="${this.currentVariant.featured_media.id}"]`));
-    }
+    const newModalContent = html.querySelector(`product-modal`);
+    if (modalContent && newModalContent) modalContent.innerHTML = newModalContent.innerHTML;
   }
 
   renderProductInfo() {

diff --git a/assets/media-gallery.js b/assets/media-gallery.js
@@ -16,7 +16,7 @@ if (!customElements.get('media-gallery')) {
         this.elements.thumbnails.querySelectorAll('[data-target]').forEach((mediaToSwitch) => {
           mediaToSwitch
             .querySelector('button')
-            .addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));
+            .addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target));
         });
         if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic();
       }
@@ -28,21 +28,21 @@ if (!customElements.get('media-gallery')) {
         this.setActiveThumbnail(thumbnail);
       }
 
-      setActiveMedia(mediaId, prepend) {
-        const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${mediaId}"]`);
+      setActiveMedia(mediaId) {
+        const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${mediaId}"],[data-media-id]`);
         this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => {
           element.classList.remove('is-active');
         });
         activeMedia.classList.add('is-active');
 
-        if (prepend) {
-          activeMedia.parentElement.prepend(activeMedia);
-          if (this.elements.thumbnails) {
-            const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
-            activeThumbnail.parentElement.prepend(activeThumbnail);
-          }
-          if (this.elements.viewer.slider) this.elements.viewer.resetPages();
-        }
+        // if (prepend) {
+        //   activeMedia.parentElement.prepend(activeMedia);
+        //   if (this.elements.thumbnails) {
+        //     const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${mediaId}"]`);
+        //     activeThumbnail.parentElement.prepend(activeThumbnail);
+        //   }
+        //   if (this.elements.viewer.slider) this.elements.viewer.resetPages();
+        // }
 
         this.preventStickyHeader();
         window.setTimeout(() => {