小爱音箱音乐自由革命：3大核心优势揭秘
Shopify Code Snippets 技巧：不依赖 jQuery 用 JSONP 获取购物车数据
项目地址: https://gitcode.com/gh_mirrors/sho/Shopify-code-snippets Shopify Code Snippets 是一个精选的 Shopify 代码技巧合集，其中「Get Shopify cart data with JSONP」片段演示了如何不依赖 jQuery、用纯原生 JavaScript 通过 JSONP 获取购物车数据，完美绕过跨域限制，适合在站外博客中展示你的 Shopify 商店购物车内容。
为什么需要 JSONP 获取购物车数据？
🤔 想象这样的场景：你的 Shopify 商店域名是 yourstore.myshopify.com，但你的博客运行在另一个平台（比如 WordPress 或独立域名）。你想在博客的侧边栏显示"购物车里有 3 件商品，合计 ¥399"。
直接调用 Shopify 的 AJAX 购物车接口会遇到 CORS 跨域错误——浏览器会直接拦截跨域请求，让你抓瞎。
JSONP 就是为此而生的老方案：它通过动态插入 <script> 标签加载数据，而 <script> 标签天然不受同源策略限制。这就是 JSONP 获取购物车数据的原理。
不依赖 jQuery：原生 JavaScript 版本
📝 推荐直接看原生 JS 实现，文件位于：
Get Shopify cart data with JSONP/cart-jsonp-plain.js
完整实现只有 8 行，核心思路分三步：
- 先定义回调函数，用来接收 Shopify 返回的购物车 JSON 数据；
- 动态创建一个
<script>标签，把它指向cart.json接口，并在 URL 上带一个callback参数； - 把这个 script 标签挂到页面的
<head>里，浏览器加载脚本时，Shopify 会自动把数据作为参数"喂"给你的回调函数。
关键片段如下（数据到手后，你可以渲染成商品列表、数量或小计金额）：
function getCartData(data){
/* 对数据做一些事情，这里只是打印 */
console.log(data)
}
var script = document.createElement('script');
script.src = 'https://jasons-experiments.myshopify.com/cart.json?callback=getCartData'
document.getElementsByTagName('head')[0].appendChild(script);
💡 注意两个细节：
callback参数的值必须和回调函数名getCartData完全一致，写错一个字母都会静默失败；- 把示例中的域名替换成你自己的 myshopify 域名即可，几行代码就能上线。
对比：jQuery 版本长什么样？
项目同时提供了一个 jQuery 版本，位于：
Get Shopify cart data with JSONP/cart-jsonp-jquery.js
它用 $.ajax 并指定 dataType: 'jsonp'，由 jQuery 帮你自动处理随机回调函数名：
$.ajax({
dataType:'jsonp',
url: 'https://jasons-experiments.myshopify.com/cart.json?callback=?',
success: function(d){ console.log(d) }
});
两版对比可以明显看出：原生版本把"手动"的部分全部暴露出来——自己写函数名、自己插 script 标签。理解了它，你就能在任何没有 jQuery 的环境（现代 SPA、PWA 页面）里复现同样的效果，这正是不依赖 jQuery 用 JSONP 获取购物车数据的价值所在。
进阶：想要 compare-at 价格怎么办？
⚠️ 一个常见的坑：Shopify 默认的 cart.json 不包含 compare-at price（比较价/划线价）。如果你的购物车展示需要"原价 vs 现价"，可以借鉴项目里另一个思路：
- 创建一个自定义模板
cart.compare.liquid，在模板里输出包含比较价的 JSON 字符串 - 通过
?view=compare参数访问该模板
相关文件：
Get a cart json response with compare at price/cart.compare.liquidGet a cart json response with compare at price/README.md
这样 JSONP 拿到的就不只是"商品 + 数量"，而是完整的购物车展示数据。
顺手学一招：用 Fetch API 往购物车加商品
🛒 既然已经在折腾购物车数据，不妨看看仓库里另一条实用链路——用 Fetch API 直接加购（文件：Add item to cart with the JavaScript Fetch API/add-item-to-cart-with-fetch.js）。
它有一个容易被忽略的关键点：POST 请求必须带上 X-Requested-With 请求头，否则会收到 Bad Request 错误。这与 JSONP 读数据一增一减，正好凑成完整的购物车读写组合。
写在最后
这份 Shopify 代码技巧合集共收录了 30 多个实战片段，覆盖主题模板、Liquid 技巧、Shopify Scripts 等方向。本次重点介绍的 JSONP 方案虽然"古老"，但对于站外展示购物车内容这一需求，依然是最简单、最可靠的解法——不依赖 jQuery、8 行代码即可落地。建议从 Shopify Code Snippets 项目 克隆源码，照着 Get Shopify cart data with JSONP 目录里的两个文件实践一遍，十分钟就能跑通。
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
1
0- 0
已为社区贡献47条内容
所有评论(0)