Shopware6中Angular集成如何通过API添加商品到前台购物车？

核心问题原因 #

你单独调用/store-api/context获取的context-token对应的是独立的匿名购物车，和前台storefront会话绑定的购物车并非同一个，所以直接用这个token调用添加商品API不会影响前台购物车。

解决方案 #

1. 获取前台会话对应的context-token

Storefront会将当前上下文信息暴露在全局变量window.Shopware.context中，直接读取其中的contextToken即可拿到和前台会话绑定的token：

// Angular组件中获取当前会话的context-token
const contextToken = window.Shopware.context.contextToken;

• 若Angular应用与storefront同域名嵌入，可直接访问该全局变量；跨域场景需通过postMessage机制从storefront页面传递token。

2. 正确调用添加商品API

调用/store-api/checkout/cart/line-item时，需同时携带context-token和前台会话cookie，确保操作的是同一个购物车：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

addToCart(productId: string, quantity: number) {
  const contextToken = window.Shopware.context.contextToken;
  const requestUrl = '/store-api/checkout/cart/line-item';
  const requestBody = {
    lineItems: [
      {
        type: 'product',
        id: productId,
        quantity: quantity
      }
    ]
  };

  return this.http.post(requestUrl, requestBody, {
    headers: {
      'sw-context-token': contextToken
    },
    withCredentials: true // 关键：携带storefront会话cookie
  });
}

3. 同步更新前台购物车UI

商品添加成功后，若需实时刷新storefront的购物车显示，可调用storefront内置的全局方法：

// 触发前台购物车UI刷新
window.Shopware.PluginManager.getPluginInstance('SwagCart').refresh();

4. 常见排查点

• 验证token一致性：在storefront控制台输入window.Shopware.context.contextToken，对比Angular应用获取的token是否相同；
• 检查跨域配置：跨域场景下需确保API请求开启withCredentials: true，且Shopware后台已配置允许跨域的域名；
• 核对请求体格式：lineItems的type必须为product，id需传入商品的UUID而非SKU。

内容的提问来源于stack exchange，提问作者Lukas Niestrat