zz-shopify-components 0.35.1-beta.7 → 0.35.1-beta.9

package/assets/zz-components.css

@@ -311,51 +311,52 @@ body.zz-dialog-open {
 .zz-btn.zz-btn-default.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
 }
 
 .zz-btn.zz-btn-default.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF;
+  font-weight: 400;
 }
 
 .zz-btn.zz-btn-default.zz-btn-orange {
   background: transparent;
   color: #FC6C0F;
-  border: 1.5px solid #FC6C0F;
+  border: 1px solid #FC6C0F;
 }
 
 .zz-btn.zz-btn-default.zz-btn-yellow {
   background: transparent;
   color: #000;
-  border: 1.5px solid #FFEB00;
+  border: 1px solid #FFEB00;
 }
 
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;
-  border: 1.5px solid #378DDD;
+  border: 1px solid #378DDD;
 }
 
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #2D2D2D;
-  border: 1.5px solid #2D2D2D;
+  border: 1px solid #2D2D2D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-white {
   background: transparent;
   color: #fff;
-  border: 1.5px solid #FFFFFF4D;
+  border: 1px solid #FFFFFF4D;
   border-radius: 30px;
 }
 
 .zz-btn.zz-btn-round.zz-btn-orange {
   background: transparent;
   color: #ff9900;
-  border: 1.5px solid #ff9900;
+  border: 1px solid #ff9900;
   border-radius: 30px;
 }
 
@@ -408,6 +409,11 @@ body.zz-dialog-open {
   font-size: 14px;
 }
 
+.zz-btn.zz-btn-large.zz-btn-default {
+  padding: 0px 1.6rem;
+
+}
+
 @media (min-width: 1024px) {
   .zz-btn {
     height: 40px;
@@ -434,6 +440,10 @@ body.zz-dialog-open {
   .zz-btn-link.zz-btn-link-large {
     font-size: 16px;
   }
+
+  .zz-btn.zz-btn-large.zz-btn-default {
+    padding: 0px 30px;
+  }
 }
 
 .zz-video-btn.zz-btn.zz-btn-white {

package/blocks/zz-bottom-popup.liquid

@@ -19,8 +19,8 @@
   #shopify-block-{{ block.id }} .zz-bottom-popup__overlay {
     position: fixed;
     inset: 0;
-    z-index: 39;
-    background: rgba(0, 0, 0, 0.5);
+    z-index: 888;
+    background: rgba(0, 0, 0, 0.6);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
@@ -30,18 +30,23 @@
     opacity: 1;
     pointer-events: auto;
   }
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} .zz-bottom-popup__content {
+      height: {{ block.settings.mobile_height }}vh;
+      max-height: {{ block.settings.mobile_height }}vh;
+      padding: {{ block.settings.mobile_padding_top }}px {{ block.settings.mobile_padding_x }}px 0;
+
+    }
+  }
 
   #shopify-block-{{ block.id }} .zz-bottom-popup__content {
     position: fixed;
     left: 0;
     bottom: 0;
-    z-index: 40;
+    z-index: 889;
     display: flex;
     flex-direction: column;
     width: 100vw;
-    height: {{ block.settings.mobile_height }}vh;
-    max-height: {{ block.settings.mobile_height }}vh;
-    padding: {{ block.settings.mobile_padding_top }}px {{ block.settings.mobile_padding_x }}px 0;
     border-radius: 20px 20px 0 0;
     background: {{ block.settings.background_color }};
     box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
@@ -64,12 +69,18 @@
     right: 16px;
     z-index: 101;
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 32px;
     height: 32px;
     padding: 0;
     border: 0;
-    background: transparent;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     cursor: pointer;
+    overflow: hidden;
   }
 
   #shopify-block-{{ block.id }} .zz-bottom-popup__body {
@@ -79,17 +90,8 @@
     flex: 1 1 auto;
     padding-bottom: 34px;
     overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-  }
-
-  #shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  #shopify-block-{{ block.id }} .zz-bottom-popup__body::-webkit-scrollbar-thumb {
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.18);
+    {% comment %} scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent; {% endcomment %}
   }
 
   #shopify-block-{{ block.id }} .zz-bottom-popup__inner {
@@ -111,11 +113,10 @@
     #shopify-block-{{ block.id }} .zz-bottom-popup__close {
       top: auto;
       right: auto;
-      left: 50%;
-      bottom: 30px;
+      right: 30px;
+      top: 30px;
       width: 40px;
       height: 40px;
-      transform: translateX(-50%);
     }
 
     #shopify-block-{{ block.id }} .zz-bottom-popup__body {
@@ -144,7 +145,7 @@
 
 <div class="zz-bottom-popup" {{ block.shopify_attributes }}>
   <zz-normal-modal id="{{ modal_id }}" class="zz-bottom-popup__modal" aria-hidden="true">
-    <div class="zz-bottom-popup__overlay" data-modal-overlay></div>
+    <div class="zz-bottom-popup__overlay" data-modal-overlay>&nbsp;</div>
     <div
       class="zz-bottom-popup__content"
       data-modal-content
@@ -169,7 +170,7 @@
         </svg>
       </button>
 
-      <div class="zz-bottom-popup__body">
+      <div class="zz-bottom-popup__body zz-overflow-scrollbar-hidden">
         <div class="zz-bottom-popup__inner" id="{{ modal_id }}-title">
           {% content_for 'blocks' %}
         </div>
@@ -179,7 +180,7 @@
 </div>
 
 <script>
