zz-shopify-components 0.0.27 → 0.0.28-beta.2

package/snippets/zz-price-tag.liquid

@@ -1,22 +1,22 @@
-<div class='tw-flex tw-items-center'>
-  <span class='tw-font-bold tw-text-[20px] tw-text-black'>
-    {{ price | money_without_trailing_zeros }}
-  </span>
-  {% if compare_at_price > price %}
-    <span class='before tw-font-regular tw-ml-[4px] tw-text-[16px] tw-text-[rgba(0,0,0,0.3)] tw-line-through'>
-      {{ compare_at_price | money_without_trailing_zeros }}
-    </span>
-    {% assign percent = price | times: 100 | divided_by: compare_at_price %}
-    {% assign discount_percentage = 100 | minus: percent %}
-    <span class='discount_percentage tw-font-regular tw-ml-[10px] tw-px-[10px] tw-pt-[2px] tw-text-[10px] lg:tw-text-[12px] tw-rounded-[6px] tw-text-white tw-bg-[#FC6C0F]'>
-      {% if show_discount_percentage_off == true %}
-        {{- discount_percentage -}}
-        %OFF
-      {% else %}
-        -
-        {{- discount_percentage -}}
-        %
-      {% endif %}
-    </span>
-  {% endif %}
-</div>
+<div class='tw-flex tw-items-center'>
+  <span class='tw-font-bold tw-text-[20px] tw-text-black'>
+    {{ price | money_without_trailing_zeros }}
+  </span>
+  {% if compare_at_price > price %}
+    <span class='before tw-font-regular tw-ml-[4px] tw-text-[16px] tw-text-[rgba(0,0,0,0.3)] tw-line-through'>
+      {{ compare_at_price | money_without_trailing_zeros }}
+    </span>
+    {% assign percent = price | times: 100 | divided_by: compare_at_price %}
+    {% assign discount_percentage = 100 | minus: percent %}
+    <span class='discount_percentage tw-font-regular tw-ml-[10px] tw-px-[10px] tw-pt-[2px] tw-text-[10px] lg:tw-text-[12px] tw-rounded-[6px] tw-text-white tw-bg-[#FC6C0F]'>
+      {% if show_discount_percentage_off == true %}
+        {{- discount_percentage -}}
+        %OFF
+      {% else %}
+        -
+        {{- discount_percentage -}}
+        %
+      {% endif %}
+    </span>
+  {% endif %}
+</div>

package/snippets/zz-spoke.liquid

