zz-shopify-components 0.3.1-beta.1 → 0.3.1-beta.10

package/blocks/zz-normal-swiper.liquid

@@ -0,0 +1,246 @@
+{% assign block_size = block.blocks.size %}
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
+    bottom: 16px;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
+    margin: 0 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    background: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet-active {
+    background: {{ block.settings.mb_pagination_color }};
+  }
+
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullets {
+      bottom: 24px;
+    }
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet {
+      margin: 0 6px;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    }
+    #shopify-block-{{block.id}} .zz-normal-swiper .swiper-pagination-bullet-active {
+      background: {{ block.settings.pagination_color }};
+    }
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      width: 48px;
+      height: 48px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev { left: 16px; }
+    #shopify-block-{{block.id}} .swiper-button-next { right: 16px; }
+  }
+
+  @media screen and (max-width: 1023px) {
+    {% if block.settings.show_navigation_mobile == false %}
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev { display: none; }
+    {% endif %}
+  }
+</style>
+
+<div
+  class='zz-normal-swiper swiper zz-normal-swiper-{{ block.id }}'
+>
+  <div class='zz-swiper-wrapper swiper-wrapper'>
+        {% for block in block.blocks %}
+    <div class='swiper-slide'>
+        {% render block %}
+    </div>
+    {% endfor %}
+  </div>
+
+  {% if block.settings.show_navigation %}
+    <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% render 'zz-prev-next-btn', type: 'prev', color_type: block.settings.prev_next_type %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+      {% render 'zz-prev-next-btn', type: 'next', color_type: block.settings.prev_next_type %}
+    </div>
+  {% endif %}
+
+  {% if block.settings.pagination_type != 'none' %}
+    <div class='swiper-pagination'></div>
+  {% endif %}
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const block = document.getElementById('shopify-block-{{block.id}}');
+    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
+    {% comment %} const slides = swiperWrapper ? swiperWrapper.querySelectorAll(':scope > div') : [];
+    slides.forEach((slide) => slide.classList.add('swiper-slide'));
+    swiperWrapper.classList.add('swiper-wrapper'); {% endcomment %}
+
+    const swiperSelector = '.zz-normal-swiper-{{ block.id }}';
+    let instance = null;
+    let initialized = false;
+
+    const options = {
+      loop: {{ block.settings.loop | json }},
+      speed: {{ block.settings.speed | default: 500 }},
+      autoHeight: {{ block.settings.auto_height | json }},
+      centeredSlides: {{ block.settings.centered_slides | json }},
+      watchOverflow: true,
+      spaceBetween: {{ block.settings.space_between | default: 8 }},
+      {% if block.settings.pagination_type != 'none' %}
+      pagination: {
+        el: '#shopify-block-{{block.id}} .swiper-pagination',
+        clickable: true,
+        type: '{{ block.settings.pagination_type }}',
+      },
+      {% endif %}
+      {% if block.settings.show_navigation %}
+      navigation: {
+        nextEl: '#shopify-block-{{block.id}} .swiper-button-next',
+        prevEl: '#shopify-block-{{block.id}} .swiper-button-prev',
+      },
+      {% endif %}
+      {% if block.settings.autoplay %}
+      autoplay: {
+        delay: {{ block.settings.autoplay_delay | default: 4000 }},
+        disableOnInteraction: false,
+        pauseOnMouseEnter: true,
+      },
+      {% endif %}
+      breakpoints: {
+        0: {
+          slidesPerView: {{ block.settings.slides_per_view_mb | default: 1 }},
+          slidesPerGroup: {{ block.settings.slides_per_group_mb | default: 1 }},
+        },
+        1024: {
+          slidesPerView: {{ block.settings.slides_per_view_pc | default: 3 }},
+          slidesPerGroup: {{ block.settings.slides_per_group_pc | default: 1 }},
+        }
+      }
+    };
+
+    function initSwiper() {
+      if (initialized) return;
+      initialized = true;
+      instance = new Swiper(swiperSelector, options);
+    }
+
+    const root = block.querySelector(swiperSelector);
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (!initialized) initSwiper();
+          {% if block.settings.autoplay %}
+          if (instance && instance.autoplay) instance.autoplay.start();
+          {% endif %}
+        } else {
+          {% if block.settings.autoplay %}
+          if (instance && instance.autoplay) instance.autoplay.stop();
+          {% endif %}
+        }
+      });
+    }, { threshold: 0.2 });
+
+    if (root) io.observe(root);
+  });
+</script>
+
+{% schema %}
+{
+  "name": "ZZ Normal Swiper",
+  "class": "zz-normal-swiper-block",
+  "settings": [
+    { "type": "color", "id": "bg_color", "default": "#ffffff", "label": "背景色" },
+    { "type": "checkbox", "id": "loop", "label": "循环播放", "default": true },
+    { "type": "range", "id": "speed", "label": "切换速度(ms)", "default": 500, "min": 100, "max": 5000, "step": 50 },
+    { "type": "range", "id": "space_between", "label": "卡片间距(px)", "default": 8, "min": 0, "max": 80, "step": 2 },
+    { "type": "checkbox", "id": "centered_slides", "label": "居中显示", "default": false },
+    { "type": "checkbox", "id": "auto_height", "label": "自适应高度", "default": false },
+
+    { "type": "checkbox", "id": "autoplay", "label": "自动播放", "default": false },
+    { "type": "range", "id": "autoplay_delay", "label": "自动播放间隔(ms)", "default": 4000, "min": 1000, "max": 9500, "step": 500, "visible_if": "{{ block.settings.autoplay == true }}" },
+
+    { "type": "select", "id": "pagination_type", "label": "分页器", "options": [
+      { "value": "none", "label": "隐藏" },
+      { "value": "bullets", "label": "圆点" },
+      { "value": "fraction", "label": "分式" },
+      { "value": "progressbar", "label": "进度条" }
+    ], "default": "bullets" },
+    { "type": "color", "id": "pagination_color", "default": "#000000", "label": "分页器颜色(PC)" },
+    { "type": "color", "id": "mb_pagination_color", "default": "#000000", "label": "分页器颜色(Mobile)" },
+
+    { "type": "checkbox", "id": "show_navigation", "label": "显示左右导航", "default": true },
+    { "type": "checkbox", "id": "show_navigation_mobile", "label": "移动端显示导航", "default": false, "visible_if": "{{ block.settings.show_navigation == true }}" },
+    { "type": "select", "id": "prev_next_type", "label": "导航颜色主题", "options": [ { "value": "dark", "label": "黑色" }, { "value": "light", "label": "白色" } ], "default": "dark" },
+
+    { "type": "range", "id": "slides_per_view_mb", "label": "可见数(Mobile)", "default": 1, "min": 1, "max": 3, "step": 1 },
+    { "type": "range", "id": "slides_per_group_mb", "label": "每次滑动(Mobile)", "default": 1, "min": 1, "max": 3, "step": 1 },
+    { "type": "range", "id": "slides_per_view_pc", "label": "可见数(PC)", "default": 3, "min": 1, "max": 6, "step": 1 },
+    { "type": "range", "id": "slides_per_group_pc", "label": "每次滑动(PC)", "default": 1, "min": 1, "max": 6, "step": 1 }
+  ],
+  "blocks": [
+    {
+      "type": "@theme"
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Normal Swiper",
+      "category": "ZZ Components",
+      "settings": {
+        "bg_color": "#ffffff",
+        "loop": true,
+        "speed": 500,
+        "space_between": 8,
+        "centered_slides": false,
+        "auto_height": false,
+        "autoplay": false,
+        "autoplay_delay": 4000,
+        "pagination_type": "bullets",
+        "pagination_color": "#000000",
+        "mb_pagination_color": "#000000",
+        "show_navigation": true,
+        "show_navigation_mobile": false,
+        "prev_next_type": "dark",
+        "slides_per_view_mb": 1,
+        "slides_per_group_mb": 1,
+        "slides_per_view_pc": 3,
+        "slides_per_group_pc": 1
+      },
+      "blocks": [
+        { "type": "zz-flex-layout-block" },
+        { "type": "zz-flex-layout-block" },
+        { "type": "zz-flex-layout-block" }
+      ]
+    },
+
+  ]
+}
+{% endschema %}

