zz-shopify-components 0.0.1-beta.1

package/assets/zz-components.js

@@ -0,0 +1,166 @@
+class ZZRadioTabsItem extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    // 创建radio input
+    const groupName =
+      this.closest('zz-radio-tabs')?.getAttribute('name') || 'option';
+    const type =
+      this.closest('zz-radio-tabs')?.getAttribute('type') || 'default';
+    const value = this.getAttribute('value') || '';
+    const slot = this.innerHTML;
+    this.innerHTML = `
+      <label class="zz-radio-tabs-wrapper">
+        <input type="radio" name=${groupName} value=${value}>
+        <div class="zz-radio-tabs-label">
+            ${slot}
+        </div>
+      </label>
+    `;
+  }
+}
+
+/**
+ * type: default, black 两种风格模式
+ */
+class ZZRadioTabs extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    // 获取组件的type属性
+    const type = this.getAttribute('type') || 'default';
+    // 给自己加class
+    this.classList.add('zz-radio-tabs');
+    this.classList.add(`zz-radio-tabs-${type}`);
+  }
+
+  get value() {
+    const selectedRadio = this.querySelector('input[type="radio"]:checked');
+    return selectedRadio?.value;
+  }
+
+  set value(val) {
+    const radio = this.querySelector(`input[type="radio"][value="${val}"]`);
+    if (radio) {
+      radio.checked = true;
+    }
+  }
+}
+
+// 注册自定义元素
+customElements.define('zz-radio-tabs-item', ZZRadioTabsItem);
+customElements.define('zz-radio-tabs', ZZRadioTabs);
+
+// 页面加载完成后执行
+document.addEventListener('DOMContentLoaded', function () {
+  // 点击视频播放/暂停
+  // 在 video 标签上添加 class='click-video-play-pause' 即可
+  (function () {
+    const videoPlayAndPause = document.querySelectorAll(
+      '.click-video-play-pause'
+    );
+    videoPlayAndPause.forEach((video) => {
+      video.classList.remove('video-play-pause');
+      video.addEventListener('click', function () {
+        if (this.paused) {
+          this.play();
+        } else {
+          this.pause();
+        }
+      });
+    });
+  })();
+});
+/**
+ * 视频按钮+弹窗
+ */
+class ZZVideoBtn extends HTMLElement {
+  constructor() {
+    super();
+    this.togglePopup = this.togglePopup.bind(this);
+    this.popup = null;
+  }
+
+  connectedCallback() {
+    this.querySelectorAll('.togglePopup').forEach((el) => {
+      el.addEventListener('click', (event) => {
+        console.log('click');
+        if (event.target.tagName !== 'VIDEO') {
+          this.togglePopup();
+        }
+      });
+    });
+    this.popup = this.querySelector('.popup');
+
+    if (this.popup) {
+      // 将 popup 移动到 body
+      document.body.appendChild(this.popup);
+    } else {
+      console.error('Popup element not found.');
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.popup && document.body.contains(this.popup)) {
+      document.body.removeChild(this.popup); // 清理 popup 元素
+    }
+  }
+
+  togglePopup() {
+    if (!this.popup) return;
+
+    const isHidden = this.popup.classList.contains('!tw-hidden');
+
+    if (isHidden) {
+      this.showPopup();
+    } else {
+      this.hidePopup();
+    }
+  }
+
+  showPopup() {
+    if (!this.popup) return;
+
+    this.popup.classList.remove('!tw-hidden');
+    gsap.fromTo(
+      this.popup,
+      { opacity: 0 },
+      {
+        opacity: 1,
+        duration: 0.3,
+        ease: 'linear',
+        backdropFilter: 'blur(30px)',
+        onComplete: () => {
+          const video = this.popup.querySelector('video');
+          if (video) {
+            video.play();
+          }
+        },
+      }
+    );
+  }
+
+  hidePopup() {
+    if (!this.popup) return;
+
+    gsap.to(this.popup, {
+      opacity: 0,
+      duration: 0.3,
+      ease: 'linear',
+      onComplete: () => {
+        this.popup.classList.add('!tw-hidden');
+        const video = this.popup.querySelector('video');
+        if (video) {
+          video.pause();
+        }
+      },
+    });
+  }
+}
+
+if (!customElements.get('zz-video-button')) {
+  customElements.define('zz-video-button', ZZVideoBtn);
+}

package/blocks/zz-accessories-item.liquid

