纯HTML无法实现“加入购物车”功能，必须配合data-product-id属性、type="button"声明、≥44×44px点击区域及aria-busy/disabled双重状态控制，缺一不可。
纯 HTML 无法实现“加入购物车”功能，按钮只是触发点，真正起作用的是它携带的 data-product-id 和绑定的 JavaScript 逻辑。放错位置、缺关键属性、没防重复点击，按钮就等于摆设。
按钮必须带 data-product-id 才能被 JS 正确识别
这是整个加购链路的起点。没有这个属性，JS 就不知道点的是哪件商品，后续所有逻辑都会失效。
- 错误写法：
<button>加入购物车</button>（无任何标识） - 安全写法：
<button type="button" data-product-id="1057">加入购物车</button> - 有 SKU 变体时建议补
data-sku-id="sku-2093"，避免主 ID 冲突 - 服务端渲染时，确保该值与后端
/cart/add接口要求的product_id字段类型一致（字符串 or 数字）
type="button" 不是可选项，是防止表单误提交的底线
浏览器默认 <button></button> 的 type 是 submit。只要按钮在 <form></form> 内，不显式声明就会触发表单提交——页面刷新、请求中断、购物车清空。
- 错误：
<form><button>加入购物车</button></form>（隐式 submit） - 正确：
<button type="button" data-product-id="1057">加入购物车</button>（无论是否在 form 内） - 如果真要用表单（比如带数量输入框），必须配合
event.preventDefault()+ fetch，但没必要自增复杂度
移动端点击区域必须 ≥ 44×44px，且不能靠 inline-block 拼间隙
这不是“体验优化”，是 WCAG 合规硬性要求。iPhone 上点不中，不是用户手抖，是布局写错了。
立即学习“前端免费学习笔记（深入）”；
- 别只加
padding: 12px就完事——inline-block元素间换行符会生成空白间隙，实际宽度缩水 - 推荐用
display: block或flex布局，配合min-width: 44px; min-height: 44px - 用
aria-busy="true"+disabled双重锁定状态，光靠 CSS 类名（如.loading）不可靠 - 失败后恢复按钮状态，同时显示具体提示（如 “库存不足”），而不是只写 “请求失败”
最常被忽略的一点：按钮本身不存状态，也不发请求。它的价值完全取决于是否把 data-product-id 传准、是否阻断了默认行为、是否在真实触控环境下可稳定触发——其他全是锦上添花。