package/docs/zz-modal.md

@@ -0,0 +1,186 @@
+轻量、高性能、可扩展、可访问（a11y）的 Web Component 弹窗，基于原生 `<dialog>` 能力并内置降级方案。
+
+### 特性
+- 原生 `<dialog>`：内建焦点管理、`aria-modal`，退化时提供焦点陷阱与交互保障
+- 高性能：零依赖、轻量动画、滚动锁、Backdrop 点击关闭、ESC 关闭
+- 可扩展：Shadow DOM、`::part(...)`、CSS 变量、事件、编程式 API
+- 易用：全局触发器 `[data-zz-modal-target]`、`[data-zz-modal-close]`
+- 移动端 Drawer：加 `sheet-on-mobile` 时，小屏（≤768px）自下而上贴底弹出
+
+---
+
+### 快速开始（Shopify / Theme Section）
+在 Section 中确保加载脚本（`sections/zz-modal.liquid` 已内置）：
+
+```liquid
+<script defer id="zz-modal-js" src="{{ 'zz-modal.js' | asset_url }}"></script>
+```
+
+无 JS 安全：
+```css
+zz-modal:not(:defined) { display: none !important; }
+```
+
+Section 中通过 CSS 变量响应式配置：
+```css
+#your-modal-id {
+  --zz-modal-radius: {{ section.settings.radius_mobile }}px;
+  --zz-modal-padding: {{ section.settings.padding_mobile }}px;
+  --zz-modal-width: {{ section.settings.width_mobile }};
+}
+@media (min-width: 768px) {
+  #your-modal-id {
+    --zz-modal-radius: {{ section.settings.radius_pc }}px;
+    --zz-modal-padding: {{ section.settings.padding_pc }}px;
+    --zz-modal-width: {{ section.settings.width_pc }};
+  }
+}
+```
+
+Section 设置项（当前实现）：
+- 基本：`modal_id`（必填，挂到 `<zz-modal id="...">` 上）
+- 显隐：`show_header`、`show_footer`
+- 行为：`no_backdrop_close`（禁用遮罩点击关闭）
+- 文案：`header_text`、`footer_text`
+- 尺寸（移动/PC）：`width_mobile`、`width_pc`（支持 `px` 或 `vw`）
+- 圆角（移动/PC）：`radius_mobile`、`radius_pc`（单位 px）
+- 内边距（移动/PC）：`padding_mobile`、`padding_pc`（单位 px）
+
+> 当 slot 为空时，组件会自动隐藏 Header/Footer（属性 `no-header-auto` / `no-footer-auto`）。
+
+---
+
+### 基本用法
+
+触发按钮 + 弹窗结构：
+```html
+<button data-zz-modal-target="#demo-modal">Open Modal</button>
+
+<zz-modal id="demo-modal">
+  <div slot="header">标题</div>
+  <div>这里是内容</div>
+  <div slot="footer">
+    <button data-zz-modal-close>取消</button>
+    <button data-zz-modal-close>确定</button>
+  </div>
+  <!-- 内置关闭按钮也可用：shadow 内提供 part="close-button" 按钮 -->
+  <!-- 任何带 data-zz-modal-close 的元素都会关闭当前弹窗 -->
+  <!-- 任意元素 data-zz-modal-target="#id" 可打开对应弹窗 -->
+```
+
+移动端 Drawer 用法（≤768px 时贴底弹出）：
+```html
+<zz-modal id="m1" sheet-on-mobile>
+  <div slot="header">标题</div>
+  <div>内容</div>
+  <div slot="footer"><button data-zz-modal-close>关闭</button></div>
+  <!-- Drawer 下 body 会自动为底部预留安全区 padding -->
+</zz-modal>
+```
+
+---
+
+### 编程式 API
+```js
+const modal = document.querySelector('#demo-modal');
+modal.show();     // 打开
+modal.hide();     // 关闭
+modal.toggle();   // 切换
+// 等价别名：modal.showModal() / modal.close()
+```
+
+---
+
+### 属性（Attributes）
+- `open`：受控显示状态（加上即显示，移除即关闭）
+- `no-esc-close`：禁用 ESC 关闭
+- `no-backdrop-close`：禁用点击遮罩关闭
+- `no-scroll-lock`：禁用页面滚动锁
+- `inert-others`：打开时让页面其它区域 inert（更强的可访问隔离）
+- `no-header` / `no-footer`：强制隐藏 Header/Footer（无视 slot 内容）
+- `no-header-auto` / `no-footer-auto`：组件自动加的属性，用于在对应 slot 为空时隐藏区域
+- `sheet-on-mobile`：仅在小屏（≤768px）启用底部 Drawer 模式
+
+---
+
+### 事件（Events）
+- `zz-modal:open`
+- `zz-modal:close`
+
+监听示例：
+```js
+document.querySelector('#demo-modal')
+  .addEventListener('zz-modal:open', () => console.log('opened'));
+```
+
+---
+
+### 样式定制
+
+CSS 变量：
+- `--zz-modal-width`（默认 `min(720px, 92vw)`）
+- `--zz-modal-max-width`（默认 `90vw`）
+- `--zz-modal-max-height`（默认 `85vh`）
+- `--zz-modal-radius`（默认 `12px`）
+- `--zz-modal-padding`（默认 `16px`）
+- `--zz-modal-background`（默认 `#fff`）
+- `--zz-modal-shadow`（默认 `0 20px 60px rgba(0,0,0,0.2)`）
+- `--zz-modal-backdrop`（默认 `rgba(0,0,0,0.5)`）
+- `--zz-modal-backdrop-filter`（默认 `blur(0px)`）
+- `--zz-modal-z-index`（默认 `9999`）
+- `--zz-sheet-width`（Drawer 模式宽度，默认 `100%`）
+
+Shadow Parts：
+- `dialog`、`backdrop`、`panel`、`header`、`body`、`footer`、`close-button`
+
+示例：
+```css
+/* 外部覆盖内部部件样式 */
+zz-modal::part(dialog) { max-width: 720px; }
+zz-modal::part(panel) { border-radius: 16px; }
+
+/* 使用变量 */
+#demo-modal { --zz-modal-background: #111; color: #fff; }
+```
+
+---
+
+### 可访问性（a11y）
+- 原生 `<dialog>` 优先，具备 `aria-modal`，ESC 关闭、焦点管理
+- 降级路径提供基本焦点陷阱与键盘导航保障
+- `inert-others` 可在打开时禁用页面其他区域交互
+
+---
+
+### 无 JS 安全
+网络不佳或脚本未加载时隐藏 Light DOM，避免内容外露：
+```css
+zz-modal:not(:defined) { display: none !important; }
+```
+
+---
+
+### 多实例
+```html
+<button data-zz-modal-target="#m1">打开 1</button>
+<button data-zz-modal-target="#m2">打开 2</button>
+
+<zz-modal id="m1">...</zz-modal>
+<zz-modal id="m2">...</zz-modal>
+```
+
+---
+
+### 常见问题
+- 遮罩点击无效？检查是否设置了 `no-backdrop-close`。
+- 页面滚动未锁定？移除 `no-scroll-lock` 或确认 CSS 未覆盖 `overflow`。
+- Header/Footer 不显示？若未显式设置 `show_header/show_footer`，请确保 slot 有内容；或移除 `no-header/no-footer`。
+- 移动端仍居中？确认 `<zz-modal>` 标签加了 `sheet-on-mobile`，并且视口宽度 ≤ 768px。
+
+---
+
+### 变更位置
+- 组件实现：`assets/zz-modal.js`
+- Section：`sections/zz-modal.liquid`
+
+

