文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

新版C2B定制

更新时间：2024/03/26 访问次数：11963

一、业务介绍


在崇尚个性化的时代，消费者在购物过程中存在大量的个性化需求，例如：DIY一款T恤、定制一款首饰、送礼物时定制一个包装礼盒… 在众多的“标品”中，定制商品一直占有一席之地，并且随着消费能力的增强，定制市场必然会呈现快速上升的趋势。C2B定制可以是商品本身的定制，大到版型/模块DIY，小到刺绣、刻字等；也可以是对商品外包装的定制，或者提供伴随商品的个性化服务。您可以充分发挥您的想象力，给用户最佳的购物感受和品牌认知。

二、整体流程


商品和商家应用的绑定：

tradeToken获取方式：从商品详情页面跳转至ISV的页面时，会在URL上附加参数tradeToken，ISV获取这个参数就可以

tradeExToken获取方式：由ISV调用my.tb.saveCustomInfo产生，需要传入商家应用定制详情页的url，这个url就是定制完成，浏览定制详情页的url。

三、接入须知


1）了解交易定制业务场景的说明。

2）服务商研发流程，主要包括应用创建，代码开发、商品测试、发布上线。商家配置流程，只需配置需要参与交易定制的宝贝。

3）需要对商家订单/ERP系统改造，主要是 ERP系统要从订单中新增获取定制信息的字段。

4）生产系统识别ERP数据，进行个性化生产。

5）系统和后台配置工作完成，正式开始售卖。


四、应用开发

1. 创建应用


选择【控制台 - 开发 - 应用管理 - 创建应用】页面，选择【购物小程序】，点击【开始创建】按钮。


选择【商品导购 -> 交易创新 -> C2B定制-自研/C2B】，创建C2B定制的商家应用，点击确认【确认类目】按钮。



默认获得商家应用-C2B权限包。可在【控制台 - 开发 - 应用管理 - 我的应用】里查看相关创建好的应用。



2. 应用开发

4.2.1 选择场景


应用开发的前提：

1）应用创建成功之后，选择创建【消费者端应用】。

2）选择【交易定制-新版定制场景】。

商家应用代码开发需要在官方IDE上进行。大致的开发过程，请参考开发说明。


4.2.2 配置交易开放插件


在app.json文件配置交易开放插件：


{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "openTrade": { //交易开放插件
      "version": "*",
      "provider": "3000000003647041"
    }
  }, 
  "window": {
    "defaultTitle": "My App"
  }
}


4.2.3 初始化应用


在app.js文件获取初始化参数，例如商品id：


import {Cloud} from '@tbmp/mp-cloud-sdk'; 
const cloud = new Cloud(); 
cloud.init({ env: 'test' });
App({
    cloud,
    globalData: {  
        itemId: "",  // 商品ID
        skuId: "",   // SKU ID 
       tradeToken: "" // 交易token
        buyNow:false // 是否立即购买，true 立即购买 false 加入购物车
    },  
    onLaunch(options) {
        // 第一次打开
        console.info('App onLaunch');
        const { query = {} } = options;
        const { params = {} } = query;
        const paramJson = JSON.parse(params);
        this.globalData.itemId = paramJson.itemId;
        this.globalData.skuId = paramJson.skuId;
       	this.globalData.tradeToken = paramJson.tradeToken;
        this.globalData.buyNow = paramJson.buyNow;
        this.globalData.quantity = paramJson.quantity;
    },
    onShow(options) {
        // 从后台被 scheme 重新打开
        // options.query == {number:1}
    },
});


4.2.4 购买定制商品


① 立即购买

从小程序跳转到下单页（升级：若命中sku3.0，不会跳转到下单页，会回到sku面板）。

接口名称：saveOrderForCustom。

接口入参



参数名称

是否必填

说明

itemId

Y

商品ID，初始化应用时获取

skuId

N

商品SKU信息

quantity

N

商品数量

tradeToken

Y

交易token

customization

Y

商品定制信息，格式参照下文描述



定制信息extProperty格式


{
 "pic":[ // 图片相关的定制信息
   {"id":1,"url":"https://gw.alicdn.com/tfs/TB1T6PfBFzqK1RjSZSgXXcpAVXa-96-96.jpg"}
  ],
  "text":[ // 文本相关的定制信息
   {"id":1,"key":"手镯颜色","content":"黑色纯银开口手镯"},
 	{"id":2,"key":"图案颜色","content":"测试"}
  ]
}


示例代码

