Shopware外部落地页购物车交互问题：无法复用及跳转结账

一、解决购物车复用问题 #

核心是让外部落地页和Shopware主站共享购物车的contextToken：

• 创建购物车成功后，把返回的contextToken存入用户浏览器的Cookie，要和主站用相同的域名（或配置跨域Cookie）：

  // 示例：假设接口返回的contextToken为"abc-123-xyz"
  document.cookie = `sw-context-token=abc-123-xyz; path=/; domain=.your-shop-domain.com; SameSite=Lax; Secure`;
  

• 后续在外部页面加购时，先从Cookie读取contextToken，如果存在就直接用它调用加购接口，不用重新创建context和购物车：

  // 读取Cookie中的contextToken
  const getContextToken = () => {
    const cookieArr = document.cookie.split('; ');
    for (let cookie of cookieArr) {
      if (cookie.startsWith('sw-context-token=')) {
        return cookie.split('=')[1];
      }
    }
    return null;
  };
  
  const contextToken = getContextToken();
  if (contextToken) {
    // 携带contextToken调用加购接口
    fetch('/api/v3/checkout/cart/line-item', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'sw-context-token': contextToken,
        'sw-access-key': '你的销售渠道访问密钥'
      },
      body: JSON.stringify({
        items: [{ id: '商品ID', quantity: 1 }]
      })
    });
  }
  

二、打通正常结账流程 #

要保证外部创建的购物车能被主站识别并进入结账：

• 创建context时必须和主站使用相同的salesChannelId、currencyId、languageId，否则主站不认这个购物车：

  fetch('/api/v3/context', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'sw-access-key': '你的销售渠道访问密钥'
    },
    body: JSON.stringify({
      salesChannelId: '你的销售渠道ID',
      currencyId: '你的货币ID',
      languageId: '你的语言ID'
    })
  });
  

• 外部页面的结账按钮跳转到主站结账页时，要么确保Cookie已同步，要么在URL里带上contextToken参数：

  <a href="https://your-shop-domain.com/checkout?sw-context-token=abc-123-xyz" class="checkout-btn">去结账</a>
  

  主站会自动读取Cookie或URL里的contextToken，加载对应的购物车进入标准结账流程。

三、必看注意事项 #

• 跨域Cookie设置：如果外部页和主站域名不同，要在Shopware后台的「Settings > System > CORS」里添加外部页域名，开启「Allow credentials」。
• 权限验证：所有API请求必须带正确的sw-access-key，没有这个密钥无法操作购物车接口。
• 状态同步：外部页修改购物车后，建议调用GET /api/v3/checkout/cart接口获取最新状态，确保和主站数据一致。

内容的提问来源于stack exchange，提问作者Fabian Blechschmidt