已解决提问于 8 天前

商品变体和库存怎么安全地传给前端 JS

2 个回答 620 次浏览主题与 Liquid 最后活跃 4 天前

做变体选择器时直接把 {{ product.variants | json }} 塞进脚本，变体一多页面就卡，偶尔还报 JSON 解析错误。

陈

陈工提问者

Shopify 认证开发者 · 专注主题与 Liquid

8 天前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决

先把判断放在前面：product.variants | json 会输出全部字段，几十个变体就是几百 KB；字段里带特殊字符时手写拼接容易破坏 JSON。

只输出前端真正需要的字段，用 map 无法在 Liquid 里完成时，改在 JS 里裁剪。
输出放在 <script type="application/json" id="variants-data"> 里，JS 侧 JSON.parse(document.getElementById('variants-data').textContent)。
变体数量超过 100 时考虑用 Storefront API 按需拉取，别一次性内联。
价格统一输出「分」为单位的整数，前端再格式化，避免浮点误差。
用带 emoji 和引号的选项值测一遍解析。

验收：变体切换正确，控制台无解析错误，页面 HTML 体积在可接受范围内。

风 风格技术团队 回答于 7 天前

补一个实用做法：用 {%- assign v_json = product.variants | json -%} 后仍然很大时，可以只输出 id / title / available / price / option1..3，自己拼一个精简数组，体积通常能降 70%。

泽阿泽 · 前端工程师 · 6 天前

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

描述你遇到的现象、店铺环境（主题 / 套餐 / 应用）、已经试过哪些操作……

我要单独提问工作日 10 分钟内回复，可直接加微信 fenggejishu