Bricks 对 SureCart v3+ 的集成提供了现成的「加购按钮（Add-to-Cart button）」元素，单产品页和查询循环里都能用。但如果我们需要的不只是一个纯文字按钮，比如要可以嵌套内容的自定义按钮，就可以用其他 Bricks 元素拼一个，获得更多控制权。
本教程带你完成：
创建按钮
第一步是创建自定义按钮。
第 1 步：选元素
想要最大灵活性，创建自定义按钮的最佳元素是 div。用 div 可以保证没有任何默认样式，而且能往里面嵌套任意元素（Button 元素就不行）。
第 2 步：变成真正的按钮
我们得让这个元素是实际意义上的按钮，而不是 div。方法：把 HTML 标签改成 button——在下拉框里选 ‘custom’（自定义），然后自定义标签填 ‘button’：
第 3 步：添加按钮内容
这个例子里，我们用 Bricks 的图标（icon）元素在按钮里放一个购物车图标。（如果按钮里不打算放任何文字，记得给按钮加 aria-label 属性。）
这里放什么都可以，图标只是个简单示例。
然后给 div 元素设置样式，让它看起来更像按钮：背景、内边距、hover/focus 样式等等。
第 4 步：在结构里的摆放位置
要让新按钮能把当前产品加入购物车，它在结构中的位置很重要，SureCart 才能用得上这个按钮。
如果在单产品页（single product view） ——按钮必须放在 ‘Product’（产品）元素内部的某个位置。
如果在产品查询循环里 ——按钮必须放在 ‘Product Card’（产品卡片）元素内部的某个位置（见上文结构图）。
前端点击这个按钮，就会把当前产品加入购物车。
添加加载动画
SureCart 默认的加购按钮点击后会有个小加载动画，在购物车打开前给出「正在处理」的视觉反馈。这是用 Interactivity API 给按钮加一个 ‘busy’（忙碌中）类实现的。
我们可以在自定义按钮上复刻这个行为：给新按钮添加下面这个自定义属性：
Name（名称） – data-wp-class--bl-add-to-cart__busy
Value（值） – context.busy
这样，按钮被点击后、购物车打开前，会加上 bl-add-to-cart__busy 这个类（你可以改成任意类名）。用 %root%.bl-add-to-cart__busy 选择器，就能只在按钮 ‘busy’ 状态下设置样式。
下面做个能跑的示例：用我们的 bl-add-to-cart__busy 类，复刻默认加购按钮同款 spinner（旋转加载圈）。把这段 CSS 直接加到新按钮元素的 CSS 设置里：
%root% {
position: relative;
}
/* add spinner to ::before */
%root%::before {
--track-color: #0d131e20;
--stroke-width: 2px;
--spinner-size: 1em;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border: solid var(--stroke-width) var(--track-color);
border-radius: 50%;
border-right-color: currentColor;
border-top-color: currentColor;
display: inline-block;
height: var(--spinner-size);
width: var(--spinner-size);
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
left: calc(50% - 8px);
opacity: 0;
position: absolute;
top: calc(50% - 8px);
visibility: hidden;
content: '';
transform: none;
}
/* reveal spinner only when button busy */
%root%.bl-add-to-cart__busy::before {
opacity: 1;
visibility: visible
}
/* hide other button content when button busy */
%root%.bl-add-to-cart__busy > * {
opacity: 0;
visibility: hidden;
}原理：用 ::before 伪元素加一个 spinner，然后随着 bl-add-to-cart__busy 类的添加/移除，切换按钮内容和 spinner 的显示与隐藏。
现在点击按钮后，spinner 就会出现：
想在构建器里临时预览 spinner 方便调样式？把 bl-add-to-cart__busy 类加到「CSS classes」选项里（就在自定义 CSS 输入框下面），调完再删掉。
添加 Tooltip
取决于按钮内容和设计，给按钮加一个 hover/focus 时显示的 Tooltip，告诉用户这个按钮是干嘛的，是个好主意。
添加 Tooltip 的方式和给 Bricks 其他元素添加类似，不过我们要的是 hover 时显示、不是点击时显示——因为点击按钮会触发购物车。
简单 CSS Tooltip
Bricks 内置了 CSS tooltip，可以加到任意元素上、hover 时显示。给新按钮元素添加下面两个自定义属性即可：
Name – data-balloon
Value – Add to cart
Name – data-balloon-pos
Value – top
响应式 Tooltip
如果你希望 tooltip 位置能自动调整、根据可用空间保证始终可见，那就需要 JS 方案了。二选一：
- 按这篇教程手动加到你的按钮元素上：https://brickslabs.com/how-to-create-responsive-tooltips-in-bricks/
- 或者往页面里加一个 BricksExtras Tooltip/Popover 元素，这个功能是内置的：把元素设为 ‘tooltip’ 模式，用户交互设为 ‘mouseenter and focus’，然后填上你的按钮类名，就能一次性覆盖页面上所有加购按钮。之后可以直接在按钮元素的 Tooltip > Tooltip content 里改提示文字。
搞定
现在我们的自定义按钮有了：产品加购时的 spinner 动画，以及 hover 时提供上下文说明的 tooltip。