@@ -0,0 +1,183 @@
+
+
+<style>
+  
+  #shopify-block-{{ block.id }}  {
+    width: 320px;
+    height: fit-content;
+  }
+  #shopify-block-{{ block.id }} .banner-item {
+    position: relative;
+    width: 320px;
+    height: 438px;
+    box-sizing: border-box;
+    background: {{ block.settings.banner_bg_color }};
+  }
+  
+  @media screen and (max-width: 1023px) {
+ 
+    #shopify-block-{{ block.id }}  {
+      width: 100%;
+    }
+    #shopify-block-{{ block.id }} .banner-item {
+      width: 100%;
+      height: auto;
+      
+    }
+ 
+  }
+</style>
+
+{% assign btn_class = 'zz-accessories-item-btn' | append: block.id %}
+
+<div class='banner-item tw-pb-[20px] tw-px-[20px] tw-rounded-[12px] lg:tw-rounded-[16px]'>
+  <div class='max-lg:tw-px-[15px]'>
+    {% render 'zz-img',
+      pc_image: block.settings.image_pc,
+      mb_image: block.settings.image,
+      image_alt: block.settings.slide_title,
+      pc_width: 915,
+      mb_width: 640,
+    %}
+  </div>
+  <div class="lg:tw-h-[110px]">
+    <p 
+      class='slide-title tw-mt-[20px] lg:tw-mt-[30px] tw-mb-[8px] tw-text-[16px] lg:tw-text-[18px] tw-leading-[1.2] tw-text-center tw-font-bold tw-text-black'
+      style='color: {{ block.settings.slide_title_color }};'>
+      {{ block.settings.slide_title }}
+    </p>
+    {% render 'zz-content-text',
+      text: block.settings.slide_content,
+      mb_text: block.settings.slide_content,
+      text_color: block.settings.slide_content_color,
+      pc_font_size: 12,
+      mobile_font_size: 12,
+      pc_text_align: 'center',
+      mobile_text_align: 'center',
+    %}
+  </div>
+  <a
+    class='tw-block {{ btn_class }} tw-mx-auto tw-mt-[30px] tw-px-[28px] lg:tw-px-[12px] tw-w-fit tw-h-[42px] lg:tw-h-[28px] tw-rounded-[3px] tw-cursor-pointer tw-text-white tw-font-medium tw-text-[16px] lg:tw-text-[14px] tw-leading-[42px] lg:tw-leading-[28px] tw-bg-black tw-transition hover:tw-bg-black/80'
+    style='background: {{ block.settings.btn_bg_color }}; color: {{ block.settings.btn_text_color }};hover: color: {{ block.settings.btn_hover_color }};'  
+    href='{{ block.settings.url }}'
+  >
+    {{ block.settings.btn_text }}
+  </a>
+</div>
+
+{% if block.settings.function_type == 'link_map' %}
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const btns = document.querySelectorAll('.{{ btn_class }}')
+      if(btns && btns[0]) {
+        bindSiteJump(btns[0], {{ block.settings.links | json }})
+      }
+
+    })
+  </script>
+{% endif %}
+
+{% schema %}
+{
+  "name": "Accessories Swiper Item",
+  "settings": [
+    {
+      "type": "color",
+      "id": "banner_bg_color",
+      "default": "#F5F5F6",
+      "label": "轮播卡片背景色"
+    },
+    {
+      "type": "image_picker",
+      "id": "image_pc",
+      "label": "Image"
+    },
+    {
+      "type": "image_picker",
+      "id": "image",
+      "label": "Image(mobile)"
+    },
+    {
+      "type": "text",
+      "id": "slide_title",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "slide_title_color",
+      "default": "#000000",
+      "label": "标题颜色"
+    },
+    {
+      "type": "richtext",
+      "id": "slide_content",
+      "label": "内容"
+    },
+    {
+      "type": "color",
+      "id": "slide_content_color",
+      "default": "#170B01",
+      "label": "内容颜色"
+    },
+    {
+      "type": "text",
+      "id": "btn_text",
+      "label": "按钮文字",
+      "default": "Buy Now"
+    },
+    {
+      "type": "color",
+      "id": "btn_bg_color",
+      "default": "#000000",
+      "label": "按钮背景颜色"
+    },
+    {
+      "type": "color",
+      "id": "btn_hover_color",
+      "default": "#000000",
+      "label": "按钮hover颜色"
+    },
+    {
+      "type": "color",
+      "id": "btn_text_color",
+      "default": "#FFFFFF",
+      "label": "按钮文字颜色"
+    },
+    {
+      "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' }}"
+    },
+  ],
+
+  "presets": [
+    {
+      "name": "配件 Item"
+    }
+  ]
+}
+{% endschema %}