-  (function() {
+  document.addEventListener('DOMContentLoaded', function() {
     var blockRoot = document.getElementById('shopify-block-{{ block.id }}');
 
     if (!blockRoot || blockRoot.dataset.bottomPopupBound === 'true') {
@@ -193,7 +194,7 @@
     var overlay = blockRoot.querySelector('[data-modal-overlay]');
     var modalTarget = '#{{ modal_id }}';
     var triggers = document.querySelectorAll('[data-zz-modal-target="' + modalTarget + '"]');
-
+    console.log('triggers----------triggers',triggers);
     if (!modal) {
       return;
     }
@@ -228,7 +229,8 @@
         });
       }
     });
-  })();
+  
+  });
 </script>
 
 {% schema %}

package/blocks/zz-button-v2.liquid

@@ -195,6 +195,11 @@
       "id": "modal_id",
       "label": "按钮触发modal的id",
     },
+    {
+      "type": "text",
+      "id": "custom_class",
+      "label": "自定义类名",
+    },
     {
       "type": "text",
       "id": "click_event_class_name",
@@ -216,6 +221,10 @@
 
 {% assign btn_class = 'zz-button' | append: block.id %}
 
+{% if block.settings.custom_class != blank %}
+  {% assign btn_class = btn_class | append: ' ' | append: block.settings.custom_class %}
+{% endif %}
+
 <style>
 
   {% if block.settings.mobile_width == 'full' %}

package/blocks/zz-img-video-text.liquid

@@ -0,0 +1,120 @@
+<div class='media-box tw-relative tw-rounded-[10px] lg:tw-rounded-[16px] '>
+  {% if block.settings.video_pc != blank %}
+    {% if block.settings.video_url_pc != blank %}
+      {% assign pc_video = block.settings.video_url_pc %}
+    {% else %}
+      {% assign pc_video = block.settings.video_pc %}
+    {% endif %}
+    {% render 'zz-video',
+      pc_video: pc_video,
+      pc_poster: block.settings.poster_pc,
+      mb_video: block.settings.video_mb,
+      mb_poster: block.settings.poster_mb,
+      lazy: true,
+      class: 'image-video-box tw-w-full tw-h-auto tw-rounded-[10px] lg:tw-rounded-[16px]',
+      autoplay: true,
+      loop: true,
+      muted: true,
+      module_id: block.settings.block_module_id
+    %}
+  {% else %}
+    {%
+      render 'zz-img',
+      pc_image: block.settings.poster_pc,
+      mb_image: block.settings.poster_mb,
+      image_alt: block.settings.heading | escape,
+      class_name: 'image-video-box tw-rounded-[10px] lg:tw-rounded-[16px]',
+    %}
+  {% endif %}
+</div>
+
+
+<div class='active-box-content max-lg:tw-mt-[2rem] lg:tw-mt-[32px]'>
+    {% render 'zz-h5',
+      title: block.settings.heading,
+      title_color: block.settings.title_color,
+      class_name: 'box-title tw-text-center lg:tw-text-left tw-text-[16px] lg:tw-text-[24px]'
+    %}
+    <div class='active-box-desc tw-mt-[8px] lg:tw-mt-[20px]'>
+      {% render 'zz-content-text',
+        text: block.settings.row_content,
+        mb_text: block.settings.row_content,
+        pc_font_size: 16,
+        mobile_font_size: 12,
+        text_color: block.settings.content_color,
+        class_name: 'box-content-text max-lg:tw-text-center lg:tw-text-left tw-text-[12px] lg:tw-text-[16px]',
+      %}
+    </div>
+  </div>
+
+
+{% schema %}
+{
+  "name": "Img Video Text",
+  "class": "zz-img-video-text",
+  "settings": [
+    {
+      "type": "text",
+      "id": "video_url_pc",
+      "label": "Video url PC",
+      "info": "使用cdn视频时，填写视频url。防止大屏幕视频模糊"
+    },
+    {
+      "type": "video",
+      "id": "video_pc",
+      "label": "Video"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_pc",
+      "label": "Poster"
+    },
+    {
+      "type": "video",
+      "id": "video_mb",
+      "label": "Video(Mobile)"
+    },
+    {
+      "type": "image_picker",
+      "id": "poster_mb",
+      "label": "Poster(Mobile)"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "标题"
+    },
+    {
+      "type": "color",
+      "id": "title_color",
+      "default": "#2D2D2D",
+      "label": "标题颜色"
+    },
+    {
+      "type": "richtext",
+      "id": "row_content",
+      "label": "description"
+    },
+    {
+      "type": "color",
+      "id": "content_color",
+      "default": "#B2B2B2",
+      "label": "内容颜色"
+    },
+    {
+      "type": "text",
+      "id": "block_module_id",
+      "label": "唯一业务id",
+      "info": "需要唯一,埋点统计"
+    },
+    
+  ],
+  "presets": [
+    {
+      "name": "Img Video Text",
+    }
+  ]
+}
+{% endschema %}
+
+

package/package.json

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

package/sections/zz-video-tab-swiper.liquid

@@ -132,7 +132,7 @@
        height: calc(90vw / 16 * 9);
      }
      #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       bottom: 135px;
+       bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
@@ -207,7 +207,7 @@
             title: block.settings.pc_title,
             title_mb: block.settings.mb_title,
             title_color: block.settings.text_color,
-            class_name: 'tab-content-title tw-text-center'
+            class_name: 'tab-content-title tw-text-center max-lg:tw-text-[2.1rem] max-lg:tw-text-left'
           %}
           <style>
             #shopify-section-{{section.id}} .tab-content-title {
@@ -228,7 +228,7 @@
             text: block.settings.pc_text,
             mb_text: block.settings.mb_text,
             text_color: block.settings.text_color,
-            class_name: 'tab-content-text tw-text-center'
+            class_name: 'tab-content-text tw-text-center max-lg:tw-text-left'
           %}
           <style>
             #shopify-section-{{section.id}} .tab-content-text {