@@ -1,142 +1,142 @@
-{% comment %}
-  背书
-  bg_color: 背景色
-  pc_image: pc 端图片/视频封面
-  mb_image: 移动端图片/视频封面
-  pc_video: pc 端视频
-  mb_video: 移动端视频
-  media_class: 图片/视频类名（设置高）
-  pc_media_pos: pc 端视频位置 'top'|'bottom'，默认 top
-  mb_media_pos: 移动端视频位置 'top'|'bottom'，默认 top
-  class_name: 自定义类名（设置宽高）
-
-  user_name: 用户名
-  name_class: 名字类名（设置文字大小和颜色）
-  user_account: 账号
-  account_class: 账号类名
-  user_avatar: 用户头像
-  content: 内容
-  content_class: 内容类名（设置文字大小和颜色）
-
-  logo: 图标
-  logo_class: 图标类名
-  logo_alt: 图标 alt
-{% endcomment %}
-
-{% if pc_video != blank or pc_image != black %}
-  {% assign only_content = false %}
-  {% assign class_name = class_name
-    | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
-  %}
-  {% if content != blank %}
-    {% assign media_class = media_class
-      | default: 'tw-h-[152px] lg:tw-h-[397px]'
-    %}
-  {% else %}
-    {% assign media_class = media_class
-      | default: 'tw-h-[221px] lg:tw-h-[468px]'
-    %}
-  {% endif %}
-{% else %}
-  {% assign only_content = true %}
-  {% assign class_name = class_name
-    | default: 'tw-w-[162px] tw-h-[175px] lg:tw-w-[351px] lg:tw-h-[265px]'
-  %}
-{% endif %}
-
-{% assign pc_media_pos = pc_media_pos | default: 'top' %}
-{% assign mb_media_pos = mb_media_pos | default: 'top' %}
-{% assign bg_color = bg_color | default: 'rgba(255,255,255,0.1)' %}
-{% assign name_class = name_class
-  | default: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-white'
-%}
-{% assign account_class = account_class | default: 'tw-opacity-50' %}
-{% assign content_class = content_class
-  | default: 'max-lg:tw-text-[9px] lg:tw-text-[14px] tw-tracking-[0.01] tw-text-white'
-%}
-{% assign logo_class = logo_class | default: 'tw-w-[39px] lg:tw-w-[45px]' %}
-
-<div class='zz-spoke-block tw-relative tw-flex {% if pc_media_pos == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if mb_media_pos == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between {{ class_name }}'>
-  {% if only_content == false %}
-    {% comment %} 视频/图片 {% endcomment %}
-    <div
-      class='zz-spoke-block-media tw-w-full {{media_class}}'
-    >
-      {% if pc_video != blank %}
-        {% render 'zz-video',
-          pc_video: pc_video,
-          pc_poster: pc_image,
-          mb_video: mb_video,
-          mb_poster: mb_image,
-          pc_posterWidth: 700,
-          mb_poster_width: 480,
-          class: 'click-video-play-pause tw-w-full tw-h-full tw-cursor-pointer tw-object-cover'
-        %}
-      {% else %}
-        {% render 'zz-img',
-          pc_image: pc_image,
-          mb_image: mb_image,
-          image_alt: image_alt,
-          pc_width: 700,
-          mb_width: 480
-        %}
-      {% endif %}
-      {% comment %}
-        {% if user_intro != blank %}
-          <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
-            <div class='max-lg:tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.2] tw-font-bold tw-text-white'>
-              {{ user_name | upcase }}
-            </div>
-            <div class='tw-mt-[4px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-font-medium tw-text-white/70 lg:tw-text-white/60'>
-              {{ user_intro | upcase }}
-            </div>
-          </div>
-        {% endif %}
-      {% endcomment %}
-    </div>
-  {% endif %}
-  <div class='zz-spoke-block-content tw-relative tw-p-[10px] tw-pr-[0px] lg:tw-pl-[24px] lg:tw-pr-[30px] lg:tw-py-[20px] tw-w-full tw-h-fit tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden {% if only_content %}tw-pb-[32px] lg:tw-pb-[40px] {% else %}tw-pb-[10px] lg:tw-pb-[20px]{% endif %}'>
-    <div class='tw-flex tw-items-center'>
-      <div class='tw-w-[20px] tw-min-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-min-w-[36px] lg:tw-h-[36px]'>
-        {% render 'zz-img',
-          pc_image: user_avatar,
-          mb_image: user_avatar,
-          image_alt: user_name,
-          pc_width: 72,
-          mb_width: 60
-        %}
-      </div>
-      <div class='tw-ml-[10px] tw-leading-[1.5] tw-font-bold {{ name_class }}'>
-        {{ user_name }}
-        <span class='tw-block tw-font-medium tw-leading-[1.5] {{ account_class }}'>
-          {{- user_account -}}
-        </span>
-      </div>
-    </div>
-    {% if content != blank %}
-      <div class='tw-mt-[8px] lg:tw-mt-[14px] tw-leading-[1.5] {{ content_class }}'>
-        {{ content }}
-      </div>
-    {% endif %}
-  </div>
-  {% if logo != blank %}
-    <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
-      {% render 'zz-img',
-        pc_image: logo,
-        mb_image: logo,
-        image_alt: logo_alt,
-        pc_width: 120,
-        mb_width: 120
-      %}
-    </div>
-  {% endif %}
-</div>
-
-<style>
-  .zz-spoke-block {
-    background-color: {{ bg_color }};
-  }
-  .zz-spoke-block p {
-    margin: 0;
-  }
-</style>
+{% comment %}
+  背书
+  bg_color: 背景色
+  pc_image: pc 端图片/视频封面
+  mb_image: 移动端图片/视频封面
+  pc_video: pc 端视频
+  mb_video: 移动端视频
+  media_class: 图片/视频类名（设置高）
+  pc_media_pos: pc 端视频位置 'top'|'bottom'，默认 top
+  mb_media_pos: 移动端视频位置 'top'|'bottom'，默认 top
+  class_name: 自定义类名（设置宽高）
+
+  user_name: 用户名
+  name_class: 名字类名（设置文字大小和颜色）
+  user_account: 账号
+  account_class: 账号类名
+  user_avatar: 用户头像
+  content: 内容
+  content_class: 内容类名（设置文字大小和颜色）
+
+  logo: 图标
+  logo_class: 图标类名
+  logo_alt: 图标 alt
+{% endcomment %}
+
+{% if pc_video != blank or pc_image != black %}
+  {% assign only_content = false %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[271px] lg:tw-w-[351px] lg:tw-h-[550px]'
+  %}
+  {% if content != blank %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[152px] lg:tw-h-[397px]'
+    %}
+  {% else %}
+    {% assign media_class = media_class
+      | default: 'tw-h-[221px] lg:tw-h-[468px]'
+    %}
+  {% endif %}
+{% else %}
+  {% assign only_content = true %}
+  {% assign class_name = class_name
+    | default: 'tw-w-[162px] tw-h-[175px] lg:tw-w-[351px] lg:tw-h-[265px]'
+  %}
+{% endif %}
+
+{% assign pc_media_pos = pc_media_pos | default: 'top' %}
+{% assign mb_media_pos = mb_media_pos | default: 'top' %}
+{% assign bg_color = bg_color | default: 'rgba(255,255,255,0.1)' %}
+{% assign name_class = name_class
+  | default: 'max-lg:tw-text-[10px] lg:tw-text-[14px] tw-text-white'
+%}
+{% assign account_class = account_class | default: 'tw-opacity-50' %}
+{% assign content_class = content_class
+  | default: 'max-lg:tw-text-[9px] lg:tw-text-[14px] tw-tracking-[0.01] tw-text-white'
+%}
+{% assign logo_class = logo_class | default: 'tw-w-[39px] lg:tw-w-[45px]' %}
+
+<div class='zz-spoke-block tw-relative tw-flex {% if pc_media_pos == 'top' %}lg:tw-flex-col {% else %}lg:tw-flex-col-reverse {% endif %} {% if mb_media_pos == 'top' %}max-lg:tw-flex-col {% else %}max-lg:tw-flex-col-reverse {% endif %} tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden tw-justify-between {{ class_name }}'>
+  {% if only_content == false %}
+    {% comment %} 视频/图片 {% endcomment %}
+    <div
+      class='zz-spoke-block-media tw-w-full {{media_class}}'
+    >
+      {% if pc_video != blank %}
+        {% render 'zz-video',
+          pc_video: pc_video,
+          pc_poster: pc_image,
+          mb_video: mb_video,
+          mb_poster: mb_image,
+          pc_posterWidth: 700,
+          mb_poster_width: 480,
+          class: 'click-video-play-pause tw-w-full tw-h-full tw-cursor-pointer tw-object-cover'
+        %}
+      {% else %}
+        {% render 'zz-img',
+          pc_image: pc_image,
+          mb_image: mb_image,
+          image_alt: image_alt,
+          pc_width: 700,
+          mb_width: 480
+        %}
+      {% endif %}
+      {% comment %}
+        {% if user_intro != blank %}
+          <div class='tw-absolute tw-left-0 tw-right-0 tw-bottom-0  lg:tw-top-0'>
+            <div class='max-lg:tw-text-[12px] lg:tw-text-[14px] tw-leading-[1.2] tw-font-bold tw-text-white'>
+              {{ user_name | upcase }}
+            </div>
+            <div class='tw-mt-[4px] max-lg:tw-text-[10px] lg:tw-text-[14px] tw-font-medium tw-text-white/70 lg:tw-text-white/60'>
+              {{ user_intro | upcase }}
+            </div>
+          </div>
+        {% endif %}
+      {% endcomment %}
+    </div>
+  {% endif %}
+  <div class='zz-spoke-block-content tw-relative tw-p-[10px] tw-pr-[0px] lg:tw-pl-[24px] lg:tw-pr-[30px] lg:tw-py-[20px] tw-w-full tw-h-fit tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden {% if only_content %}tw-pb-[32px] lg:tw-pb-[40px] {% else %}tw-pb-[10px] lg:tw-pb-[20px]{% endif %}'>
+    <div class='tw-flex tw-items-center'>
+      <div class='tw-w-[20px] tw-min-w-[20px] tw-h-[20px] lg:tw-w-[36px] lg:tw-min-w-[36px] lg:tw-h-[36px]'>
+        {% render 'zz-img',
+          pc_image: user_avatar,
+          mb_image: user_avatar,
+          image_alt: user_name,
+          pc_width: 72,
+          mb_width: 60
+        %}
+      </div>
+      <div class='tw-ml-[10px] tw-leading-[1.5] tw-font-bold {{ name_class }}'>
+        {{ user_name }}
+        <span class='tw-block tw-font-medium tw-leading-[1.5] {{ account_class }}'>
+          {{- user_account -}}
+        </span>
+      </div>
+    </div>
+    {% if content != blank %}
+      <div class='tw-mt-[8px] lg:tw-mt-[14px] tw-leading-[1.5] {{ content_class }}'>
+        {{ content }}
+      </div>
+    {% endif %}
+  </div>
+  {% if logo != blank %}
+    <div class='tw-absolute tw-left-[50%] -tw-translate-x-[50%] tw-bottom-[10px] {{ logo_class }}'>
+      {% render 'zz-img',
+        pc_image: logo,
+        mb_image: logo,
+        image_alt: logo_alt,
+        pc_width: 120,
+        mb_width: 120
+      %}
+    </div>
+  {% endif %}
+</div>
+
+<style>
+  .zz-spoke-block {
+    background-color: {{ bg_color }};
+  }
+  .zz-spoke-block p {
+    margin: 0;
+  }
+</style>

