zz-shopify-components 0.12.0 → 0.12.1-beta.1

package/assets/zz-product-buy-now-select.js

@@ -0,0 +1,279 @@
+// 处理产品变体逻辑
+class ProductSelector extends HTMLElement {
+  currentVariantId;
+  options;
+  root;
+  loading = false;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.currentVariantId = JSON.parse(this.dataset.currentVariantId);
+    if (!this.currentVariantId) {
+      throw new Error('选择器未传入变体');
+    }
+    this.options = this.dataset.options;
+    this.init();
+    console.log(
+      'this.options, this.currentVariantId',
+      this.options,
+      this.currentVariantId
+    );
+  }
+  // 初始化 change 事件
+  init() {
+    this.bandOptionsSelector();
+    this.bandVersionSelector();
+    this.bindVersionEvents();
+    this.updatePrice();
+  }
+  bandOptionsSelector() {
+    const options = Array.from(
+      this.getElementsByClassName('product-normal-option')
+    );
+
+    options.forEach((el) => {
+      el.addEventListener('change', () => {
+        const { productUrl, variantId, sectionId } = el.dataset;
+        this.updateVersionSelector({ productUrl, variantId, sectionId });
+        this.updateURL(productUrl, variantId);
+        // 通知care更新
+        const careProducts = document.querySelector('care-product-list');
+        const careDialog = document.querySelector(
+          'product-detail-dialog-hovercare-choose'
+        );
+        if (careDialog) {
+          careDialog.updateSelectProduct();
+        }
+        if (careProducts) {
+          careProducts.updateSelectProduct();
+        }
+      });
+    });
+  }
+  bandVersionSelector() {
+    const versionOptions = Array.from(
+      this.getElementsByClassName('product-version-option')
+    );
+    versionOptions.forEach((el) => {
+      el.addEventListener('change', () => {
+        console.log('version change');
+        const { productUrl, variantId, sectionId, price, before } = el.dataset;
+        // this.currentVariantId = sectionId;
+        this.updateURL(productUrl, variantId);
+      });
+    });
+  }
+  // Version Selector 更新函数
+  updateVersionSelector({ productUrl, variantId, sectionId }) {
+    if (!variantId) {
+      console.warn('无效的变体 ID:', variantId);
+      return;
+    }
+
+    this.fetchAndUpdateDOM(productUrl, variantId, sectionId)
+      .then(() => this.updateURL(productUrl, variantId))
+      .catch((error) => console.error('更新选择器时出错:', error));
+  }
+
+  // Section rendering api 获取变体信息
+  async fetchAndUpdateDOM(productUrl, variantId, sectionId) {
+    try {
+      this.toggleLoading();
+      const currentElement = document.getElementById(
+        'product-version-selector'
+      );
+
+      const response = await fetch(
+        `${productUrl}?variant=${variantId}&section_id=${sectionId}`
+      );
+      if (!response.ok) {
+        throw new Error(`网络错误：${response.status}`);
+      }
+
+      // 更新DOM
+      const responseText = await response.text();
+      const html = new DOMParser().parseFromString(responseText, 'text/html');
+      const newElement = html.getElementById('product-version-selector');
+
+      if (newElement && currentElement) {
+        currentElement.parentNode.replaceChild(newElement, currentElement);
+        this.bandVersionSelector();
+        this.bindVersionEvents();
+      } else {
+        console.warn('无法找到替换的 DOM 元素');
+      }
+    } catch (error) {
+      console.error('fetchAndUpdateDOM 错误:', error);
+    } finally {
+      this.toggleLoading();
+    }
+  }
+
+  // 更新路由参数和产品信息
+  updateURL(productUrl, variantId) {
+    window.history.replaceState({}, '', `${productUrl}?variant=${variantId}`);
+    this.currentVariantId = variantId;
+    this.updatePrice();
+  }
+
+  // 清理事件监听器或其他资源
+  disconnectedCallback() {
+    // const options = this.querySelectorAll('.product-version-option');
+    // options.forEach((el) => {
+    //   el.removeEventListener('click', this.handleOptionClick);
+    // });
+    // console.log('ProductSelector 已被移除');
+  }
+
+  // 更新价格
+  updatePrice() {
+    const bar = document.querySelector('buy-now-bottom-bar');
+    if (bar) {
+      bar.updatePrice();
+    }
+  }
+
+  // loading 状态
+  toggleLoading() {
+    this.loading = !this.loading;
+    // const params = {
+    //   duration: 0.3,
+    //   opacity: this.loading ? 0.2 : 1,
+    //   pointerEvents: this.loading ? 'none' : 'auto',
+    // };
+    // gsap.to('#product-version-selector-container', params);
+    // gsap.set('product-buy-now-selector', {
+    //   pointerEvents: this.loading ? 'none' : 'auto',
+    // });
+  }
+
+  bindVersionEvents() {
+    const versionOptions = Array.from(
+      this.querySelectorAll(".version-selector-item > button.show-detail")
+    );
+    versionOptions.forEach((el) => {
+      el.addEventListener("click", (event) => {
+        // 处理详情按钮点击
+        const detailButton = event.target.closest(".show-detail");
+        if (detailButton) {
+          event.stopPropagation();
+          event.preventDefault();
+
+          const dialog = detailButton
+            .closest(".version-selector-item")
+            ?.querySelector("dialog");
+          if (dialog) dialog.showModal();
+          return;
+        }
+      });
+    });
+  }
+}
+
+class ProductBuyNowCounter extends HTMLElement {
+  constructor() {
+    super();
+    this.input = null;
+    this.min = parseInt(this.getAttribute('min')) || 1;
+    this.max = parseInt(this.getAttribute('max')) || 99;
+  }
+
+  connectedCallback() {
+    this.input = this.querySelector('input');
+    if (this.input) {
+      this.init();
+    }
+  }
+
+  disconnectedCallback() {
+    const minusButton = this.querySelector('.minus');
+    const addButton = this.querySelector('.add');
+    if (minusButton) {
+      minusButton.removeEventListener('click', this.decrementValue);
+    }
+    if (addButton) {
+      addButton.removeEventListener('click', this.incrementValue);
+    }
+    if (this.input) {
+      this.input.removeEventListener('input', this.handleInput);
+      this.input.removeEventListener('blur', this.handleBlur);
+    }
+  }
+
+  init() {
+    const minusButton = this.querySelector('.minus');
+    const addButton = this.querySelector('.add');
+
+    if (minusButton) {
+      minusButton.addEventListener('click', () => this.decrementValue());
+    }
+
+    if (addButton) {
+      addButton.addEventListener('click', () => this.incrementValue());
+    }
+
+    this.input.addEventListener('input', (e) => this.handleInput(e));
+    this.input.addEventListener('blur', () => this.handleBlur());
+  }
+
+  handleInput() {
+    let value = parseInt(this.input.value);
+    if (isNaN(value)) {
+      this.input.value = '';
+    } else {
+      value = Math.min(Math.max(value, this.min), this.max);
+      this.input.value = value;
+    }
+    // this.toggleButtonState();
+  }
+
+  handleBlur() {
+    let value = parseInt(this.input.value);
+    if (isNaN(value) || value < this.min) {
+      this.input.value = this.min;
+    } else if (value > this.max) {
+      this.input.value = this.max;
+    }
+    this.updatePrice();
+    // this.toggleButtonState();
+  }
+
+  decrementValue() {
+    let value = parseInt(this.input.value) || this.min;
+    value = Math.max(value - 1, this.min);
+    this.input.value = value;
+    this.updatePrice();
+    // this.toggleButtonState();
+  }
+
+  incrementValue() {
+    let value = parseInt(this.input.value) || this.min;
+    value = Math.min(value + 1, this.max);
+    this.input.value = value;
+    this.updatePrice();
+    // this.toggleButtonState();
+  }
+
+  toggleButtonState() {
+    const minusButton = this.querySelector('.minus');
+    const addButton = this.querySelector('.add');
+
+    if (minusButton) {
+      minusButton.disabled = parseInt(this.input.value) <= this.min;
+    }
+    if (addButton) {
+      addButton.disabled = parseInt(this.input.value) >= this.max;
+    }
+  }
+
+  updatePrice() {
+    const bar = document.querySelector('buy-now-bottom-bar');
+    if (bar) {
+      bar.updatePrice();
+    }
+  }
+}
+
+customElements.define('product-buy-now-counter', ProductBuyNowCounter);
+customElements.define('product-buy-now-selector', ProductSelector);

package/assets/zz-version-dialog.js

@@ -0,0 +1,114 @@
+class VersionDialog extends HTMLElement {
+  isOpen = false;
+  swiper = null; // swiper实例
+
+  constructor() {
+    super();
+    this.init();
+  }
+
+  init() {
+    const dialog = this.querySelector('dialog');
+    if (dialog) {
+      const observer = new MutationObserver(() => {
+        if (dialog.open) {
+          // 初始化swiper
+          if (!this.swiper) {
+            this.initSwiper();
+          }
+        } else {
+          // 销毁swiper
+          if (this.swiper) {
+            this.destroySwiper();
+          }
+        }
+      });
+
+      // 监听dialog open
+      observer.observe(dialog, { attributes: true });
+
+      // 添加关闭事件监听
+      dialog.addEventListener('close', () => {
+        // 确保在关闭时销毁swiper
+        if (this.swiper) {
+          this.destroySwiper();
+        }
+      });
+
+      // 添加点击backdrop关闭的事件监听
+      dialog.addEventListener('click', (e) => {
+        const dialogDimensions = dialog.getBoundingClientRect();
+        if (
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right ||
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom
+        ) {
+          dialog.close();
+        }
+      });
+    }
+  }
+
+  // 初始化
+  initSwiper() {
+    const swiperContainer = this.querySelector('.swiper');
+    if (swiperContainer) {
+      const slides = swiperContainer.querySelectorAll('.swiper-slide');
+      const imageCount = slides.length;
+
+      this.swiper = new Swiper(swiperContainer, {
+        slidesPerView: 1,
+        spaceBetween: 0,
+        pagination: {
+          el: this.querySelector('.swiper-pagination'),
+          type: 'bullets',
+          clickable: true,
+          dynamicBullets: false,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        effect: 'slide',
+        fadeEffect: {
+          crossFade: true,
+        },
+        loop: imageCount > 1,
+        observer: true,
+        observeParents: true,
+        speed: 500,
+        on: {
+          init: function () {
+            const paginationEl = this.pagination.el;
+            const prevButton = swiperContainer.querySelector(
+              '.swiper-button-prev'
+            );
+            const nextButton = swiperContainer.querySelector(
+              '.swiper-button-next'
+            );
+
+            if (imageCount <= 1) {
+              if (paginationEl) paginationEl.style.display = 'none';
+              if (prevButton) prevButton.style.display = 'none';
+              if (nextButton) nextButton.style.display = 'none';
+            }
+          },
+        },
+      });
+    }
+  }
+
+  // 销毁
+  destroySwiper() {
+    if (this.swiper) {
+      // 完全销毁swiper，包括所有事件监听器和DOM元素
+      this.swiper.destroy(true, true);
+      this.swiper = null;
+    }
+  }
+}
+
+if (!customElements.get('version-dialog')) {
+  customElements.define('version-dialog', VersionDialog);
+}

package/assets/zz-world-video-list.js

@@ -51,17 +51,26 @@ class WorldVideoList extends HTMLElement {
     const videoPageList = this.querySelector('.video-page-list');
     const videoPageLeftArrow = this.querySelector('.video-page-left-arrow');
     const videoPageRightArrow = this.querySelector('.video-page-right-arrow');
+    let swiperIndex = 0;
     // 点击 right 按钮 向左滑动
     videoPageRightArrow.addEventListener('click', () => {
       videoPageList.scrollBy({ left: 400, behavior: 'smooth' });
+      swiperIndex++;
       dataLayer.push({
         event: 'world_video_scroll',
         timestamp: new Date().toISOString(),
       });
+      if (swiperIndex > 0) {
+        videoPageLeftArrow.classList.remove('tw-hidden');
+      }
     });
     // 点击 left 按钮 向右滑动
     videoPageLeftArrow.addEventListener('click', () => {
       videoPageList.scrollBy({ left: -400, behavior: 'smooth' });
+      swiperIndex--;
+      if (swiperIndex === 0) {
+        videoPageLeftArrow.classList.add('tw-hidden');
+      }
     });
   }
   initSwitch() {

package/blocks/snippets-test.liquid

@@ -0,0 +1,19 @@
+{% schema %}
+{
+  "name": "Snippets Test",
+  "settings": [
+  ],
+  "presets": [
+    {
+      "name": "Snippets Test"
+    }
+  ]
+}
+{% endschema %}
+
+
+<div class="tw-flex tw-flex-col tw-gap-4 tw-justify-center tw-items-center">
+
+ <button onclick="zzShowToast('test dfis0o dsjoi  sjdoi jsod jsdo dsoi', {type: 'error'})">test</button>
+ <button onclick="zzShowToast('test dfis0o dsjoi  sjdoi jsod jsdo dsoi josd Judson hjds dsjio dsjo dsj aj ewoi sdjo ds ojds sdjo jaso jo aiji')">test</button>
+</div>

package/blocks/zz-button-v2.liquid

@@ -0,0 +1,243 @@
+{% schema %}
+{
+  "name": "Button v2",
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "按钮文字",
+      "default": "按钮"
+    },
+ 
+    {
+      "type": "select",
+      "id": "function_type",
+      "label": "功能类型",
+      "options": [
+        {
+          "value": "link",
+          "label": "链接"
+        },
+        {
+          "value": "link_map",
+          "label": "多国家映射"
+        },
+      ],
+      "default": "link"
+    },
+    {
+      "type": "url",
+      "id": "url",
+      "label": "按钮链接",
+      "visible_if": "{{ block.settings.function_type == 'link' }}"
+    },
+    {
+      "type": "textarea",
+      "id": "links",
+      "label": "Sites Link Map",
+      "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+      "visible_if": "{{ block.settings.function_type == 'link_map' }}"
+    },
+    {
+      "type": "select",
+      "id": "type",
+      "label": "按钮类型",
+      "options": [
+        {
+          "value": "primary",
+          "label": "primary"
+        },
+        {
+          "value": "default",
+          "label": "default"
+        },
+        {
+          "value": "link",
+          "label": "link"
+        },
+      ],
+      "default": "primary"
+    },
+    {
+      "type": "select",
+      "id": "shape",
+      "label": "按钮形状",
+      "options": [
+        {
+          "value": "default",
+          "label": "default"
+        },
+        {
+          "value": "round",
+          "label": "round"
+        },
+      ],
+      "default": "default"
+    },
+    {
+      "type": "select",
+      "id": "color",
+      "label": "按钮颜色",
+      "options": [
+        {
+          "value": "black",
+          "label": "black"
+        },
+        {
+          "value": "white",
+          "label": "white"
+        },
+        {
+          "value": "orange",
+          "label": "orange"
+        },
+        {
+          "value": "blue",
+          "label": "blue"
+        },
+        {
+          "value": "yellow",
+          "label": "yellow"
+        }
+      ],
+      "default": "black",
+    },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "按钮大小",
+      "options": [
+        {
+          "value": "large",
+          "label": "large"
+        },
+        {
+          "value": "medium",
+          "label": "medium"
+        },
+        {
+          "value": "small",
+          "label": "small"
+        }
+      ],
+      "default": "medium"
+    },
+    {
+      "type": "select",
+      "id": "mobile_width",
+      "label": "移动端按钮宽度",
+      "options": [
+        { "value": "full", "label": "全宽" },
+        { "value": "auto", "label": "自动" }
+      ],
+      "default": "auto"
+    },
+    {
+      "type": "select",
+      "id": "postfix_icon",
+      "label": "后缀图标",
+      "options": [
+        { "value": "none", "label": "不展示" },
+        { "value": "download", "label": "下载" },
+        { "value": "arrow-right", "label": "向右箭头" }
+      ],
+      "default": "none"
+    },
+    {
+      "type": "number",
+      "id": "icon_size",
+      "label": "图标大小(px)",
+      "default": 15
+    },
+    {
+      "type": "number",
+      "id": "icon_left_margin",
+      "label": "图标左边距(px)",
+      "default": 0
+    },
+    {
+      "type": "number",
+      "id": "icon_right_margin",
+      "label": "图标右边距(px)",
+      "default": 0
+    },
+    {
+      "type": "text",
+      "id": "btn_id",
+      "label": "按钮id属性值",
+    },
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "按钮触发modal的id",
+    },
+    {
+      "type": "text",
+      "id": "click_event_class_name",
+      "label": "点击事件统计 classname",
+    },
+  ],
+  "presets": [
+    {
+      "name": "Button v2"
+    },
+    {
+      "name": "按钮 v2"
+    }
+  ]
+}
+{% endschema %}
+
+
+{% assign btn_class = 'zz-button' | append: block.id %}
+
+<style>
+
+  {% if block.settings.mobile_width == 'full' %}
+    @media (max-width: 1024px) {
+      #shopify-block-{{ block.id }} {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  {% endif %}
+</style>
+
+{% render 'zz-button-v2',
+  href: block.settings.url,
+  type: block.settings.type,
+  color: block.settings.color,
+  text: block.settings.text,
+  size: block.settings.size,
+  postfix_icon: block.settings.postfix_icon,
+  icon_size: block.settings.icon_size,
+  icon_left_margin: block.settings.icon_left_margin,
+  icon_right_margin: block.settings.icon_right_margin,
+  width: block.settings.mobile_width,
+  shape: block.settings.shape,
+  class_name: btn_class,
+  btn_id: block.settings.btn_id,
+  modal_id: block.settings.modal_id
+%}
+
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btn = document.getElementsByClassName('{{ btn_class }}')
+      if(btn && btn[0]) {
+        btn[0].addEventListener('click', (event) => {
+          dataLayer.push({
+            event: "{{ block.settings.click_event_class_name }}",
+            timestamp: new Date().toISOString(),
+          });
+        });
+        {% if block.settings.function_type == 'link_map' %}
+          if(window.bindSiteJump) {
+            bindSiteJump(btn[0], {{ block.settings.links | json }})
+          }
+        {% endif %}
+      }
+
+    })
+  </script>