zz-shopify-components 0.10.0 → 0.12.0

package/assets/zz-modal.js

@@ -107,15 +107,25 @@
       all: unset;
       cursor: pointer;
       position: absolute;
-      top: 8px;
-      right: 8px;
+      top: 20px;
+      right: 20px;
       width: 32px;
       height: 32px;
       border-radius: 9999px;
       display: grid;
       place-items: center;
     }
-    .close-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+    .close-btn-white {
+      color: white;
+      background-color: rgba(0,0,0,0.08);
+      backdrop-filter: blur(10px);
+    }
+    .close-btn-black {
+      color: white;
+      background-color: #333333;
+      /* backdrop-filter: blur(10px); */
+    }
+    .close-btn:focus-visible { outline: none; }
   `;
 
   const TEMPLATE = document.createElement('template');
@@ -151,6 +161,11 @@
       style.textContent = STYLE_TEXT;
       shadow.appendChild(style);
       shadow.appendChild(TEMPLATE.content.cloneNode(true));
+      const closeBtnColor = this.getAttribute('close-btn-color');
+      if (closeBtnColor) {
+        const closeBtn = shadow.querySelector('.close-btn');
+        closeBtn.classList.add(closeBtnColor);
+      }
 
       this._dialog = shadow.querySelector('dialog');
       this._panel = shadow.querySelector('.panel-inner');

package/blocks/zz-flex-layout-bg-block.liquid

@@ -465,8 +465,9 @@
       #shopify-block-{{ block.id }} .flex-layout-image {
         height: {{ block.settings.pc_fixed_height }}px;
       }
-      #shopify-block-{{ block.id }} .flex-layout-image {
+      #shopify-block-{{ block.id }} .flex-layout-video {
         height: {{ block.settings.pc_fixed_height }}px;
+        object-fit: cover;
       }
     {% endif %}
   }

package/package.json

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

package/sections/zz-header-edu.liquid

@@ -99,7 +99,7 @@
 {% if show_header_edu %}
   <div class=' tw-max-w-[1660px] lg:tw-px-[20px] tw-w-full tw-mx-auto tw-h-full tw-flex tw-items-center tw-justify-left'>
     <span class='tw-cursor-default'
-      ><a href='{{ shop.metafields.custom.edu_home_page.value.url }}'>
+      ><a href='{{ shop.metafields.custom.edu_collection_page.value.url }}'>
         {{- section.settings.edu_header_text -}}
       </a></span
     >

package/sections/zz-modal.liquid

@@ -15,7 +15,7 @@
     }
   </style>
 
-  <zz-modal {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
+  <zz-modal close-btn-color="close-btn-{{ section.settings.close_btn_color }}" {% if section.settings.sheet_on_mobile %} sheet-on-mobile {% endif %} {% if section.settings.no_backdrop_close %} no-backdrop-close {% endif %} id="{{ section.settings.modal_id }}"{% unless section.settings.show_header %} no-header{% endunless %}{% unless section.settings.show_footer %} no-footer{% endunless %}>
     {% if section.settings.show_header %}
     <div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
     {% endif %}
@@ -49,6 +49,16 @@
       "id": "modal_id",
       "label": "弹窗id （必填）",
       "default": "demo-modal"
+    },
+    {
+      "type": "select",
+      "id": "close_btn_color",
+      "label": "关闭按钮颜色",
+      "default": "white",
+      "options": [
+        { "value": "white", "label": "白色" },
+        { "value": "black", "label": "黑色" }
+      ],
     },
       {
         "type": "checkbox",