商品 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 元件