购物车按钮需正确绑定商品数据并确保前后端参数严格对齐：使用data-sku-id等语义化属性传递关键字段，防重复提交与空值校验，fetch发送JSON格式请求，后端校验SKU存在性与库存，响应返回cart_item_id等最小必要数据，并实时更新按钮状态。
购物车按钮本身不难加，难的是加完能真正把商品信息传进购物车系统——多数人卡在数据没对齐、点击没响应、或者加了但后端收不到。
按钮 HTML 结构要带商品关键字段
纯 <button></button> 标签没用，必须把 product_id、sku_id、price、quantity 这些信息以可读又可取的方式挂载上。推荐用 data- 属性，别藏在 class 里或靠 DOM 位置硬找。
常见错误：写成 <button class="add-cart" data-id="123"></button>，结果后端要的是 sku_id，而页面实际展示的是 SKU 变体（比如“红色-L”），data-id 却还是主商品 ID，一加就串货。
- 用
data-sku-id而非data-product-id，尤其多规格商品 -
data-price建议用分单位整数（如data-price="5990"），避免小数精度和 locale 格式干扰 - 如果默认加 1 件，
data-quantity="1"；若支持用户选数量，绑定到实时输入框的value，别写死
JavaScript 绑定点击时得防重复提交和空数据
用户手快连点两下，后端可能收到两条相同订单项；更糟的是 data-sku-id 拿不到就直接发请求，后端报 400 Missing sku_id，前端却没提示。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 点击后立刻给按钮加
disabled和 loading 状态，用button.setAttribute('disabled', '')，别只靠 CSS 遮罩 - 取值前先检查：
const skuId = btn.dataset.skuId?.trim()，空值或空白字符串直接return - 发请求用
fetch时设method: 'POST'，body用JSON.stringify({ sku_id: skuId, quantity: +qty })，别拼 query string - 响应处理必须分情况：
if (res.ok)成功，else if (res.status === 409)提示“库存不足”，不能全塞进一个catch
后端接口接收参数要和前端严格对齐
前端传 sku_id，后端却解析 product_id 字段；前端传整数价格 5990，后端当成字符串去乘除——这类错不会报语法错误，但加购金额永远不对。
验证方法很简单：打开浏览器 DevTools → Network → 点一下按钮 → 找到对应请求 → 看 Payload 是不是你预期的 JSON 结构，再看 Response 是不是返回了购物车新总数或新条目 ID。
- 后端必须校验
sku_id是否存在、是否上架、库存是否 ≥ 请求 quantity - 不要信任前端传来的
price，应以服务端查出的实时价为准，前端 price 仅作展示同步参考 - 成功响应建议返回最小必要数据，例如：
{ "cart_item_id": "ci_abc123", "total_count": 3 }，方便前端更新角标
最常被忽略的一点：加入购物车后，按钮文案和状态没反馈。用户点了没反应，会再点、刷新、甚至怀疑网站坏了。哪怕只是把按钮文字从“加入购物车”临时改成“已加入”，也比静默强得多。
