zz-shopify-components 0.0.1-beta.1

package/blocks/zz-video-swiper-perview.liquid

@@ -0,0 +1,582 @@
+{% 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 %}
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{block.id}} .swiper-button-next,
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    top: 0;
+    width: 48px;
+    height: 48px;
+  }
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    left: unset;
+    right: 50%;
+    transform: translate(-46.4063vw, 23.4375vw);
+  }
+  #shopify-block-{{block.id}} .swiper-button-next {
+    right: unset;
+    left: 50%;
+    transform: translate(46.4063vw, 23.4375vw);
+  }
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-section-{{section.id}} .swiper-button-next.swiper-button-disabled, #shopify-section-{{section.id}} .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+  }
+
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 8px;
+    width: 48px;
+    height: 4px;
+    border-radius: 3px;
+    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    position: relative;
+    width: 120px;
+    {% if block.settings.if_autoplay == false %}
+     background: #fff;
+    {% endif %}
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+    display: block;
+    position: absolute;
+    width:0;
+    height: 4px;
+    left: 0;
+    top: 0;
+    background-color: {{ block.settings.pagination_color }};
+    border-radius: 3px;
+  }
+  #shopify-block-{{block.id}} .swiper-slide-active .active-box-content {
+    display: block !important;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview {
+      padding-bottom: 40px;
+    }
+
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
+      display: none;
+    }
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      z-index: 99;
+      top: unset;
+      bottom: 0;
+      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 {
+      left: unset;
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+      background-color: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+      width: 6px;
+      background-color: {{ block.settings.mb_pagination_color }};
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} .content-title-h2 {
+      font-size: 60px;
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
+      {% if block.settings.has_title_and_content %}
+        bottom: 220px;
+      {% else %}
+        bottom: 21px;
+      {% endif %}
+    }
+    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+      opacity: 0;
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: calc(50% - 30px);
+      top: 0;
+      width: 83.3594vw;
+      height: 46.875vw;
+      transform: translateX(-150%);
+      z-index: 2;
+      border-radius: 16px;
+      background: {{ block.settings.gradient_color_left }};
+    }
+
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: calc(50% - 30px);
+      top: 0;
+      width: 83.3594vw;
+      height: 46.875vw;
+      transform: translateX(150%);
+      z-index: 2;
+      border-radius: 16px;
+      background: {{ block.settings.gradient_color_right }};
+    }
+
+
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::before,
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
+      width: 1067px;
+      height: 600px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      transform: translate(-594px, 300px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      transform: translate(594px, 300px);
+    }
+
+  }
+</style>
+
+<div
+  class='zz-video-swiper-preview zz-video-swiper-preview-{{ 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 %}'>
+    <span class='lg:tw-hidden'>
+      {% 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 'zz-prev-next-btn',
+          type: 'prev',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'light' %}
+    </span>
+  </div>
+  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    <span class='lg:tw-hidden'>
+      {% 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 'zz-prev-next-btn',
+          type: 'next',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-btn', type: 'next', color_type: 'light' %}
+    </span>
+  </div>
+
+  <!-- Pagination indicator -->
+  <div class='swiper-pagination'></div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const swiperClassName = '.zz-video-swiper-preview-{{ block.id }}';
+    let isDesktop = window.innerWidth > 1023;
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(swiperClassName);
+    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');
+    });
+    let progressInterval = null;
+    let progressTimer = null;
+
+    const prevSwiper = new Swiper(swiperClassName, {
+      {% if block.settings.if_loop == true %}
+      loop: true,
+      {% endif %}
+      slidesPerView: 'auto',
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 30 : 8,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+          <span class="${className}">
+            <span class="progress-line"></span>
+          </span>`;
+        },
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          if (progressInterval) {
+            clearInterval(progressInterval);
+          }
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+          }
+        },
+        slideChange: function () {
+          if (isDesktop) {
+            const block = document.getElementById('shopify-block-{{block.id}}');
+            block
+              .querySelectorAll('.swiper-pagination-bullet')
+              .forEach((bullet) => {
+                const progressBar = bullet.querySelector('.progress-line');
+                progressBar.style.transition = 'none';
+                progressBar.style.width = '0';
+              });
+          }
+        },
+      },
+    });
+
+    // 使用 Intersection Observer 监听 swiper-wrapper 的可见性
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // 当 swiper-wrapper 第一次出现在视口中时执行
+            setTimeout(() => {
+              handleVideoOnSlideChange();
+            }, 200);
+            // 执行一次后取消观察
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.2, // 当 20% 的元素可见时触发
+      }
+    );
+
+    if (swiperWrapper) {
+      observer.observe(swiperWrapper);
+    }
+
+    function getVisibleDisplayMedias(container) {
+      const videos = container.querySelectorAll('video');
+      const video = Array.from(videos).find((video) => {
+        const style = window.getComputedStyle(video);
+        return style.display !== 'none';
+      });
+      if (video) {
+        return {
+          video,
+          type: 'video',
+        };
+      } else {
+        const images = container.querySelectorAll('img');
+        const image = Array.from(images).find((image) => {
+          const style = window.getComputedStyle(image);
+          return style.display !== 'none';
+        });
+        if (image) {
+          return {
+            image,
+            type: 'image',
+          };
+        }
+      }
+      return null;
+    }
+    const endedHandler = function () {
+
+      if (prevSwiper.isEnd) {
+        prevSwiper.slideTo(0);
+      } else {
+        prevSwiper.slideNext();
+      }
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+      this.removeEventListener('ended', endedHandler);
+    };
+
+    function updataMediaProgress(type, videoDom) {
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const activeBullet = block.querySelector(
+        '.swiper-pagination-bullet-active'
+      );
+      const progressBar = activeBullet.querySelector('.progress-line');
+      if (progressBar) {
+        if (progressInterval) {
+          clearInterval(progressInterval);
+        }
+        if (progressTimer) {
+          clearTimeout(progressTimer);
+        }
+        if (type === 'video') {
+          // 添加新的事件监听器
+          if (isDesktop) {
+            progressInterval = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.transition = '0.2s';
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+          }
+
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          if (isDesktop) {
+            progressBar.style.transition = '10s linear';
+            progressBar.style.width = '100%';
+          }
+          progressTimer = setTimeout(() => {
+            if (prevSwiper.isEnd) {
+              prevSwiper.slideTo(0);
+            } else {
+              prevSwiper.slideNext();
+            }
+          }, 10000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      // 暂停所有视频
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const allvideo = block.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = block.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      // 重置进度条
+      if (isDesktop) {
+        const activeBullet = block.querySelector(
+          '.swiper-pagination-bullet-active'
+        );
+        const progressBar = activeBullet.querySelector('.progress-line');
+        if (progressBar) {
+          progressBar.style.transition = 'none';
+          progressBar.style.width = '0';
+        }
+      }
+      if (media.type === 'video') {
+        allvideo.forEach((item) => {
+          if (item === media.video) {
+            media.video.currentTime = 0;
+            if (media.video.paused) {
+              media.video.play();
+            }
+
+            if('{{ block.settings.if_autoplay }}' == 'true') {
+              updataMediaProgress('video', media.video);
+            }
+          } else {
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        if('{{ block.settings.if_autoplay }}' == 'true') {
+          updataMediaProgress('image', media.image);
+        }
+        allvideo.forEach((item) => {
+          item.pause();
+        });
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Video Swiper Preview",
+  "class": "zz-video-swiper-preview-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "color",
+      "id": "mb_pagination_color",
+      "default": "#000000",
+      "label": "移动端轮播导航圆圈颜色"
+    },
+    {
+      "type": "checkbox",
+      "id": "if_loop",
+      "label": "是否循环播放",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "if_autoplay",
+      "label": "是否自动轮播",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "has_gradient",
+      "label": "是否有左右渐变色",
+      "default": false
+    },
+    {
+      "type": "text",
+      "id": "gradient_color_left",
+      "label": "渐变色左边颜色",
+      "default": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+      "visible_if": "{{ block.settings.has_gradient == true }}"
+    },
+    {
+      "type": "text",
+      "id": "gradient_color_right",
+      "label": "渐变色右边颜色",
+      "default": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+      "visible_if": "{{ block.settings.has_gradient == true }}"
+    },
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "dark"
+    },
+    {
+      "type": "image_picker",
+      "id": "prev_icon",
+      "label": "轮播上一张图标 Mobile"
+    },
+    {
+      "type": "image_picker",
+      "id": "next_icon",
+      "label": "轮播下一张图标 Mobile"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_title_and_content",
+      "label": "是否有标题与内容",
+      "default": true
+    }
+  ],
+  "blocks": [
+    {
+      "type": "zz-video-swiper-perview-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "可预览轮播图",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "mb_pagination_color": "#000000",
+        "if_loop": false,
+        "if_autoplay": false,
+        "has_gradient": true,
+        "gradient_color_left": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+        "gradient_color_right": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+        "prev_next_type": "dark",
+        "has_title_and_content": true
+      },
+      "blocks": [
+        {
+          "type": "zz-video-swiper-perview-item",
+          "settings": {
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
+            "has_title_and_content": true,
+            "heading": "Item Name",
+            "title_color": "#333232",
+            "row_content": "<p>Description set here, Description set here.</p>",
+            "content_color": "#5d544c",
+          },
+        }, 
+        {
+          "type": "zz-video-swiper-perview-item",
+          "settings": {
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
+            "has_title_and_content": true,
+            "heading": "Item Name",
+            "title_color": "#333232",
+            "row_content": "<p>Description set here, Description set here.</p>",
+            "content_color": "#5d544c",
+          },
+        
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/component.config.json

@@ -0,0 +1,4 @@
+{
+    
+}
+  

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "zz-shopify-components",
+  "version": "0.0.1-beta.1",
+  "description": "Reusable Shopify components for theme projects",
+  "keywords": ["shopify", "theme", "components"],
+  "license": "CC BY-NC-ND",
+  "bin": {
+    "sync-components-cli": "./scripts/postinstall.js"
+  },
+  "scripts": {
+    "dev": "concurrently  -c \"auto\" \"npm:dev:*\"",
+    "dev:tailwind": "npx tailwindcss -i ./style.css -o ./assets/tailwind.css --watch",
+    "dev:shopify": "shopify theme dev --environment fake-us --error-overlay silent",
+    "postinstall": "node scripts/postinstall.js"
+  },
+  "devDependencies": {
+    "@shopify/prettier-plugin-liquid": "^1.5.0",
+    "concurrently": "^9.0.0",
+    "daisyui": "^4.12.23",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.10"
+  }
+}

package/scripts/postinstall-v2.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const fse = require('fs-extra');
+
+const COMPONENT_DIRS = ['sections', 'blocks', 'snippets', 'assets', 'locales'];
+const ROOT_DIR = path.resolve(__dirname); // 组件库自身
+const TARGET_DIR = process.cwd(); // 使用组件库的项目目录
+
+// 读取 ignore 配置
+let ignoreList = [];
+const configPath = path.join(ROOT_DIR, 'component.config.json');
+
+if (fs.existsSync(configPath)) {
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+    ignoreList = config.ignore || [];
+  } catch (e) {
+    console.warn('[postinstall] Failed to parse component.config.json', e);
+  }
+}
+
+// 是否应忽略某个文件
+const shouldIgnore = (relativePath) => {
+  return ignoreList.includes(relativePath.replace(/\\/g, '/'));
+};
+
+// 拷贝文件逻辑
+COMPONENT_DIRS.forEach((dirName) => {
+  const sourceDir = path.join(ROOT_DIR, dirName);
+  const targetDir = path.join(TARGET_DIR, dirName);
+
+  if (!fs.existsSync(sourceDir)) return;
+
+  fse.readdirSync(sourceDir).forEach((file) => {
+    const relPath = `${dirName}/${file}`;
+    if (shouldIgnore(relPath)) {
+      console.log(`[postinstall] Ignored: ${relPath}`);
+      return;
+    }
+
+    const src = path.join(sourceDir, file);
+    const dest = path.join(targetDir, file);
+    fse.copySync(src, dest, { overwrite: true });
+    console.log(`[postinstall] Copied: ${relPath}`);
+  });
+});

package/scripts/postinstall.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+console.log('Running postinstall...');
+const fs = require('fs');
+const path = require('path');
+
+const PACKAGE_ROOT = path.resolve(__dirname, '..');
+const PROJECT_ROOT = process.cwd();
+
+const folders = ['sections', 'blocks', 'snippets', 'assets', 'locales'];
+
+function copyDir(src, dest) {
+  if (!fs.existsSync(src)) return;
+
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const items = fs.readdirSync(src);
+  for (const item of items) {
+    const srcPath = path.join(src, item);
+    const destPath = path.join(dest, item);
+    const stat = fs.statSync(srcPath);
+
+    if (stat.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath); // 覆盖
+      console.log(`✅ Copied: ${path.relative(PROJECT_ROOT, destPath)}`);
+    }
+  }
+}
+
+console.log('\n🧩 [component-lib] Start syncing components to project...');
+for (const folder of folders) {
+  const from = path.join(PACKAGE_ROOT, folder);
+  const to = path.join(PROJECT_ROOT, folder);
+  copyDir(from, to);
+}
+console.log('🎉 [component-lib] Sync complete.\n');