const {globalData} = getApp();
var plugin = requirePlugin("openTrade")
plugin.saveOrderForCustom({
    itemId:globalData.itemId,
    skuId:globalData.skuId,
   tradeToken:globalData.tradeToken,
    customization:{
      "pic":[ // 图片相关的定制信息
        {"id":1,"url":"https://gw.alicdn.com/tfs/TB1T6PfBFzqK1RjSZSgXXcpAVXa-96-96.jpg"}
      ],
      "text":[ // 文本相关的定制信息
        {"id":1,"key":"手镯颜色","content":"黑色纯银开口手镯"},
        {"id":2,"key":"图案颜色","content":"测试"}
      ]
    },
    success(v){
      console.log('suc', v)
    },
    fail(v){
      console.log('fail', v)
    }
})


② 加入购物车

将定制商品加入购物车（升级：若命中sku3.0，不会跳转到购物车，会回到sku面板）。

接口名称：addCartForCustom。

接口入参

参数名称

是否必填

说明

itemId

Y

商品ID，初始化应用时获取

skuId

N

商品SKU信息

quantity

N

商品数量

tradeToken

Y

交易token

customization

Y

商品定制信息



示例代码

plugin.addCartForCustom({
    itemId:globalData.itemId,
    skuId:globalData.skuId,
    price:10,
    quantity:2,
   tradeToken:globalData.tradeToken,
    customization:{
      "pic":[ // 图片相关的定制信息
        {"id":1,"url":"https://gw.alicdn.com/tfs/TB1T6PfBFzqK1RjSZSgXXcpAVXa-96-96.jpg"}
      ],
      "text":[ // 文本相关的定制信息
        {"id":1,"key":"手镯颜色","content":"黑色纯银开口手镯"},
        {"id":2,"key":"图案颜色","content":"测试"}
      ]
    },
    success(v){
      console.log('suc', v)
    },
    fail(v){
      console.log('fail', v)
    }
})


4.2.5 应用测试


新版交易定制的商家应用，消费者访问的入口往往是从宝贝详情开始。为此，我们官方提供了「测试商品」，支持开发阶段和线上阶段的商家应用与测试商品进行关联，在手机淘宝上打开该测试商品后，点击「立即定制」即会打开该商家应用。

① 测试商品

打开【测试商品】页面，可以添加测试商品，目前每个小程序最多创建5个测试商品。

测试商品可以选择当前商家应用的不同版本，与之关联。

注：测试商品有的没有sku，而该定制能力需要有sku的测试商品才可走完整个流程，因此可以多试几个商品id，例如：696335793449

线上版本：选择当前商家应用最新的几个线上版本，以及具体的页面；

真机预览：填写IDE工具预览时所生成的开发版本的URL地址，以及具体的页面。



② 扫码测试

点击【扫码测试】，就可以查看测试商品的二维码，用手淘或手猫扫码可以进行测试，注意测试商品请勿付款购买。




③ 提交审核

测试完成以后，可以在「版本管理」中提交审核。相较于一般的小程序提审，C2B定制的小程序额外需选择【定制页面】，后续商家的宝贝会与此页面进行绑定。 审核通过后，即完成了整个开发环节，可以交由商家进行后续的配置环节。


五、商家操作说明


应用上线后，商家访问个性化定制平台，就可以看到用来实现定制的商家应用。商家可以导入商品，将商品与应用进行绑定。



5.1 商品导入


点击导入商品，输入商品id即可导入商品.

注意：这里会涉及到商品的属性的打标修改，千万不要用一些参加其他活动的商品，避免活动冲突。


5.2 配置定制信息


导入商品成功之后，点击修改商品，配置定制信息。注意，若强制定制购买，那么定制费用必须为0。



5.3 上架商品


确认配置信息无误之后，对商品进行上架操作，此时消费者就能按照定制的流程进行购买了。

六、获取订单定制信息


商家订单系统或者ERP系统通过交易接口 taobao.trade.fullinfo.get 获取交易订单，通过字段 customization 中能获取到之前定制页面传入的json串，进行相应应的线下生产。

七、小技巧


个性化定制平台的应用管理访问链接 https://haomai.taobao.com/trade_open#/application 支持外部传入参数，降低商家在ISV提供的商家端小程序内完成相关配置后再跳转至平台导入商品的操作成本。

1）支持传入参数：消费者端小程序miniappId、商品items，直接打开导入商品窗口并填入相应商品ID，如：https://haomai.taobao.com/trade_open#/application?miniappId=3000000026830104&items=625542130956,625843583356

2）支持传入参数：消费者端小程序miniappId、编辑窗状态showEdit，直接打开编辑商品窗口，如：https://haomai.taobao.com/trade_open#/application?miniappId=3000000026830104&showEdit=true

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号