zz-shopify-components 0.24.1-beta.3 → 0.25.0

package/snippets/zz-product-swiper.liquid

@@ -1,248 +0,0 @@
-<zz-product-swiper class=' tw-w-full product-swiper-container tw-h-full tw-relative'>
-  <div class='swiper product-swiper-list tw-w-full tw-h-full tw-relative'>
-    <div class='swiper-wrapper'>
-      {% assign product_images = product.selected_or_first_available_variant.metafields.custom.images.value | default: product.images %}
-      {% for image in product_images %}
-        <div class='swiper-slide tw-flex tw-justify-center'>
-          {% assign fetchpriority = 'auto' %}
-          {% if forloop.first %}
-            {% assign fetchpriority = 'high' %}
-          {% endif %}
-          {{
-            image
-            | image_url: width: 3000
-            | image_tag:
-              loading: 'lazy',
-              class: 'tw-w-auto tw-h-full tw-max-w-full tw-object-cover tw-m-auto',
-              sizes: '(min-width: 750px) 700px, calc(100vw - 30px)',
-              widths: '3000, 4000, 5000',
-              fetchpriority: fetchpriority
-          }}
-        </div>
-      {% endfor %}
-    </div>
-    <div class='swiper-pagination'></div>
-    <div class='product-swiper-button-prev'>
-      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'dark' %}
-    </div>
-    <div class='product-swiper-button-next'>
-      {% render 'zz-prev-next-btn', type: 'next', color_type: 'dark' %}
-    </div>
-  </div>
-
-  <div class=' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] '>
-    <div class='swiper product-swiper-list-thumbs tw-opacity-0'>
-      <div class='swiper-wrapper tw-flex tw-justify-center'>
-        {% for image in product_images %}
-          <div class='swiper-slide !tw-w-auto tw-opacity-30'>
-            {{
-              image
-              | image_url: width: 200
-              | image_tag:
-                loading: 'lazy',
-                class: 'lg:tw-w-[50px]  tw-w-[40px] tw-aspect-square tw-object-cover tw-rounded-[6px] ',
-                sizes: '(min-width: 750px) 50px, calc(100vw - 30px)',
-                widths: '50, 100, 150'
-            }}
-          </div>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
-</zz-product-swiper>
-
-<style>
-  .product-swiper-container .swiper-pagination {
-    --swiper-pagination-color: black;
-    --swiper-pagination-bottom: 10px;
-  }
-  .product-swiper-container .swiper-pagination,
-  .product-swiper-list-thumbs {
-    transition: opacity 0.2s ease-in-out;
-  }
-  .product-swiper-list-thumbs {
-    transform: translateY(12px) scale(0.96);
-    transform-origin: bottom center;
-    will-change: opacity, transform;
-    transition:
-      opacity 0.25s ease,
-      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-  }
-  .product-swiper-container:hover .product-swiper-list-thumbs {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  .product-swiper-container:hover .swiper-pagination {
-    display: none;
-    transition: none;
-  }
-
-  .product-swiper-list-thumbs .swiper-slide {
-    border: 1px solid black;
-    border-radius: 6px;
-  }
-
-  .product-swiper-list-thumbs .swiper-slide-thumb-active {
-    opacity: 1;
-    border: 1px solid black;
-    border-radius: 6px;
-  }
-  .product-swiper-button-prev,
-  .product-swiper-button-next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 10;
-    cursor: pointer;
-    pointer-events: auto;
-  }
-  @media screen and (max-width: 1024px) {
-    .product-swiper-button-prev { display: none; }
-    .product-swiper-button-next { display: none; }
-  }
-  .product-swiper-button-prev { left: 20px; }
-  .product-swiper-button-next { right: 20px; }
-</style>
-<script>
-  ;(() => {
-    class ZZProductSwiper extends HTMLElement {
-      constructor() {
-        super();
-        this._swiper = null;
-        this._thumbs = null;
-        this._listEl = null;
-        this._thumbsEl = null;
-        this._paginationEl = null;
-        this._btnPrev = null;
-        this._btnNext = null;
-      }
-
-      connectedCallback() {
-        console.log(typeof Swiper,121212121);
-        if (typeof Swiper !== 'undefined') {
-          this._ensureStructure();
-          this._initSwipers();
-        } else {
-        document.addEventListener('DOMContentLoaded', () => {
-          this._ensureStructure();
-          this._initSwipers();
-        });}
-      }
-
-      disconnectedCallback() {
-        this._destroySwipers();
-      }
-
-      setImages(imageUrls) {
-        const newImages = {{product.selected_or_first_available_variant.metafields.custom.images.value | json}};
-        console.log(newImages);
-        if (!Array.isArray(imageUrls)) return;
-        this._rebuildSlides(imageUrls);
-        this._reinitSwipers(imageUrls.length);
-      }
-
-      _ensureStructure() {
-        this._listEl = this.querySelector('.product-swiper-list');
-        if (!this._listEl) {
-          const list = document.createElement('div');
-          list.className = 'swiper product-swiper-list tw-w-full tw-h-full tw-relative';
-          list.innerHTML = `
-            <div class="swiper-wrapper"></div>
-            <div class="swiper-pagination"></div>
-            <div class="product-swiper-button-prev"></div>
-            <div class="product-swiper-button-next"></div>
-          `;
-          this.appendChild(list);
-          this._listEl = list;
-        }
-        this._thumbsEl = this.querySelector('.product-swiper-list-thumbs');
-        if (!this._thumbsEl) {
-          const wrap = document.createElement('div');
-          wrap.className = ' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] ';
-          const thumbs = document.createElement('div');
-          thumbs.className = 'swiper product-swiper-list-thumbs tw-opacity-0';
-          thumbs.innerHTML = `<div class="swiper-wrapper tw-flex tw-justify-center"></div>`;
-          wrap.appendChild(thumbs);
-          this.appendChild(wrap);
-          this._thumbsEl = thumbs;
-        }
-        this._paginationEl = this._listEl.querySelector('.swiper-pagination');
-        this._btnPrev = this._listEl.querySelector('.product-swiper-button-prev');
-        this._btnNext = this._listEl.querySelector('.product-swiper-button-next');
-      }
-
-      _initSwipers() {
-        if (typeof Swiper === 'undefined') return;
-        // Thumbs
-        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 }
-          }
-        });
-        // Main
-        const initialCount = this._listEl.querySelectorAll('.swiper-slide').length;
-        this._swiper = new Swiper(this._listEl, {
-          loop: true,
-          effect: 'slide',
-          loopedSlides: initialCount,
-          slidesPerView: 1,
-          spaceBetween: 10,
-          pagination: {
-            el: this._paginationEl,
-            clickable: true
-          },
-          navigation: {
-            nextEl: this._btnNext,
-            prevEl: this._btnPrev
-          },
-          thumbs: { swiper: this._thumbs }
-        });
-      }
-
-      _destroySwipers() {
-        try { this._swiper && this._swiper.destroy(true, true); } catch(_) {}
-        try { this._thumbs && this._thumbs.destroy(true, true); } catch(_) {}
-        this._swiper = null;
-        this._thumbs = null;
-      }
-
-      _rebuildSlides(imageUrls) {
-        const listWrapper = this._listEl.querySelector('.swiper-wrapper');
-        const thumbsWrapper = this._thumbsEl.querySelector('.swiper-wrapper');
-        if (!listWrapper || !thumbsWrapper) return;
-        // Clear
-        listWrapper.innerHTML = '';
-        thumbsWrapper.innerHTML = '';
-        // Build
-        imageUrls.forEach((url) => {
-          const slide = document.createElement('div');
-          slide.className = 'swiper-slide tw-flex tw-justify-center';
-          slide.innerHTML =
-            `<img src="${url}" alt="product image" class="tw-w-auto tw-h-full tw-max-w-full tw-object-cover tw-m-auto">`;
-          listWrapper.appendChild(slide);
-
-          const tSlide = document.createElement('div');
-          tSlide.className = 'swiper-slide !tw-w-auto tw-opacity-30';
-          tSlide.innerHTML =
-            `<img src="${url}" alt="thumb" class="lg:tw-w-[50px]  tw-w-[40px] tw-aspect-square tw-object-cover tw-rounded-[6px]">`;
-          thumbsWrapper.appendChild(tSlide);
-        });
-      }
-
-      _reinitSwipers(count) {
-        this._destroySwipers();
-        this._initSwipers();
-      }
-    }
-
-    if (!customElements.get('zz-product-swiper')) {
-      customElements.define('zz-product-swiper', ZZProductSwiper);
-    }
-  })();
-</script>

