sku-button
收藏我的收藏
收藏基础库 3.43.0.0 开始支持本组件。
商品规则选择按钮组件提供了商品规格选择的能力，并能在用户选择完之后进行下单或者加入购物车。
前置条件
- 1.参考 电商小程序接入指南 完成小程序及资质的准备；
- 2.参考 申请行业插件 完成插件的申请，注意只有小程序拥有电商类目资质才可见申请入口；
- 3.参考 使用行业插件 进行能力的调用；
行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。
在使用组件时需要在页面
index.json 文件中进行引入。
{ "usingComponents": { "sku-button": "tt95aee3130ae1cbe911://sku-button" } }
Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 APP。
效果示例
属性说明
属性名 | 类型 | 默认值 | 是否必填 | 说明 |
shop-id | string | -- | 是 | 店铺 ID |
product-id | string | -- | 是 | 商品 ID |
action-type | number | 2 | 否 | 规格选择后的行为，可取值 1（加购）、2（立购） |
hidden | boolean | false | 否 | 按钮是否显示 |
disabled | boolean | false | 否 | 按钮是否禁用 |
no-style | boolean | false | 否 | 是否关闭默认样式，关闭后仅剩按钮文案，可配合其它样式属性进行充分的样式自定义 |
size | string | default | 否 | 按钮大小，可取值 default、mini |
type | string | primary | 否 | 按钮样式类型，可取值 default、primary |
style | string | -- | 否 | 按钮內联样式 |
class | string | -- | 否 | 按钮样式类 |
disabled-class-name | string | -- | 否 | 禁用状态下的按钮样式类 |
text | string | 立即购买/加入购物车 | 否 | 按钮文案 |
bind:success | function | -- | 否 | 规格选择面板打开成功回调 |
bind:error | function | -- | 否 | 组件发生错误回调 |
代码示例
<sku-button shop-id="12345678" product-id="12345678" action-type="{{2}}" bind:success="handleSuccess" bind:error="handleError" ></sku-button>
自定义样式说明
- •可以传入自定义的类名
class 来覆盖按钮样式。- •按钮禁用的样式可以采用类选择器实现以进行自定义覆盖。
- •也可以关闭所有默认样式
no-style 进行完全的自定义实现。<sku-button shop-id="12345678" product-id="12345678" class="buy" disabled-class-name="disabled" ></sku-button>
.buy { background-color: #f4f5f6; } .buy.disabled { background-color: #fdfdfd; }
bind:success 说明
- •规格选择面板打开成功后触发。
- •无参数。
- •使用场景例如上报埋点跟踪用户打开概率。
bind:error 说明
- •当错误发生时触发。
- •错误原因可能为网络错误、业务错误等，具体错误内容见本文错误码说明。
代码示例
function handleError(event) { const { errMsg, errNo } = event.detail; }
错误码说明
errNo | errMsg | 说明 |
160602 | App version too early | 当前抖音版本过早，用户需要升级至最新版本才可使用 |
160603 | Fail to choose sku | 打开 SKU 面板失败 |
