zz-shopify-components 0.0.1-beta.1

package/snippets/zz-video-button.liquid

@@ -0,0 +1,55 @@
+
+{% comment %} 
+ video: 视频
+ poster: 封面
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+<zz-video-button>
+
+  {% assign btn_class_name = class_name  | append: ' togglePopup' %}
+  {% render 'zz-button',
+      type: 'default',
+      color: color,
+      text: text,
+      size: size,
+      backdrop_filter: true,
+      class_name: btn_class_name,
+      icon: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.635 6.42979C14.5112 6.91507 14.5112 8.08492 13.635 8.57021L6.84517 12.331C5.94149 12.8315 4.79058 12.232 4.79058 11.2608L4.79058 3.73925C4.79058 2.768 5.94148 2.16851 6.84517 2.66904L13.635 6.42979Z" fill="white"/>
+      </svg>
+      '
+    %}
+    
+      <div
+        class='togglePopup popup tw-flex !tw-hidden tw-bg-[rgba(0,0,0,0.9)] tw-items-center tw-justify-center tw-fixed tw-top-0 tw-left-0 tw-right-0 tw-bottom-0 tw-z-[999] tw-overflow-hidden'
+      >
+        <div class="tw-max-w-[960px]">
+          {% render 'zz-video',
+            pc_video: video,
+            pc_poster: poster,
+            lazy: false,
+            class: ' tw-w-full tw-h-auto',
+            autoplay: false,
+            loop: true,
+          %}
+  
+        </div>
+          
+      </div>
+    </zz-video-button>
+    

package/snippets/zz-video-md.liquid

@@ -0,0 +1,117 @@
+{% comment %}
+  pc_video: 视频地址
+  pc_poster: 视频封面
+  mb_video: 视频地址
+  mb_poster: 视频封面
+  lazy: 是否懒加载
+  pc_posterWidth: 视频封面宽度
+  mb_poster_width: 视频封面宽度
+  class: 视频类名
+  autoplay: 是否自动播放
+  loop: 是否循环播放
+  muted: 是否静音
+  separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
+{% endcomment %}
+
+{% if separate_display == true %}
+  {% assign separate_display = true %}
+{% else %}
+  {% assign separate_display = false %}
+{% endif %}
+
+{% if pc_video and pc_poster %}
+  {% assign pc_src = pc_video %}
+{% if pc_video.media_type == 'video' %}
+  {% assign pc_src = pc_video.sources[1].url %}
+{% endif %}
+
+{% assign video_poster_width = pc_posterWidth | default: 1500 %}
+{% assign video_poster = pc_poster
+  | image_url: width: video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} {% if mb_video != blank and separate_display == false %} max-md:tw-hidden {% endif %}'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{video_poster | default: ''}}'
+    {% else %}
+    poster='{{video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{pc_src}}'
+      {% if lazy %}
+        data-src='{{pc_src}}'
+      {% else %}
+        src='{{ pc_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+
+{% if mb_video and mb_poster %}
+  {% assign mb_src = mb_video %}
+{% if mb_video.media_type == 'video' %}
+  {% assign mb_src = mb_video.sources[1].url %}
+{% endif %}
+
+{% assign mb_video_poster_width = mb_poster_width | default: 1500 %}
+{% assign mb_video_poster = mb_poster
+  | image_url: width: mb_video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} md:tw-hidden'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{mb_video_poster | default: ''}}'
+    {% else %}
+    poster='{{mb_video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{mb_src}}'
+      {% if lazy %}
+        data-src='{{mb_src}}'
+      {% else %}
+        src='{{ mb_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+

package/snippets/zz-video.liquid

@@ -0,0 +1,117 @@
+{% comment %}
+  pc_video: 视频地址
+  pc_poster: 视频封面
+  mb_video: 视频地址
+  mb_poster: 视频封面
+  lazy: 是否懒加载
+  pc_posterWidth: 视频封面宽度
+  mb_poster_width: 视频封面宽度
+  class: 视频类名
+  autoplay: 是否自动播放
+  loop: 是否循环播放
+  muted: 是否静音
+  separate_display: 区分显示pc还是mb, true时 没有配置PC与mb将不会显示。不会使用PC的配置来配置mb
+{% endcomment %}
+
+{% if separate_display == true %}
+  {% assign separate_display = true %}
+{% else %}
+  {% assign separate_display = false %}
+{% endif %}
+
+{% if pc_video and pc_poster %}
+  {% assign pc_src = pc_video %}
+{% if pc_video.media_type == 'video' %}
+  {% assign pc_src = pc_video.sources[1].url %}
+{% endif %}
+
+{% assign video_poster_width = pc_posterWidth | default: 1500 %}
+{% assign video_poster = pc_poster
+  | image_url: width: video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} {% if mb_video != blank and separate_display == false %} max-lg:tw-hidden {% endif %}'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{video_poster | default: ''}}'
+    {% else %}
+    poster='{{video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{pc_src}}'
+      {% if lazy %}
+        data-src='{{pc_src}}'
+      {% else %}
+        src='{{ pc_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+
+{% if mb_video and mb_poster %}
+  {% assign mb_src = mb_video %}
+{% if mb_video.media_type == 'video' %}
+  {% assign mb_src = mb_video.sources[1].url %}
+{% endif %}
+
+{% assign mb_video_poster_width = mb_poster_width | default: 1500 %}
+{% assign mb_video_poster = mb_poster
+  | image_url: width: mb_video_poster_width
+%}
+  <video
+    {% if class %}
+      class='{{class}} lozad zz-video {% if autoplay %} video-play-pause {% endif %} lg:tw-hidden'
+    {% endif %}
+    {% if autoplay %}
+      autoplay
+    {% endif %}
+    {% if loop %}
+      loop
+    {% endif %}
+    {% if muted %}
+      muted
+    {% endif %}
+    {% if controls %}
+      controls
+    {% endif %}
+    {% if lazy %}
+    data-poster='{{mb_video_poster | default: ''}}'
+    {% else %}
+    poster='{{mb_video_poster | default: ''}}'
+    {% endif %}
+    webkit-playsinline
+    playsinline
+    x5-video-player-type='h5'
+
+  >
+    <source type='video/mp4'
+        data-src='{{mb_src}}'
+      {% if lazy %}
+        data-src='{{mb_src}}'
+      {% else %}
+        src='{{ mb_src }}'
+      {% endif %}
+      >
+
+  </video>
+{% endif %}
+