抖音开放平台Logo
开发者文档
小程序
控制台
  • 行业插件介绍
  • 申请行业插件
  • 使用行业插件
  • 电商插件
  • 跳转引导
  • 导购成交
  • 通用查询
  • 会员运营
  • 电商组件
  • sku-button
  • product-follow-button
  • shop-follow-card
  • member-button
  • coupon-card

    • product-follow-button
    收藏
    我的收藏

    基础库 3.43.0.0 开始支持本组件。
    商品收藏按钮提供了商品收藏的能力，可以使用该组件引导用户收藏小程序所属店铺下的商品。

    前置条件

    在使用电商插件中的组件和 API 前，需要对行业插件有一个基本了解，可以参考文档：行业插件介绍，然后按照以下步骤及顺序使用电商插件中的能力：
      1.参考 电商小程序接入指南 完成小程序及资质的准备；
      2.参考 申请行业插件 完成插件的申请，注意只有小程序拥有电商类目资质才可见申请入口；
      3.参考 使用行业插件 进行能力的调用；
    行业插件在抖音 App 版本 31.8.0 及以上，小程序基础库版本 3.4x.0.0 及以上时支持。
    在使用组件时需要在页面 index.json 文件中进行引入。
    {
  "usingComponents": {
    "product-follow-button": "tt95aee3130ae1cbe911://product-follow-button"
  }
}
    Tip：使用该组件时需要用户身份信息，请确保在调用接口前，用户已经登录宿主 App。

    效果示例

    属性说明

    属性名
    类型
    默认值
    是否必填
    说明
    shop-id
    string
    --
    是
    店铺 ID
    product-id
    string
    --
    是
    商品 ID
    hidden
    boolean
    false
    否
    按钮是否显示
    disabled
    boolean
    false
    否
    按钮是否禁用
    no-style
    boolean
    false
    否
    是否关闭默认样式，关闭后仅剩按钮文案，可配合其它样式属性进行充分的样式自定义
    size
    string
    mini
    否
    按钮大小，可取值 default、mini
    style
    string
    --
    否
    按钮內联样式
    class
    string
    --
    否
    按钮通用样式类
    disabled-class-name
    string
    --
    否
    禁用状态下的按钮样式类
    followed-class-name
    string
    --
    否
    已收藏状态下的按钮样式类
    followed-text
    string
    已收藏
    否
    已收藏状态下的按钮文案
    unfollowed-class-name
    string
    --
    否
    未收藏状态下的按钮样式类
    unfollowed-text
    string
    收藏
    否
    未收藏状态下的按钮文案
    bind:followed
    function
    --
    否
    商品收藏成功回调
    bind:unfollowed
    function
    --
    否
    商品取消收藏成功回调
    bind:error
    function
    --
    否
    组件发生错误回调

    代码示例

    <product-follow-button
  shop-id="12345678"
  product-id="12345678"
  bind:followed="handleFollowed"
  bind:unfollowed="handleUnfollowed"
  bind:error="handleError"
></product-follow-button>

    自定义样式说明

      •可以传入自定义的类名 followed-class-name 和 unfollowed-class-name 来覆盖已收藏和未收藏状态下的按钮样式。
      •按钮禁用的样式可以采用类选择器实现以进行自定义覆盖。
      •也可以关闭所有默认样式 no-style 进行完全的自定义实现。
    <product-follow-button
  shop-id="12345678"
  product-id="12345678"
  followed-class-name="followed"
  unfollowed-class-name="unfollowed"
  disabled-class-name="disabled"
></product-follow-button>
    .followed {
  background-color: #f4f5f6;
}
.followed.disabled {
  background-color: #fdfdfd;
}

.unfollowed {
  background-color: #f85959;
}
.unfollowed.disabled {
  background-color: #fcc0c1;
}

    bind:followed 说明

      •当商品收藏成功时触发。
      •无参数。
      •使用场景例如当用户收藏成功后给予一些优惠等。

    bind:unfollowed 说明

      •当商品取消收藏成功时触发。
      •无参数

    bind:error 说明

      •当错误发生时触发。
      •错误原因可能为网络错误、业务错误等，具体错误内容见本文错误码说明。

    代码示例

    function handleError(event) {
  const { errMsg, errNo } = event.detail;
}
    ​