zz-shopify-components 0.24.1-beta.6 → 0.25.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.24.1-beta.6",
+  "version": "0.25.1-beta.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-accessories-preview-swiper.liquid

@@ -1,4 +1,4 @@
-<div class=' tw-w-full product-accessories-swiper-container tw-h-full tw-relative'>
+<zz-accessories-preview-swiper class=' tw-w-full product-accessories-swiper-container tw-h-full tw-relative'>
   <div class='swiper product-accessories-swiper-list tw-w-full tw-h-full tw-relative'>
     <div class='swiper-wrapper'>
       {% for image in product.metafields.custom.acc_images.value %}
@@ -98,9 +98,12 @@
       </div>
     </div>
   </div>
-</div>
+</zz-accessories-preview-swiper>
 
 <style>
+  zz-accessories-preview-swiper {
+    display: block;
+  }
   .product-accessories-swiper-container .swiper-pagination {
     --swiper-pagination-color: black;
     --swiper-pagination-bottom: 10px;
@@ -162,113 +165,163 @@
   }
 </style>
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-  const thumbs = new Swiper('.product-accessories-swiper-list-thumbs', {
-    slidesPerView: 5,
-    spaceBetween: 8,
-    watchSlidesProgress: true,
-    slideToClickedSlide: true,
-    breakpoints: {
-      0:   { slidesPerView: 4, spaceBetween: 6 },
-      768: { slidesPerView: 5, spaceBetween: 8 },
-      1024:{ slidesPerView: 6, spaceBetween: 10 }
-    }
-  });
+  ;(() => {
+    class ZZAccessoriesPreviewSwiper extends HTMLElement {
+      constructor() {
+        super();
+        this._thumbs = null;
+        this._swiper = null;
+        this._listEl = null;
+        this._thumbsEl = null;
+        this._paginationEl = null;
+        this._btnPrev = null;
+        this._btnNext = null;
+        this._initialized = false;
+      }
+
+      connectedCallback() {
+        const init = () => {
+          if (this._initialized) return;
+          if (typeof Swiper === 'undefined') return;
+          this._ensureElements();
+          this._initSwipers();
+          this._initialized = true;
+        };
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init, { once: true });
+        } else {
+          init();
+        }
+      }
+
+      disconnectedCallback() {
+        this._destroySwipers();
+        this._initialized = false;
+      }
+
+      _ensureElements() {
+        this._listEl = this.querySelector('.product-accessories-swiper-list');
+        this._thumbsEl = this.querySelector('.product-accessories-swiper-list-thumbs');
+        if (!this._listEl || !this._thumbsEl) return;
+        this._paginationEl = this._listEl.querySelector('.swiper-pagination');
+        this._btnPrev = this._listEl.querySelector('.product-accessories-swiper-button-prev');
+        this._btnNext = this._listEl.querySelector('.product-accessories-swiper-button-next');
+      }
+
+      _initSwipers() {
+        if (!this._listEl || !this._thumbsEl) return;
+
+        this._thumbs = new Swiper(this._thumbsEl, {
+          slidesPerView: 5,
+          spaceBetween: 8,
+          watchSlidesProgress: true,
+          slideToClickedSlide: true,
+          breakpoints: {
+            0: { slidesPerView: 4, spaceBetween: 6 },
+            768: { slidesPerView: 5, spaceBetween: 8 },
+            1024: { slidesPerView: 6, spaceBetween: 10 },
+          },
+        });
 
-  const swiper = new Swiper('.product-accessories-swiper-list', {
-    loop: true,
-    navigation: {
-      nextEl: '.product-accessories-swiper-button-next',
-      prevEl: '.product-accessories-swiper-button-prev',
-      },
-    effect: 'fade',
-    loopedSlides: {{ product.metafields.custom.acc_images.value.size | default: 0 }},
+        const loopedSlides = {{ product.metafields.custom.acc_images.value.size | default: 0 }};
+        this._swiper = new Swiper(this._listEl, {
+          loop: true,
+          navigation: {
+            nextEl: this._btnNext,
+            prevEl: this._btnPrev,
+          },
+          effect: 'fade',
+          loopedSlides: loopedSlides,
           slidesPerView: 1,
           spaceBetween: 10,
           pagination: {
-              el: '.swiper-pagination',
-              clickable: true,
+            el: this._paginationEl,
+            clickable: true,
           },
-    thumbs: { swiper: thumbs },
-    {% comment %} on: {
-      slideChange: function() {
-        const currentIndex = this.activeIndex;
-        console.log('currentIndex:', currentIndex);
-        const pointSwiperIndex = document.querySelectorAll('.product-accessories-point-item').forEach(item => {
-          if (item.dataset.pointSwiperIndex == currentIndex + 1) {
-            item.style.display = 'flex';
-          } else {
-            item.style.display = 'none';
-          }
+          thumbs: { swiper: this._thumbs },
         });
       }
-    } {% endcomment %}
-      });
-  });
 
-  window.accessoriesPointClickHandler = async function(eventOrElement, variantId) {
-    const element =
-      eventOrElement?.currentTarget ||
-      (eventOrElement instanceof Event ? eventOrElement.target : eventOrElement);
+      _destroySwipers() {
+        try {
+          this._swiper && this._swiper.destroy(true, true);
+        } catch (e) {}
+        try {
+          this._thumbs && this._thumbs.destroy(true, true);
+        } catch (e) {}
+        this._swiper = null;
+        this._thumbs = null;
+      }
+    }
 
-    if (!(element instanceof Element)) {
-      console.warn('accessoriesPointClickHandler: expected an Element but got', eventOrElement);
-      return;
+    if (!customElements.get('zz-accessories-preview-swiper')) {
+      customElements.define('zz-accessories-preview-swiper', ZZAccessoriesPreviewSwiper);
     }
 
-    const buyIcon = element.querySelector('.buy-icon');
-    const buyDoneIcon = element.querySelector('.buy-done-icon');
-    if (buyIcon) buyIcon.style.display = 'none';
-    if (buyDoneIcon) buyDoneIcon.style.display = 'block';
-    const data = {
-      items: [
-        {
-          id: variantId,
-          quantity: 1,
-        },
-      ],
-      sections: 'cart-drawer,cart-icon-bubble',
-    };
-    const cart = document.querySelector('cart-drawer');
+    window.accessoriesPointClickHandler = async function(eventOrElement, variantId) {
+      const element =
+        eventOrElement?.currentTarget ||
+        (eventOrElement instanceof Event ? eventOrElement.target : eventOrElement);
 
-    await fetch(`${routes.cart_add_url}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/javascript',
-      },
-      body: JSON.stringify(data),
-    })
-      .then((response) => response.json())
-      .then((response) => {
-        if (response.status) {
-          publish(PUB_SUB_EVENTS.cartError, {
-            source: 'product-form',
-            productVariantId: variantId,
-            errors: response.errors || response.description,
-            message: response.message,
-          });
-        } 
+      if (!(element instanceof Element)) {
+        console.warn('accessoriesPointClickHandler: expected an Element but got', eventOrElement);
+        return;
+      }
+
+      const buyIcon = element.querySelector('.buy-icon');
+      const buyDoneIcon = element.querySelector('.buy-done-icon');
+      if (buyIcon) buyIcon.style.display = 'none';
+      if (buyDoneIcon) buyDoneIcon.style.display = 'block';
+      const data = {
+        items: [
+          {
+            id: variantId,
+            quantity: 1,
+          },
+        ],
+        sections: 'cart-drawer,cart-icon-bubble',
+      };
+      const cart = document.querySelector('cart-drawer');
+
+      await fetch(`${routes.cart_add_url}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/javascript',
+        },
+        body: JSON.stringify(data),
+      })
+        .then((response) => response.json())
+        .then((response) => {
+          if (response.status) {
+            publish(PUB_SUB_EVENTS.cartError, {
+              source: 'product-form',
+              productVariantId: variantId,
+              errors: response.errors || response.description,
+              message: response.message,
+            });
+          }
 
           publish(PUB_SUB_EVENTS.cartUpdate, {
             source: 'product-form',
             productVariantId: variantId,
             cartData: response,
           });
-        cart.renderContents(response, false);
-        zzShowToast('1 item added to Cart', { type: 'success' });
-
-      })
-      .catch((e) => {
-        console.error(e);
-      })
-      .finally(() => {
-        setTimeout(() => {
-          if (buyIcon) buyIcon.style.display = 'block';
-          if (buyDoneIcon) buyDoneIcon.style.display = 'none';
-        }, 3000);
-        if (cart && cart.classList.contains('is-empty'))
-          cart.classList.remove('is-empty');
-      });
-  };
+          cart.renderContents(response, false);
+          zzShowToast('1 item added to Cart', { type: 'success' });
+        })
+        .catch((e) => {
+          console.error(e);
+        })
+        .finally(() => {
+          setTimeout(() => {
+            if (buyIcon) buyIcon.style.display = 'block';
+            if (buyDoneIcon) buyDoneIcon.style.display = 'none';
+          }, 3000);
+          if (cart && cart.classList.contains('is-empty'))
+            cart.classList.remove('is-empty');
+        });
+    };
+  })();
 </script>