Merge pull request #34 from TrellisCommerce/feature/TECH-778

TECH-778 added custom lazy loading functionality for promo images
TrellisCommerce · Sep 16, 2024 · a63dce3 · a63dce3
2 parents 483a188 + 16c556f
commit a63dce3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
@@ -2,9 +2,13 @@ class DetailsDisclosure extends HTMLElement {
   constructor() {
     super();
     this.mainDetailsToggle = this.querySelector('details');
-    this.content = this.mainDetailsToggle.querySelector('summary').nextElementSibling;
+    this.content =
+      this.mainDetailsToggle.querySelector('summary').nextElementSibling;
 
-    this.mainDetailsToggle.addEventListener('focusout', this.onFocusOut.bind(this));
+    this.mainDetailsToggle.addEventListener(
+      'focusout',
+      this.onFocusOut.bind(this),
+    );
     this.mainDetailsToggle.addEventListener('toggle', this.onToggle.bind(this));
   }
 
@@ -26,7 +30,9 @@ class DetailsDisclosure extends HTMLElement {
 
   close() {
     this.mainDetailsToggle.removeAttribute('open');
-    this.mainDetailsToggle.querySelector('summary').setAttribute('aria-expanded', false);
+    this.mainDetailsToggle
+      .querySelector('summary')
+      .setAttribute('aria-expanded', false);
   }
 }
 
@@ -36,16 +42,40 @@ class HeaderMenu extends DetailsDisclosure {
   constructor() {
     super();
     this.header = document.querySelector('.header-wrapper');
+    this.megaMenu = document.querySelector('.mega-menu');
   }
 
   onToggle() {
+    if (this.megaMenu) {
+      var parentLinks = document.querySelectorAll('details.mega-menu');
+      parentLinks.forEach(function (parentLink) {
+        loadImages(parentLink);
+      });
+      function loadImages(menuItem) {
+        var images = menuItem.querySelectorAll('.custom-lazyload');
+        if (!images.length) return;
+        images.forEach(function (image) {
+          if (image.dataset.src) {
+            image.src = image.dataset.src;
+            image.removeAttribute('data-src');
+            image.classList.remove('custom-lazyload');
+          }
+        });
+      }
+    }
+
     if (!this.header) return;
     this.header.preventHide = this.mainDetailsToggle.open;
 
-    if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
+    if (
+      document.documentElement.style.getPropertyValue(
+        '--header-bottom-position-desktop',
+      ) !== ''
+    )
+      return;
     document.documentElement.style.setProperty(
       '--header-bottom-position-desktop',
-      `${Math.floor(this.header.getBoundingClientRect().bottom)}px`
+      `${Math.floor(this.header.getBoundingClientRect().bottom)}px`,
     );
   }
 }

diff --git a/snippets/header-mega-menu.liquid b/snippets/header-mega-menu.liquid
@@ -96,8 +96,8 @@
                               <img
                                 width='160'
                                 height='160'
-                                class='twcss-aspect-square twcss-object-cover'
-                                src='{{ block.settings.promotional_image | image_url }}'
+                                class='twcss-aspect-square twcss-object-cover custom-lazyload'
+                                data-src='{{ block.settings.promotional_image | image_url }}'
                                 alt='{{ block.settings.promotional_image.alt | escape }}'
                               >
                             {%- endif -%}