package/package.json

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

package/sections/zz-flex-layout-section.liquid

@@ -184,6 +184,11 @@
       "label": "模块id",
       "info": "用于定位到本模块"
     },
+    {
+      "type": "text",
+      "id": "module_id",
+      "label": "唯一id",
+    },
   ],
   "blocks": [
     {
@@ -262,7 +267,7 @@
   }
 </style>
 
-<div 
+<div id="{{ section.settings.module_id }}"
   class="responsive-section-layout {{ section.settings.animation }}" 
   {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}>
     {% content_for 'blocks' %}

package/sections/zz-modal.liquid

@@ -0,0 +1,157 @@
+  <style>
+    zz-modal:not(:defined) { display: none !important; }
+    /* Responsive modal variables from section settings */
+    #{{ section.settings.modal_id }} {
+      --zz-modal-radius: {{ section.settings.radius_mobile }}px;
+      --zz-modal-padding: {{ section.settings.padding_mobile }}px;
+      --zz-modal-width: {{ section.settings.width_mobile }};
+    }
+    @media (min-width: 768px) {
+      #{{ section.settings.modal_id }} {
+        --zz-modal-radius: {{ section.settings.radius_pc }}px;
+        --zz-modal-padding: {{ section.settings.padding_pc }}px;
+        --zz-modal-width: {{ section.settings.width_pc }};
+      }
+    }
+  </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 %}>
+    {% if section.settings.show_header %}
+    <div slot="header" class="tw-text-[24px] tw-font-semibold">{{ section.settings.header_text }}</div>
+    {% endif %}
+    {% content_for 'blocks' %}
+    {% if section.settings.show_footer %}
+      <div slot="footer" class="tw-flex tw-justify-end tw-gap-2 tw-pt-8">
+        <button class=" tw-text-[16px] " data-zz-modal-close>{{ section.settings.footer_text }}</button>
+      </div>
+    {% endif %}
+  </zz-modal>
+
+  <script>
+    (function(){
+      var id = 'zz-modal-js';
+      if (!document.getElementById(id)) {
+        var s = document.createElement('script');
+        s.id = id;
+        s.src = '{{ 'zz-modal.js' | asset_url }}';
+        s.defer = true;
+        document.head.appendChild(s);
+      }
+    })();
+  </script>
+
+{% schema %}
+{
+  "name": "ZZ Modal",
+  "settings": [
+    {
+      "type": "text",
+      "id": "modal_id",
+      "label": "弹窗id （必填）",
+      "default": "demo-modal"
+    },
+      {
+        "type": "checkbox",
+        "id": "show_header",
+        "label": "显示 Header",
+        "default": false
+      },
+      {
+        "type": "text",
+        "id": "header_text",
+        "label": "弹窗标题",
+        "visible_if": "{{ section.settings.show_header }}",
+        "default": "弹窗标题"
+      },
+      {
+        "type": "checkbox",
+        "id": "sheet_on_mobile",
+        "label": "移动端变为底部抽屉模式",
+        "default": true
+      },
+      {
+        "type": "checkbox",
+        "id": "show_footer",
+        "label": "显示 Footer",
+        "default": false
+      },
+      {
+        "type": "text",
+        "id": "footer_text",
+        "label": "弹窗底部按钮文案",
+        "visible_if": "{{ section.settings.show_footer }}",
+        "default": "Close"
+      },
+      {
+        "type": "checkbox",
+        "id": "no_backdrop_close",
+        "label": "是否禁用遮罩点击关闭",
+        "default": false
+      },
+
+      {
+        "type": "text",
+        "id": "width_mobile",
+        "label": "移动端宽度（如 92vw 或 360px）",
+        "default": "92vw"
+      },
+      {
+        "type": "text",
+        "id": "width_pc",
+        "label": "PC 端宽度（如 720px 或 60vw）",
+        "default": "720px"
+      },
+      {
+        "type": "range",
+        "id": "radius_mobile",
+        "label": "移动端圆角(px)",
+        "min": 0,
+        "max": 40,
+        "step": 1,
+        "default": 12
+      },
+      {
+        "type": "range",
+        "id": "radius_pc",
+        "label": "PC 端圆角(px)",
+        "min": 0,
+        "max": 40,
+        "step": 1,
+        "default": 12
+      },
+      {
+        "type": "range",
+        "id": "padding_mobile",
+        "label": "移动端内边距(px)",
+        "min": 0,
+        "max": 48,
+        "step": 2,
+        "default": 16
+      },
+      {
+        "type": "range",
+        "id": "padding_pc",
+        "label": "PC 端内边距(px)",
+        "min": 0,
+        "max": 64,
+        "step": 2,
+        "default": 20
+      }
+
+  ],
+  "blocks": [
+    {
+        "type": "@theme",
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Modal",
+      "category": "ZZ Components"
+    }
+  ]
+}
+{% endschema %}
+
+
+

