Shopify 主题与 Liquid

Liquid 循环里嵌套 include 导致内容重复输出

现象#

列表里每个商品都渲染了两遍甚至多遍,或者同一段 HTML 在页面里重复出现,删掉一层才正常。

原因#

  • 循环外层已经输出了一次,snippet 内又输出一次
  • include 会把 snippet 内容直接插入,写在 for 里就是每轮插一次,配合外层 capture 造成累积
  • snippet 内部又 include 了自己,形成隐式递归
  • AJAX 渲染局部模板时又把整段列表返回,前端 append 造成重复

处理步骤#

  1. 在每个 render / include 前后加注释标记,定位重复来源
  2. 把 snippet 改成只负责单条渲染,列表交由外层循环
  3. 检查 snippet 内是否 include 自身,改为条件判断或拆分
  4. AJAX 局部刷新时只返回目标区块的 HTML,前端用 replaceWith 而不是 append

验收标准#

页面中每条数据只出现一次,DOM 数量与数据条数一致。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。