reply on parent element instead of media id to toggle spinner

Shopify · Feb 23, 2023 · 72aa630 · 72aa630
1 parent b7f7b67
commit 72aa630
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 9 deletions.
diff --git a/assets/magnify.js b/assets/magnify.js
@@ -25,7 +25,7 @@ function prepareOverlay(container, image) {
 }
 
 function toggleLoadingSpinner(image) {
-  const loadingSpinner = document.getElementById(`loading-spinner-${image.dataset.mediaId}`);
+  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`);
   loadingSpinner.classList.toggle('hidden');
 }
 

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1468,12 +1468,6 @@ a.product__text {
   position: relative;
 }
 
-.product__modal-opener {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 @media screen and (min-width: 750px) {
   .product-media-container .product__modal-opener:not(.product__modal-opener--image) {
     display: none;

diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
@@ -90,7 +90,7 @@
         endcase
       -%}
     </span>
-    <div class="loading-overlay__spinner hidden" id="loading-spinner-{{ media.id }}">
+    <div class="loading-overlay__spinner hidden">
       <svg
         aria-hidden="true"
         focusable="false"
@@ -106,7 +106,6 @@
         class: image_class,
         loading: lazy,
         sizes: sizes,
-        data-media-id: media.id,
         widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
       }}
     </div>