带货场景商品

Updated: 2023-04-17 15:27:57

1 Feature Overview
2 Receiving Real-Time Product Messages
3 Product Push
- 3.1 Introduction to the PLVECCommodityPushView Class
- 3.2 Using the PLVECCommodityPushView Class
4 Product List
5 Core Common and SDK
6 Product Details

1 Feature Overview

The product module is used in live streaming e-commerce to add, delete, modify information, and reorder products in real-time based on the live broadcast situation through backend configuration operations. It also features a product push function that synchronously displays updates to the viewer's end. The three main pages are: Product Push PLVECCommodityPushView, Product List PLVECCommodityViewController, and Product Details PLVECGoodsDetailViewController. The display of these three pages and the real-time product message functionality are implemented in PLVECHomePageView.

2 Receiving Real-Time Product Messages

Receiving real-time product messages allows timely synchronization of backend product configuration operations to the viewer's end, ensuring that the product data seen by the audience is always up-to-date. Real-time product messages currently include two main categories: configuration operation products and pushed products.

PLVECHomePageView.m

- (void)productMessageEvent:(NSDictionary *)jsonDict {
    NSString *subEvent = PLV_SafeStringForDictKey(jsonDict, @"EVENT");
    if (![subEvent isEqualToString:@"PRODUCT_MESSAGE"]) {
        return;
    }
    
    if (self.shoppingCardButton.isHidden) {
        return; // 未开启商品功能
    }
    
    NSInteger status = PLV_SafeIntegerForDictKey(jsonDict, @"status");
    
    // 配置操作商品
    if (self.commodityVC) {
        [self.commodityVC receiveProductMessage:status content:jsonDict[@"content"]];
    }
    
    // 处理推送商品
    if (9 == status) {
        NSDictionary *content = PLV_SafeDictionaryForDictKey(jsonDict, @"content");
        PLVCommodityModel *model = [PLVCommodityModel commodityModelWithDict:content];
        [self.pushView setModel:model];
    }
}

3 Product Push

Product push corresponds to the "Push" button in the "Viewing Page Management - Product Library - Operations" column of the Polyv Cloud Live Broadcast backend. Clicking the "Push" button triggers the live streaming e-commerce scenario to receive a real-time product message, displaying a single product view PLVECCommodityPushView, which automatically disappears after 5 seconds.

3.1 Introduction to the `PLVECCommodityPushView` Class

The product view PLVECCommodityPushView class is a UI layout class, defined as follows:

@protocol PLVECCommodityPushViewDelegate <NSObject>

/// 点击跳转详情页回调
- (void)jumpToGoodsDetail:(NSURL *)goodsURL;

@end

@interface PLVECCommodityPushView : UIView

/// 商品图片
@property (nonatomic, strong) UIImageView *coverImageView;

/// 序号Id
@property (nonatomic, strong) UILabel *showIdLabel;

/// 商品名称
@property (nonatomic, strong) UILabel *nameLabel;

/// 商品价格
@property (nonatomic, strong) UILabel *realPriceLabel;

/// 购买价格
@property (nonatomic, strong) UILabel *priceLabel;

/// 关闭按钮
@property (nonatomic, strong) UIButton *closeButton;

/// 跳转详情按钮
@property (nonatomic, strong) UIButton *jumpButton;

/// 商品数据模型
@property (nonatomic, strong) PLVCommodityModel *model;

@property (nonatomic, weak) id<PLVECCommodityPushViewDelegate> delegate;

/// 销毁
- (void)destroy;

@end

3.2 Using the `PLVECCommodityPushView` Class

The initialization, display, and destruction operations of the PLVECCommodityPushView class are managed in PLVECHomePageView. For specific usage code, refer to the PLVECHomePageView class in the Demo.

4 Product List

The product list functionality uses PLVECCommodityViewController as the entry point to control the product list view PLVECCommodityPushView class and the data management PLVECCommodityModelsManager class.

Class Definition Introduction

@protocol PLVECCommodityDelegate <NSObject>

