Product SDK

1. Introduction

The Polyv Product SDK (@polyv/product-sdk) provides features such as product showcase, order management, payment, and address management. Developers can integrate this SDK to implement live-streaming e-commerce functionalities.

We also provide a UI open-source project developed based on the Product SDK. You can refer to its code or perform secondary development on top of it.

2. 🚀 Quick Start

2.1 Installation

The Product SDK depends on the Polyv @polyv/interaction-core package. Execute the following command to install:

# 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 Initialize InteractionCore

InteractionCore requires an object parameter with the following options:

Example code:

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: '',
  },
});

For the viewer scenario, you need to pass getViewerToken; for the instructor scenario, pass getChannelToken. Typically, you do not need to pass both instructor and viewer tokens simultaneously.

For other optional parameters, choose based on your actual business scenario. Note that missing parameters may cause certain features to malfunction. It is recommended to at least pass user information, channel information, channel configuration, and socket instance.

For the APIs exposed by InteractionCore, please refer to the documentation.

2.3 Initialize the Product SDK

The Product SDK currently provides four modules: Product, Order, Payment, and Address. Each module instance accepts two parameters:

• The first parameter is an InteractionCore instance, as described in the InteractionCore initialization above.
• The second parameter is additional configuration, currently supporting the getProductConfig function to customize certain behaviors of the product library.

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,
  };
}

3. Feature Modules

4. UI Components