商品 SDK

一、简介

保利威商品 SDK（@polyv/product-sdk）提供商品橱窗、订单、支付和地址管理等功能，开发人员可以接入本 SDK 实现直播带货相关功能。

我们还提供了一个基于商品 SDK 开发的 UI 开源项目。您可以参考该项目的代码，或者在该项目的基础上进行二次开发。

二、🚀 快速开始

2.1 安装

商品 SDK 依赖保利威的 @polyv/interaction-core 包，执行以下命令安装：

# pnpm
pnpm add @polyv/interaction-core
pnpm add @polyv/product-sdk

# npm
npm install @polyv/interaction-core --save
npm install @polyv/product-sdk --save

2.2 初始化 InteractionCore

InteractionCore 需要传入一个 object 参数，参数项如下：

示例代码如下：

import { InteractionCore } from '@polyv/interaction-core';

const interCore = new InteractionCore({
  getSocket: () => {
    // 保利威聊天室 socket io 实例
    return socket;
  },
  getChannelInfo: () => {
    return {
      // 频道 ID
      channelId: '',
      // 场次 ID
      sessionId: '',
      // 保利威账号 ID
      accountId: '',
      // 观看页地址
      watchUrl: '',
      // 邀请海报选择页地址
      inviteUrl: '',
      // 频道直播状态
      liveStatus: '',
    };
  },
  getChannelConfig: () => {
    return {
      // 是否启用观看页营销埋点
      watchEventTrackEnabled: false,
      // 商品库事件上报开关
      productTrackEnabled: false,
    };
  },
  getUserInfo: () => {
    return {
      // 用户 userId
      userId: '',
      // 用户 unionId
      unionId: '',
      // 用户昵称
      nick: '',
      // 用户头像地址
      pic: '',
      // 用户授权方式
      authType: '',
      // 微信 openid
      wxOpenId: '',
      // 微信 unionId
      wxUnionId: '',
    };
  },
  getViewerToken: () => {
    return {
      viewerToken: '',
    };
  },
  getChannelToken: () => {
    return {
      channelToken: '',
    }
  },
  getSourceInfo: () => {
    return {
      // 来源类型
      sourceType: '',
      // 来源 ID
      sourceId: '',
    };
  },
  getRtasConfig: () => {
    return {
      // 项目名称
      projectName: '',
      // 应用名称
      appName: '',
    }
  }
  domainInfo: {
    // 观看页域名
    watchPageDomain: '',
    // 直播 api 域名
    polyvApiDomain: '',
    // 聊天室 api 域名
    chatApiDomain: '',
    // 静态资源域名
    staticDomain: '',
  },
});

其中，对于观看端场景，您需要传入 getViewerToken;对于讲师端场景，则需要传 getChannelToken，通常不需要同时传入讲师端和观看端 token。

对于其它非必填参数，您可以根据实际业务场景选择传入。注意，参数的缺失可能会导致某些功能无法正常使用，建议至少传入用户信息、频道信息、频道配置、socket 实例等参数。

关于 InteractionCore 对外暴露的 API，请参考文档。

2.3 初始化商品 SDK

商品 SDK 目前提供了商品（Product）、订单（Order）、支付（Payment）、地址（Address）四个模块，每个模块的实例都接收两个参数： 第一个参数是 InteractionCore 实例，参考上方的初始化 InteractionCore。 第二个参数是额外配置项，目前支持传入 getProductConfig 函数自定义商品库的一些行为。

import { Product, Order, Address, Payment } from '@polyv/product-sdk';
import type { ProductConfig } from '@polyv/product-sdk';

// 实例化商品模块
const productTarget = new Product(interCore, { getProductConfig });

// 实例化订单模块
const orderTarget = new Order(interCore, { getProductConfig });

// 实例化地址模块
const addressTarget = new Address(interCore, { getProductConfig });

// 实例化支付模块
const paymentTarget = new Payment(interCore, { getProductConfig });

function getProductConfig(): ProductConfig {
  return {
    // 观看页埋点开关
    watchEventTrackEnabled: true,
    // 商品库事件上报开关
    productTrackEnabled: true,
    // 商品讲解开关
    productExplainEnabled: true,
    // 商品热卖中开关
    productHotEffectEnabled: true,
    // 商品热卖中文案
    productHotEffectTips: {
      normalProductTips: '热卖中',
      jobProductTips: '投递中',
      financeProductTips: '热卖中',
    },
    // 点击商品的封面/标题区域是否直接跳转外链
    outLinkProductRedirectEnabled: true,
    // 商品订单入口是否显示
    productPayOrderEnabled: true,
    // 是否允许直接购买
    directBuyEnabled: true,
  };
}

三、功能模块

四、UI 组件