/// 商品跳转代理方法
- (void)jumpToGoodsDetail:(NSURL *)goodsURL;

@end

@interface PLVECCommodityViewController : UIViewController

@property (nonatomic, weak) id<PLVECCommodityDelegate> delegate;

/// 处理socket商品信息
///
/// @param status 商品操作信息类型
/// @param content 商品信息
- (void)receiveProductMessage:(NSInteger)status content:(id)content;

@end

Main Feature Introduction
- Initialize and display the product list view class;
- Initialize the data management class, load API data, and bind data to the product list;
- Pass real-time configuration operation product data to the data management class;
- Pass the product detail navigation event to PLVECHomePageView;

For usage code of the PLVECCommodityViewController class, refer to the PLVECHomePageView class in the Demo.

5 Core Common and SDK

Product list data is obtained by calling the intermediate interface defined in PLVRoomData of the Common layer 6_2 Core Common - Data. The Common layer then calls the interface defined in PLVLiveVideoAPI of the SDK to retrieve the data.

Product List Data Implementation Interface

PLVECCommodityModelsManager.m

- (void)requestCommodityInfo:(NSInteger)rank completion:(void (^)(NSError *))completion {
    if (self.loading || self.totalItems == self.models.count) {
        return;
    }
    
    _loading = YES;
    
    PLVRoomData *roomData = [PLVRoomDataManager sharedManager].roomData;
    if (rank == 0) {
        [self.models removeAllObjects];
    }
    
    __weak typeof(self)weakSelf = self;
    [roomData requestCommodityList:roomData.channelId.integerValue
                              rank:rank
                             count:20
                        completion:^(NSUInteger total, NSArray<PLVCommodityModel *> *commoditys) {
        weakSelf.loading = NO;
        weakSelf.totalItems = total;
        
        [weakSelf.models addObjectsFromArray:commoditys];
        
        if (completion) {
            completion(nil);
        }
    } failure:^(NSError * _Nonnull error) {
        weakSelf.loading = NO;
        NSLog(@"requestCommodityInfo error description: %@",error.localizedDescription);
        if (completion) {
            completion(error);
        }
    }];
}

Common Layer Interface Definition

PLVRoomData.h

/**
 获取商品列表
 
 @param channelId 频道号
 @param rank 排序号 （加载序号以前的商品）
 @param count 获取列表数据大小，默认10条，最大20
 @param completion 加载成功 total：商品总数，commoditys：当前拉取的数据列表
（返回商品列表顺序与后台显示顺序一致）
 @param failure 加载失败
 */
- (void)requestCommodityList:(NSUInteger)channelId rank:(NSUInteger)rank count:(NSUInteger)count completion:(void (^)(NSUInteger total, NSArray<PLVCommodityModel *> *commoditys))completion failure:(void (^)(NSError *))failure;

SDK Layer Interface Definition

/**
PLVLiveVideoAPI.h

 获取商品列表
 
 @param channelId 频道号
 @param rank 排序号 （加载序号以前的商品）
 @param count 获取列表数据大小，默认10条，最大20
 @param completion 加载成功 total：商品总数，commoditys：当前拉取的数据列表
（返回商品列表顺序与后台显示顺序一致）
 @param failure 加载失败
 */
+ (void)loadCommodityList:(NSUInteger)channelId rank:(NSUInteger)rank count:(NSUInteger)count completion:(void (^)(NSUInteger, NSArray<PLVCommodityModel *> *))completion failure:(void (^)(NSError *))failure;

6 Product Details

The product details feature is triggered by clicking the purchase button on the push page or product list, opening the product's universal link URL configured in the Polyv backend.

The product details page is implemented by the PLVECGoodsDetailViewController class, which primarily uses WKWebView to load the product's universal link address.

Class definition is as follows:

@interface PLVECGoodsDetailViewController : UIViewController

- (instancetype)initWithGoodsURL:(NSURL *)URL;

@end

For specific implementation code, refer to PLVECGoodsDetailViewController in the Demo.

带货场景 商品