package/snippets/zz-product-video.liquid

@@ -1,109 +0,0 @@
-{%- assign intro_video = product.metafields.custom.intro_video.value -%}
-{%- assign livestream_video = product.metafields.custom.livestream_video.value -%}
-
-<product-video-tab class=" tw-w-full tw-h-full ">
-  <video data-type="intro" src='{{ intro_video.sources[0].url }}' poster='{{intro_video.preview_image | image_url: width: 1000}}' controls class=" tw-w-full tw-h-full tw-bg-black tw-hidden"></video>
-  <video data-type="livestream" src='{{ livestream_video.sources[0].url }}' poster='{{intro_video.preview_image | image_url: width: 1000}}' controls class=" tw-w-full tw-h-full tw-bg-black tw-hidden"></video>
-   <div class=" product-video-tabs tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-[30px] tw-bg-white ">
-    <div class=" tw-grid tw-grid-cols-2 tw-relative">
-        <button type="button" class="product-video-tab-item" data-tab="intro">Introduction</button>
-        <button type="button" class="product-video-tab-item" data-tab="livestream">Livestream</button>
-        <div class="product-video-tab-slider tw-z-1 tw-rounded-full !tw-block tw-absolute tw-top-0  tw-w-1/2 tw-h-full tw-bg-white"></div>
-    </div>
-  </div>
-</product-video-tab>
-
-
-<style>
-    .product-video-tabs {
-        border-radius: 999px;
-        background-color: rgba(255, 255, 255, 0.3);
-        backdrop-filter: blur(10px);
-    }
-    .product-video-tab-item {
-        color: #fff;
-        z-index: 10;
-        text-align: center;
-        padding: 6px 20px;
-        cursor: pointer;
-        font-size: 16px;
-        transition: all 0.3s ease;
-
-    }
-    @media screen and (max-width: 1024px) {
-      .product-video-tab-item {
-        padding: 4px 12px;
-        font-size: 10px;
-      }
-    }
-    .product-video-tab-slider {
-        transition: all 0.3s ease;
-    }
-</style>
-
-<script>
-  (() => {
-    class ProductVideoTab extends HTMLElement {
-      constructor() {
-        super();
-        this.currentTab = 'intro';
-      }
-
-      connectedCallback() {
-        this.cacheDom();
-        if (!this.buttons.length || !this.videos.length) return;
-        this.changeTab(true);
-        this.attachEvents();
-      }
-
-      cacheDom() {
-        this.buttons = Array.from(this.querySelectorAll('.product-video-tab-item'));
-        this.videos = Array.from(this.querySelectorAll('video[data-type]'));
-        this.slider = this.querySelector('.product-video-tab-slider');
-      }
-
-      attachEvents() {
-        this.buttons.forEach(button => {
-          button.addEventListener('click', () => {
-            const nextTab = button.dataset.tab;
-            if (!nextTab || nextTab === this.currentTab) return;
-            this.currentTab = nextTab;
-            this.changeTab();
-          });
-        });
-      }
-
-      changeTab(isInitial = false) {
-        this.videos.forEach(video => {
-          const isActive = video.dataset.type === this.currentTab;
-          video.style.display = isActive ? 'block' : 'none';
-          if (isActive) {
-            const playPromise = video.play();
-            if (playPromise && typeof playPromise.catch === 'function' && !isInitial) {
-              playPromise.catch(() => {});
-            }
-          } else {
-            video.pause();
-          }
-        });
-
-        this.buttons.forEach(button => {
-          const isActive = button.dataset.tab === this.currentTab;
-          button.style.color = isActive ? '#000' : '#fff';
-        });
-
-        if (!this.slider) return;
-        if (this.currentTab === 'intro') {
-          this.slider.style.left = '0';
-          this.slider.style.right = 'auto';
-        } else {
-          this.slider.style.right = '0';
-          this.slider.style.left = 'auto';
-        }
-      }
-    }
-
-    customElements.define('product-video-tab', ProductVideoTab);
-  })();
-
-</script>