package/snippets/zz-tag.liquid

@@ -1,22 +1,22 @@
-{% comment %}
-  tag: 标签
-  tag_bg_color_gradient: 标签背景颜色渐变
-  tag_bg_color: 标签背景颜色
-  tag_color: 标签颜色
-  class_name: 增加类名
-{% endcomment %}
-  
-{%- capture tag_bg_color -%}
-  {%- if tag_bg_color_gradient != blank %} 
-    {{ tag_bg_color_gradient }}
-  {%- else -%} 
-    {{ tag_bg_color }}
-  {%- endif %}
-{%- endcapture %}
-{% assign tag_color = tag_color %}
-<div
-  class='{{ class_name }} zz-tag tw-z-[1] tw-w-fit tw-relative tw-italic tw-font-bold max-lg:tw-h-[24px] tw-text-[16px] tw-leading-[24px] tw-px-[16px] lg:tw-h-[32px] lg:tw-text-[20px] lg:tw-px-[28px] lg:tw-leading-[32px]'
-  style='color: {{ tag_color }}; --zz-tag-bg-color: {{ tag_bg_color }};'
->
-  {{ tag }}
-</div>
+{% comment %}
+  tag: 标签
+  tag_bg_color_gradient: 标签背景颜色渐变
+  tag_bg_color: 标签背景颜色
+  tag_color: 标签颜色
+  class_name: 增加类名
+{% endcomment %}
+  
+{%- capture tag_bg_color -%}
+  {%- if tag_bg_color_gradient != blank %} 
+    {{ tag_bg_color_gradient }}
+  {%- else -%} 
+    {{ tag_bg_color }}
+  {%- endif %}
+{%- endcapture %}
+{% assign tag_color = tag_color %}
+<div
+  class='{{ class_name }} zz-tag tw-z-[1] tw-w-fit tw-relative tw-italic tw-font-bold max-lg:tw-h-[24px] tw-text-[16px] tw-leading-[24px] tw-px-[16px] lg:tw-h-[32px] lg:tw-text-[20px] lg:tw-px-[28px] lg:tw-leading-[32px]'
+  style='color: {{ tag_color }}; --zz-tag-bg-color: {{ tag_bg_color }};'
+>
+  {{ tag }}
+</div>

package/snippets/zz-video-button.liquid

@@ -1,55 +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>
+
+{% 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>