每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 2 个月前

把 Liquid 数据塞进 JS 时引号把页面搞崩了

2 个回答 322 次浏览 主题与 Liquid 最后活跃 2 个月前
16

写 var title = "{{ product.title }}";,商品名里带英文双引号,整个脚本块直接语法错误,页面交互全挂。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
2 个月前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
78

先把判断放在前面:Liquid 输出的是原始字符串,不会为 JS 上下文做转义," 会提前闭合字符串。

1处理顺序

  1. 用 {{ product.title | json }},它会输出合法的 JSON 字符串(带引号),不要再手写外层引号。
  2. 需要整块数据时输出 {{ product | json }},但注意这会把体积很大的字段一起带出来,酌情用 | json 配合 map 精简。
  3. 不要在 HTML 属性里再嵌套 JSON,改用 <script type="application/json" id="product-data"> 承载,JS 侧 JSON.parse 读取。
  4. 输出前加 | escape 只适合 HTML 上下文,JS 字符串上下文必须用 json,两者不能混。
  5. 用带引号、换行、表情符号的商品名各测一次。
验收:商品名包含双引号、单引号、换行时,页面脚本无报错且数据完整。
风 风格技术团队 回答于 2 个月前
20

还有一个更隐蔽的坑:{{ product.description }} 里带 </script> 会直接截断脚本块。用 json 过滤器转义后仍可能保留 <,稳妥做法是把数据放在 <script type="application/json"> 里,并过滤掉 </。

泽 阿泽 · 前端工程师 · 2 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu