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

package/assets/zz-components.css

@@ -236,6 +236,10 @@ body.zz-dialog-open {
   background: #FC6C0F;
   color: #fff;
 }
+.zz-btn.zz-btn-primary.zz-btn-blue {
+  background: #378DDD;
+  color: #fff;
+}
 .zz-btn.zz-btn-primary-round.zz-btn-black {
   background: #000000;
   color: #fff;
@@ -261,7 +265,11 @@ body.zz-dialog-open {
   color: #FC6C0F;
   border: 1.5px solid #FC6C0F;
 }
-
+.zz-btn.zz-btn-default.zz-btn-blue {
+  background: transparent;
+  color: #378DDD;
+  border: 1.5px solid #378DDD;
+}
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #000000;
@@ -281,6 +289,18 @@ body.zz-dialog-open {
   border-radius: 30px;
 }
 
+.zz-btn-link.zz-btn-blue {
+  color: #378DDD;
+}
+.zz-btn-link.zz-btn-orange {
+  color: #FC6C0F;
+}
+.zz-btn-link.zz-btn-white {
+  color: #fff;
+}
+.zz-btn-link.zz-btn-black {
+  color: #000000;
+}
 
 .zz-btn:hover {
   opacity: 0.8;
@@ -328,6 +348,9 @@ body.zz-dialog-open {
       }
 }
 
+.zz-btn-shape-round {
+  border-radius: 90px;
+}
 .zz-video {
   border-radius: inherit; 
 }
@@ -338,7 +361,7 @@ body.zz-dialog-open {
   display: grid;
   place-items: center;
   pointer-events: none; /* 不阻挡点击 */
-  z-index: 2147483647;  /* 最高层 */
+  z-index: 9999;  /* 最高层 */
 }
 .zz-toast-box{
   pointer-events: auto;
@@ -347,25 +370,29 @@ body.zz-dialog-open {
   padding: 12px 16px;
   border-radius: 12px;
   background: #fff;
-  color: #b42318;                     /* 错误红 */
-  border: 1px solid rgba(180,35,24,.25);
-  box-shadow: 0 10px 30px rgba(0,0,0,.15);
-  font: 14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei',sans-serif;
-  text-align: center;
+  color: #161110;
+  box-shadow: 0px 2px 16px 0px #00000026;
+  font-size: 14px;
+  text-align: left;
   word-break: break-word;
   transform: translateZ(0) scale(.96);
   opacity: 0;
   transition: transform .18s ease, opacity .18s ease;
+  line-height: 1.2;
+  display: inline-flex;
+
+}
+.zz-toast-icon {
+  margin-right: 4px;
+  padding: 0px 2px;
+}
+@media screen and (min-width: 1024px) {
+  .zz-toast-msg{
+    font-size: 16px;
+  }
+  
 }
 .zz-toast-box.show{
   opacity: 1;
   transform: translateZ(0) scale(1);
 }
-.zz-toast-title{
-  display:inline-block;
-  margin-bottom: 2px;
-  font-weight: 600;
-}
-.zz-toast-msg{
-  display:block;
-}

package/assets/zz-components.js

@@ -172,6 +172,47 @@ if (!customElements.get('zz-video-button')) {
   let toastEl = null;
   let hideTimer = null;
 
+  const toastIcon = {
+    error: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_19382_20972)">
+              <circle cx="9" cy="9" r="9" fill="#FF4D4F"/>
+              <path d="M6.24231 6.17188L11.8992 11.8287" stroke="white" stroke-linecap="round"/>
+              <path d="M6.24231 11.8281L11.8992 6.17127" stroke="white" stroke-linecap="round"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_19382_20972">
+              <rect width="18" height="18" fill="white"/>
+              </clipPath>
+              </defs>
+          </svg>
+          `,
+    success: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_19382_20921)">
+                <circle cx="9" cy="9" r="9" fill="#5BC726"/>
+                <path d="M5 9L7.82843 11.8284L12.7782 6.87868" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_19382_20921">
+                <rect width="18" height="18" fill="white"/>
+                </clipPath>
+                </defs>
+            </svg>
+            `,
+    warning: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_19382_20989)">
+              <circle cx="9" cy="9" r="9" fill="#FAAD14"/>
+              <path d="M8.99994 5L8.99994 10" stroke="white" stroke-linecap="round"/>
+              <circle cx="9.00001" cy="12.8" r="0.8" fill="white"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_19382_20989">
+              <rect width="18" height="18" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>
+            `,
+  };
+
   function createToast() {
     const layer = document.createElement('div');
     layer.className = 'zz-toast-layer';
@@ -182,51 +223,46 @@ if (!customElements.get('zz-video-button')) {
     box.className = 'zz-toast-box';
     box.setAttribute('role', 'alert');
 
-    // const title = document.createElement('span');
-    // title.className = 'zz-toast-title';
-    // title.textContent = '错误';
-
     const msg = document.createElement('span');
     msg.className = 'zz-toast-msg';
 
-    // box.appendChild(title);
+    const icon = document.createElement('span');
+    icon.className = 'zz-toast-icon';
+
+    box.appendChild(icon);
     box.appendChild(msg);
     layer.appendChild(box);
     document.body.appendChild(layer);
 
-    return { layer, box, msg };
+    return { layer, box, msg, icon };
   }
 
   /**
    * 显示错误 Toast
    * @param {string} message - 要显示的错误文字
-   * @param {{duration?:number,title?:string}} [opts]
+   * @param {{duration?:number,type?:string}} [opts]
    */
   function zzShowToast(message, opts = {}) {
-
     if (!toastEl) {
       toastEl = createToast();
     }
 
-    // 可选标题（默认“错误”）
-    if(opts.title) {
-      toastEl.title.textContent = opts.title;
-    }
-
     // 更新文本
     toastEl.msg.textContent = message ?? '';
+    if (opts.type) {
+      toastEl.icon.innerHTML = toastIcon[opts.type];
+    } else {
+      toastEl.icon.innerHTML = '';
+    }
 
     // 重新插入到 body 末尾，保证在最上层
     document.body.appendChild(toastEl.layer);
-
     // 显示动画
     requestAnimationFrame(() => {
       toastEl.box.classList.add('show');
     });
-
     // 清理上一次的计时器
     clearTimeout(hideTimer);
-
     const duration = Math.max(500, Number(opts.duration || 2000));
     hideTimer = setTimeout(() => {
       toastEl.box.classList.remove('show');
@@ -241,4 +277,3 @@ if (!customElements.get('zz-video-button')) {
   // 暴露到全局
   window.zzShowToast = zzShowToast;
 })();
-

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,239 @@
+{% 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"
+        }
+      ],
+      "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>

package/blocks/zz-edu-form.liquid

@@ -389,6 +389,10 @@
       } else {
         zzShowToast('Please fill in all required fields!');
       }
+      dataLayer.push({
+        event: "edu_page_form_submit",
+        timestamp: new Date().toISOString(),
+      });
     });
     
     // 实时验证

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.12.0",
+  "version": "0.12.1-beta.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-button-v2.liquid

@@ -0,0 +1,77 @@
+{% comment %} 
+按钮配置选项：
+type：按钮类型
+  - primary：主要按钮
+  - default：默认按钮
+  - link：链接按钮
+
+shape: 按钮形状
+  - default：默认
+  - round：圆角
+
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- backdrop_filter：毛玻璃效果 true/false
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+{% assign btn_type = type | default: 'primary' %}
+{% assign btn_color = color | default: 'black' %}
+{% assign btn_size = size | default: 'medium' %}
+{% assign icon_size = icon_size | default: 15 %}
+{% assign width = width | default: 'auto' %}
+
+<style>
+  .zz-btn-icon {
+    display: flex;
+  }
+</style>
+  
+{% if href %}
+  {% if btn_type == 'link' %}
+    <a href="{{ href | default: '#' }}" {% if btn_id != blank %} id="{{ btn_id }}" {% endif %} class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
+      <span class="zz-btn-text">{{ text }}</span>
+      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
+        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
+      </span>{% endif %}
+    </a>
+  {% else %}
+    <a
+      href="{{ href | default: '#' }}"
+      {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
+      class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}"
+      {% if backdrop_filter %}
+        style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+      {% endif %}
+    >
+      {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+      <span class="zz-btn-text">{{ text }}</span>
+    </a>
+  {% endif %}
+
+{% else %}
+
+<button
+  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
+  {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
+  {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
+  {% if backdrop_filter %}
+    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+  {% endif %}
+>
+  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+  <span class="zz-btn-text">{{ text }}</span>
+</button>
+{% endif %}