package/sections/zz-navigation-tab-v3.liquid

@@ -205,7 +205,7 @@
         tab.addEventListener('click', () => {
           const id = tab.dataset.target;
           const target = document.querySelector(`[data-zz-module-name="${id}"]`);
-          const headerHeight = isDesktop ? 64 : 44;
+          const headerHeight = isDesktop ? 64 : 50;
           const offsetTop = target.offsetTop - headerHeight;
           scrollPaginationToCenter();
           window.scrollTo(0, offsetTop);
@@ -247,8 +247,8 @@
               if(isDesktop) {
                 currentSection.style.top = iptipsBoxHeight + 'px';
               } else {
-                // 后期移动端要加上导航栏的高度 44
-                currentSection.style.top = iptipsBoxHeight  + 44 + 'px';
+                // 后期移动端要加上导航栏的高度 50
+                currentSection.style.top = iptipsBoxHeight  + 50 + 'px';
               }
               
             } else {
@@ -256,7 +256,7 @@
                if(isDesktop) {
                 currentSection.style.top = '0px';
                } else {
-                currentSection.style.top = '44px';
+                currentSection.style.top = '50px';
                }
             }
           } else {
@@ -371,7 +371,7 @@
    @media screen and (max-width: 1024px) {
     #shopify-section-{{ section.id }} {
       z-index: 499;
-      top: 44px;
+      top: 50px;
     }
     #shopify-section-{{ section.id }} .{{ btn_class }} {
       height: 28px;

package/sections/zz-shopping-card-list.liquid

@@ -143,9 +143,6 @@
   <div class='swiper zz-shopping-cart-list-swiper'>
     <div class='swiper-wrapper'>
       {% for block in section.blocks %}
-        {%- comment %}<locksmith:881a>{% endcomment -%}
-          {%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: block.settings.product, subject_parent: section, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% else %}{% continue %}{% endif -%}
-        {%- comment %}</locksmith:881a>{% endcomment -%}
         <div class='swiper-slide {% if block_size > 1 %} max-lg:tw-pb-[60px]  {% endif %}'>
           <div class='banner-item tw-rounded-[10px] lg:tw-rounded-[16px] tw-flex tw-flex-col tw-justify-between'>
             <div class='tw-h-[168px] lg:tw-h-[214px] tw-overflow-hidden tw-rounded-t-[10px] lg:tw-rounded-t-[16px] tw-flex-shrink-0'>