购物车按钮需确保后端接口就绪，采用data属性动态绑定sku等信息，用原生fetch调用post接口并处理401/400错误、禁用防重提交，成功后通过响应cart_count或localstorage+storage事件更新角标，前置校验登录、库存等错误边界。
购物车按钮要能点，得先确认后端接口是否就绪
很多前端同学一上来就写 onclick，结果点击没反应，根本原因是没搞清「加购」是纯前端行为还是必须走后端。真实项目里，95% 的详情页加购都依赖后端 API（比如 /api/cart/add），前端只负责传商品 ID、规格参数、数量。如果后端还没提供这个接口，按钮再漂亮也没用——先找后端确认接口地址、请求方法（通常是 POST）、必填字段（如 sku_id、quantity）。
按钮 HTML 结构要带明确的 data 属性，别硬编码 ID
别这么写：<button onclick="addToCart(123)">加入购物车</button>。ID 写死会导致组件复用困难，也容易在 SSR 或多 SKU 场景下出错。应该用 data- 属性动态挂载信息：
<button class="btn-add-cart" data-sku-id="<%= sku.id %>" data-product-id="<%= product.id %>" data-default-qty="1"> 加入购物车 </button>
这样 JS 可统一绑定事件，且兼容服务端渲染和后续规格选择逻辑。
用原生 fetch 就够了，别一上来就套框架封装
详情页加购动作简单、路径固定，用原生 fetch 更轻量、更可控。常见翻车点：
- 忘记加
Content-Type: application/json，导致后端收不到 body - 没处理
401（未登录）或400（库存不足），按钮点了没反馈，用户以为卡了 - 没禁用按钮防止重复提交，网络慢时用户狂点，后端收到多条相同请求
示例片段（带基础防护）：
document.querySelectorAll('.btn-add-cart').forEach(btn => {
btn.addEventListener('click', async function() {
const skuId = this.dataset.skuId;
const qty = parseInt(this.dataset.defaultQty) || 1;
this.disabled = true;
this.textContent = '添加中...';
try {
const res = await fetch('/api/cart/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ sku_id: skuId, quantity: qty })
});
if (res.ok) {
alert('已加入购物车');
} else if (res.status === 401) {
location.href = '/login?redirect=' + encodeURIComponent(location.pathname);
} else {
const err = await res.json();
alert(err.message || '添加失败，请重试');
}
} catch (e) {
alert('网络异常，请检查连接');
} finally {
this.disabled = false;
this.textContent = '加入购物车';
}
});
});
加购成功后，购物车角标怎么实时更新？
前端通常不主动轮询，而是靠「加购成功响应体里带最新数量」来更新 UI。后端返回建议包含 cart_count 字段，前端直接写进 badge 元素：
// 假设响应是 { success: true, cart_count: 3 }
document.querySelector('.cart-badge').textContent = data.cart_count;
如果首页/顶部导航栏的购物车角标不在当前页面 DOM 里（比如是独立组件或 iframe），就得用 localStorage + storage 事件同步：
localStorage.setItem('cart_updated', Date.now().toString());
然后在其他监听页用 window.addEventListener('storage', ...) 捕获并刷新角标。注意 Safari 无痕模式下 localStorage 会抛错，得包一层 try/catch。
最常被跳过的其实是错误边界：没登录、库存为 0、SKU 已下架、限购超限——这些状态得在按钮渲染阶段就判断并置灰/隐藏，而不是等点击后再弹错。后端最好在商品详情接口里直接返回 can_add_to_cart: false 和 reason: "out_of_stock"，前端据此控制按钮态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
