zz-shopify-components 0.25.0 → 0.25.1-beta.0

package/snippets/zz-product-swiper.liquid

@@ -0,0 +1,252 @@
+<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-blur-icon', type: 'prev', %}
+    </div>
+    <div class='product-swiper-button-next'>
+      {% render 'zz-prev-next-blur-icon', type: 'next' %}
+    </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-[40px]  tw-w-[30px] 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>
+  zz-product-swiper .product-swiper-button-prev path,
+  zz-product-swiper .product-swiper-button-next path {
+    fill: white;
+  }
+  .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

@@ -0,0 +1,240 @@
+{%- assign intro_video = product.metafields.custom.intro_video.value -%}
+{%- assign livestream_id = product.metafields.custom.livestream_id.value -%}
+{%- assign livestream_video = product.metafields.custom.livestream_video.value -%}
+<script
+  async
+  type='text/javascript'
+  src='//asset.fwcdn3.com/js/integrations/shopify.js'
+></script>
+<script
+  async
+  type='text/javascript'
+  src='//asset.fwcdn3.com/js/fwn-async.js'
+></script>
+<product-video-tab
+  class=' tw-w-full tw-h-full '
+  {%- if intro_video -%}
+    data-default-tab='intro'
+  {%- elsif livestream_video -%}
+    data-default-tab='livestream'
+  {%- endif -%}
+>
+  {%- if intro_video
+    and intro_video.sources
+    and intro_video.sources.size > 0
+  -%}
+    <video
+      id='product-video-intro-{{ product.id }}'
+      data-type='intro'
+      src='{{ intro_video.sources[0].url }}'
+      poster='{{ intro_video.preview_image | image_url: width: 1000 }}'
+      controls
+      playsinline
+      muted
+      preload='metadata'
+      class=' tw-w-full tw-h-full tw-bg-black '
+    ></video>
+  {%- endif -%}
+
+  {%- if livestream_id -%}
+    <div
+      id='firework-video-{{ product.id }}'
+      data-type='livestream'
+      class="tw-w-full tw-h-full tw-bg-black tw-relative 2xl:tw-py-[84px] lg:tw-py-[64px] lg:tw-px-[20px]"
+      role='tabpanel'
+      aria-labelledby='product-video-tab-livestream-{{ product.id }}'
+    >
+      <fw-storyblock
+        channel='firework'
+        playlist='{{ livestream_id  }}'
+        player_minimize='false' 
+        autoplay='true'
+        style=" height: 100%; width: 100%; border-radius: 0px;"
+      >
+      </fw-storyblock>
+    </div>
+  {% elsif livestream_video %}
+    <video
+      id='product-video-intro-{{ product.id }}'
+      role='tabpanel'
+      aria-labelledby='product-video-tab-livestream-{{ product.id }}'
+      data-type='livestream'
+      src='{{ livestream_video.sources[0].url }}'
+      poster='{{ livestream_video.preview_image | image_url: width: 1000 }}'
+      controls
+      playsinline
+      muted
+      preload='metadata'
+      class=' tw-w-full tw-h-full tw-bg-black '
+    ></video>
+  {%- endif -%}
+
+  {%- assign tabs_count = 0 -%}
+  {%- if intro_video
+    and intro_video.sources
+    and intro_video.sources.size > 0
+  -%}
+    {%- assign tabs_count = tabs_count | plus: 1 -%}
+  {%- endif -%}
+  {%- if livestream_video -%}
+    {%- assign tabs_count = tabs_count | plus: 1 -%}
+  {%- endif -%}
+
+  {%- if tabs_count > 1 -%}
+    <div
+      class=' product-video-tabs tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-[30px] tw-bg-white '
+      role='tablist'
+      aria-label='Product video tabs'
+    >
+      <div class=' tw-grid tw-grid-cols-2 tw-relative'>
+        {%- if intro_video
+          and intro_video.sources
+          and intro_video.sources.size > 0
+        -%}
+          <button
+            type='button'
+            id='product-video-tab-intro-{{ product.id }}'
+            class='product-video-tab-item'
+            data-tab='intro'
+            role='tab'
+            aria-controls='product-video-intro-{{ product.id }}'
+            aria-selected='true'
+          >
+            Introduction
+          </button>
+        {%- endif -%}
+        {%- if livestream_video -%}
+          <button
+            type='button'
+            id='product-video-tab-livestream-{{ product.id }}'
+            class='product-video-tab-item'
+            data-tab='livestream'
+            role='tab'
+            aria-controls='firework-video-{{ product.id }}'
+            aria-selected='false'
+          >
+            Livestream
+          </button>
+        {%- endif -%}
+        <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>
+  {%- endif -%}
+</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: transform 0.3s ease;
+  }
+
+  #firework-video-{{ product.id }} .storyblock-scope {
+    border-radius: 0px;
+    height: 100% !important;
+  }
+</style>
+
+<script>
+  (() => {
+    class ProductVideoTab extends HTMLElement {
+      constructor() {
+        super();
+        this.currentTab = this.dataset.defaultTab || 'intro';
+      }
+
+      connectedCallback() {
+        this.cacheDom();
+        if (!this.panels.length) return;
+        if (this.panels.length < 2 && this.tabsContainer) {
+          this.tabsContainer.style.display = 'none';
+        }
+        this.changeTab(true);
+        this.attachEvents();
+      }
+
+      cacheDom() {
+        this.tabsContainer = this.querySelector('.product-video-tabs');
+        this.buttons = Array.from(
+          this.querySelectorAll('.product-video-tab-item')
+        );
+        this.panels = Array.from(this.querySelectorAll('[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();
+          });
+        });
+      }
+
+      isMedia(el) {
+        return el && (el.tagName === 'VIDEO' || el.tagName === 'AUDIO');
+      }
+
+      changeTab(isInitial = false) {
+        this.panels.forEach((panel) => {
+          const isActive = panel.dataset.type === this.currentTab;
+          panel.style.display = isActive ? 'block' : 'none';
+          if (this.isMedia(panel)) {
+            try {
+              if (isActive) {
+                panel.muted = true;
+                const playPromise = panel.play && panel.play();
+                if (
+                  playPromise &&
+                  typeof playPromise.catch === 'function' &&
+                  !isInitial
+                ) {
+                  playPromise.catch(() => {});
+                }
+              } else {
+                panel.pause && panel.pause();
+              }
+            } catch (e) {}
+          }
+        });
+
+        this.buttons.forEach((button) => {
+          const isActive = button.dataset.tab === this.currentTab;
+          button.style.color = isActive ? '#000' : '#fff';
+          button.setAttribute('aria-selected', isActive ? 'true' : 'false');
+        });
+
+        if (!this.slider) return;
+        if (this.currentTab === 'intro') {
+          this.slider.style.transform = 'translateX(0%)';
+        } else {
+          this.slider.style.transform = 'translateX(100%)';
+        }
+      }
+    }
+
+    customElements.define('product-video-tab', ProductVideoTab);
+  })();
+</script>