package/blocks/zz-accessories-swiper.liquid

@@ -0,0 +1,223 @@
+{% assign block_size = block.blocks.size %}
+{% assign bullets_width_half = block_size
+  | minus: 1
+  | times: 14
+  | plus: 6
+  | divided_by: 2.0
+  | ceil
+%}
+{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
+
+{% assign btn_offset_pc = bullets_width_half | plus: 18 | plus: 48 %}
+
+<style>
+  #shopify-block-{{ block.id }} {
+    width: 100%;
+  }
+  #shopify-block-{{ block.id }}  .zz-accessories-swiper {
+    padding-top: 32px;
+    width: 100%;
+    height: fit-content;
+    background: {{ block.settings.bg_color }};
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
+    width: 320px;
+    height: fit-content;
+  }
+
+  #shopify-block-{{ block.id }} .swiper-button-next,
+  #shopify-block-{{ block.id }} .swiper-button-prev {
+    z-index: 99;
+    top: unset;
+    bottom: 0;
+    width: 48px;
+    height: 48px;
+  }
+  #shopify-block-{{ block.id }} .swiper-button-prev {
+    left: 50%;
+    transform: translate(-{{ btn_offset_pc }}px, 0px);
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next {
+    right: 50%;
+    transform: translate({{ btn_offset_pc }}px, 0px);
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next:after,
+  #shopify-block-{{ block.id }} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{ block.id }} .swiper-button-next.swiper-button-disabled, #shopify-block-{{ block.id }} .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+    bottom: 11px;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 6px;
+    width: 6px;
+    height: 6px;
+    background-color: {{ block.settings.pagination_color }};
+    opacity: 0.5;
+  }
+  #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    opacity: 1;
+  }
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} .zz-accessories-swiper {
+      padding-top: 64px;
+      padding-bottom: 108px;
+    }
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} .zz-accessories-swiper {
+      padding: 0px 20px 60px 20px;
+      box-sizing: border-box;
+    }
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-slide {
+      width: 100%;
+    }
+
+    #shopify-block-{{ block.id }} .swiper-button-next,
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      width: 36px;
+      height: 36px;
+    }
+    #shopify-block-{{ block.id }} .swiper-button-prev {
+      left: 50%;
+      transform: translate(-{{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .swiper-button-next {
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets {
+      bottom: 9px;
+    }
+
+    #shopify-block-{{ block.id }} .zz-accessories-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+    }
+  }
+</style>
+
+  <div
+    class='swiper zz-accessories-swiper'
+    data-id='{{ block.id }}'
+  >
+    <div class='swiper-wrapper'>
+      {% content_for 'blocks' %}
+    </div>
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% if block.settings.prev_icon != blank %}
+        {{
+          block.settings.prev_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'icon-prev' %}
+      {% endif %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% if block.settings.next_icon != blank %}
+        {{
+          block.settings.next_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'icon-next' %}
+      {% endif %}
+    </div>
+
+    <!-- Pagination indicator -->
+    <div class='swiper-pagination'></div>
+  </div>
+
+
+<script>
+  const blockId = '{{ block.id }}';
+  document.addEventListener('DOMContentLoaded', function () {
+    // 轮播图每个 wrapper 之间的间距
+    let isDesktop = window.innerWidth > 1023;
+    
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(`.zz-accessories-swiper[data-id='${blockId}']`);
+    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach(slide => {
+      slide.classList.add('swiper-slide');
+    });
+    setTimeout(() => {
+      const bannerAccessoriesSwiper = new Swiper('.zz-accessories-swiper', {
+        initialSlide: isDesktop ? 1 : 0,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: isDesktop ? 24 : 8,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        effect: 'slide',
+      });
+    }, 200)
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Accessories Swiper Block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#FFFFFF",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#000000",
+      "label": "轮播导航圆圈颜色"
+    },
+   
+    {
+      "type": "image_picker",
+      "id": "prev_icon",
+      "label": "轮播上一张图标"
+    },
+    {
+      "type": "image_picker",
+      "id": "next_icon",
+      "label": "轮播下一张图标"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "zz-accessories-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "配件轮播"
+    }
+  ]
+}
+{% endschema %}