Shopify CLI 与 Headless

cartId 存 localStorage 导致购物车串号

现象#

同一浏览器先以游客加购,再登录另一个账号,购物车仍是前一个游客的商品;换设备打开却是空车,localStorage 里还留着旧的 cartId。

原因#

  • cartId 就是购物车的唯一凭证,任何人拿到都能读写,跨账号复用等于共用一辆车
  • localStorage 按域名隔离但不按用户隔离,登出时不清除就会被下一个会话继承
  • cart 与 buyerIdentity 绑定,登录后没调 cartBuyerIdentityUpdate 就仍是游客车
  • SSR 首屏读不到 localStorage,服务端渲染空车,客户端 hydrate 后数量突然跳变

处理步骤#

  1. 把 cartId 放进 HttpOnly cookie,由 loader 在服务端读取后传给 cart.query
  2. 登出时同时清两边:document.cookie = 'cartId=; Max-Age=0; path=/'
  3. 登录成功后调 cartBuyerIdentityUpdate,把 customerAccessToken 绑到当前 cart
  4. cartCreate 之前先查已有 cart,存在就复用,避免多标签页各建一个
  5. SSR 阶段用 cookie 里的 cartId 预取,客户端不再二次创建覆盖

验收标准#

切换账号后购物车数量归零或为该账号原有购物车;两个标签页分别加购后 totalQuantity 一致。

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