如何用 Shopify Code Snippets 用 Liquid 获取购物车 Token快速解锁自定义加购【免费下载链接】Shopify-code-snippetsShopify code examples and tips项目地址: https://gitcode.com/gh_mirrors/sho/Shopify-code-snippetsShopify Code Snippets 是一个汇集 Shopify 代码示例与实战技巧的开源代码片段库其中「Get cart token with Liquid」片段教你用两行 Liquid 从购物车对象中间接提取 token配合 Fetch API 就能实现不依赖官方按钮的自定义加购功能。本文将带你快速上手这个免费方案。购物车 Token 是什么为什么自定义加购需要它在 Shopify 里实现加入购物车本质上是向购物车接口发送一条请求。Shopify 的购物车数据通过 JSON 接口输出而每次加购、改量的操作都与一段隐藏的cart token绑定——它相当于一把购物车钥匙用来确认请求归属哪个购物车会话。问题来了Shopify 不允许在 Liquid 中直接读取 token 字段。官方没有提供cart.token这样的写法但通过一个小技巧可以间接拿到它这正是本仓库片段的价值所在 ️。两步提取用 Liquid 拿到购物车 Token核心思路非常简单序列化把整个cart对象转成 JSON 字符串切割按token:这个标记把字符串切开取最后一段再按引号切出 token 值。对应片段文件位于Get cart token with Liquid/get-cart-token.liquid其核心逻辑如下{%- assign cartJson cart | json -%} {%- assign cartToken cartJson | split:token: | last | split: | first -%} My cart token is {{ cartToken }}.把这段代码放进任意模板比如页脚页面渲染时就会输出当前购物车的 token方便你在前端 JS 中读取。原理讲解见 Get cart token with Liquid/README.md 对应的说明文档。拿到 Token 后用 Fetch API 完成自定义加购提取 token 只是第一步真正加购要靠 JavaScript。仓库中Add item to cart with the JavaScript Fetch API/add-item-to-cart-with-fetch.js提供了一个完整示例三个关键点接口向/cart/add.js发送POST请求参数请求体包含商品变体 ID注意不是商品 ID和数量表头必须携带X-Requested-With: xmlhttprequest请求头否则请求会直接报 400 Bad Request ❌。响应同样是 JSON你可以在回调里读取加购结果、刷新购物车角标或弹出提示完全由你的 UI 决定。配套能力让购物车玩法更进一步 单独掌握 token Fetch 已经能完成自定义加购仓库里还有几个片段值得搭配使用能力文件位置说明持久化购物车Shopify persitent cart without apps/persistent-cart.js.liquid不装任何 App用 Cookie 让购物车跨会话留存含对比价的购物车 JSONGet a cart json response with compare at price/cart.compare.liquid自定义模板输出对比价数据打造折扣角标站外购物车读取Get Shopify cart data with JSONP/cart-jsonp-plain.js通过 JSONP 在独立博客站上展示本店购物车其中持久化购物车的实现依赖hmac_sha256过滤器对顾客 ID 做签名说明文档强调这段代码需要放在 Liquid 模板中执行而不能只放在纯 JS 资源文件里——这也是学习 Shopify 模板与脚本分工的好例子。避坑清单自定义加购常见报错排查400 Bad Request九成是漏了X-Requested-With请求头先检查这一点加购到错误商品确认传的是变体 ID而非商品 ID两者位数和数值完全不同token 取出来是空的检查 Liquid 切割用的标记是否与当前主题输出的 JSON 格式一致可先在页面上打印cartJson核对跨站请求失败非同域请求会触发 CORS 限制此时可参考 JSONP 片段的思路绕开。写在最后Shopify Code Snippets 用小片段、讲透原理的方式把购物车 token 提取、自定义加购、持久化购物车这些常见需求拆解成了可直接套用的代码。建议从Get cart token with Liquid片段起步结合 Fetch 加购示例跑通第一个自定义加购按钮再逐步尝试仓库中的进阶玩法。动手写一遍比读十篇教程都管用 ✍️。【免费下载链接】Shopify-code-snippetsShopify code examples and tips项目地址: https://gitcode.com/gh_mirrors/sho/Shopify-code-snippets创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考