셀러 구독 기능

The content is currently unavailable in English. You are viewing the default Korean version.

Article summary

Did you find this summary helpful?

Thank you for your feedback

셀러 구독기능 사용을 위해서는 Shoplive 담당자와 협의가 필요합니다.

셀러 구독 기능

셀러의 아이콘을 클릭하거나, 구독 버튼을 클릭하였을때 발생하는 콜백을 이용해 구독상태를 변경하거나 셀러의 페이지로 이동 시킬 수 있습니다.

ON_RECEIVED_SELLER_CONFIG 콜백을 통해 방송에 등록된 셀러의 정보를 수신받습니다.
ON_CLICK_VIEW_SELLER_STORE 콜백을 통해 셀러이미지의 클릭 이벤트를 수신하여 셀러의 페이지로 랜딩시킬 수 있습니다.
ON_CLICK_SELLER_SUBSCRIPTION 콜백을 통해 셀러 구독 버튼의 클릭이벤트를 수신할 수 있습니다
SET_SELLER_SAVED_STATE Command를 통해 UI의 구독상태를 표시를 변경합니다.

방송 실행시 등록되어 있는 셀러의 정보를 수신하는 messageCallback :

ON_RECEIVED_SELLER_CONFIG

방송에 진입시 셀러의 정보를 수신합니다.

수신한 셀러/사용자 정보를 통해 해당 사용자의 구독상태를 내부 시스템에서 체크하고 구독상태 변경 명령을 플레이어에 보내 상태를 동기화 합니다

주요 Payload

Payload
Type
description
seller
Seller
방송의 셀러 정보
campaignKey
string
방송의 campaignKey

Payload	Type	description
seller	Seller	방송의 셀러 정보
campaignKey	string	방송의 campaignKey

플레이어에 구독상태를 표시하는 명령어 :

SET_SELLER_SAVED_STATE

플레이어에 sendMessage() 의 SEND_COMMAND_MESSAGE action을 통해 구독상태를 표시 명령인 SET_SELLER_SAVED_STATE 를 전송합니다.

Boolean 형태의 payload를 통해 구독상태를 정의합니다.

연관기능
- 플레이어에 명령 전송하기

사용방법

const player = cloud.shoplive.getPlayer();
const action = 'SEND_COMMAND_MESSAGE'
const payload = { command: "SET_SELLER_SAVED_STATE", payload: { status } }
player.sendMessage(action,payload);

사용예제

Web

var messageCallback = {
  // seller정보 응답 이벤트
        ON_RECEIVED_SELLER_CONFIG: (payload) => {
          // 고객사의 기존 구독 상태값을 가져와 플레이어의 UI 상태 sync 처리
          fetchGetSavedSeller.then(({ status }) => {
              const player = cloud.shoplive.getPlayer();
              player.sendMessage("SEND_COMMAND_MESSAGE", { command: "SET_SELLER_SAVED_STATE", payload: { saved:status } })
          });
        },
}
cloud.shoplive.init({ accessKey: "ACCESS_KEY", messageCallback: messageCallback });

Android

fun onReceivedCommand(context: Context, command: String, data: JSONObject) {
    when (command) {
        "ON_RECEIVED_SELLER_CONFIG" -> {
            val sellerSavedData = JSONObject()
            sellerSavedData.put("saved", true)
            ShopLive.sendCommandMessage(
                "SET_SELLER_SAVED_STATE",
                sellerSavedData.toString()
            )
        }
    }
}

iOS

func handleReceivedCommand(_ command: String, data: [String : Any]?) {
        switch command {
        case "ON_RECEIVED_SELLER_CONFIG":
            var sellerSavedData : [String : Any] = ["saved" : true]
            ShopLive.sendCommandMessage(command: "SET_SELLER_SAVED_STATE", payload: sellerSavedData)
        default:
            break
        }
    }

플레이어에 토스트 메시지 띄우는 명령어 :

SHOW_LAYER_TOAST

Web: sendMessage의 showToast명령어를 통해 토스트 메시지를 표시합니다.
App: sendCommandMessage() 를 통해 토스트 표시 명령인 SHOW_LAYER_TOAST 를 전송하여 토스트 메시지를 표시합니다.

사용예제

Web

const player = cloud.shoplive.getPlayer();
const toastData = {
                    message: "구독 상태를 업데이트 했습니다.",
                    position: "CENTER",
                    duration: 3000,
                };
player.sendMessage("showToast", toastData);

Android


val jsonObject = JSONObject()
jsonObject.put("message", "구독 상태를 업데이트 했습니다.")
jsonObject.put("duration", 3000)
jsonObject.put("position", "CENTER")
ShopLive.sendCommandMessage("SHOW_LAYER_TOAST", jsonObject.toString())

iOS

var payload : [String : Any] = [:]
payload["message"] = "구독 상태를 업데이트 했습니다."
payload["duration"] = 3000
payload["position"] = "center"
ShopLive.sendCommandMessage(command: "SHOW_LAYER_TOAST", payload: payload)

셀러 프로파일 클릭시의 동작을 정의하는 messageCallback :

ON_CLICK_VIEW_SELLER_STORE

셀러 프로파일 이미지를 클릭시 셀러 스토어로의 랜딩 등의 동작을 정의하기 위한 콜백 입니다.

주요 Payload

Payload
Type
description
seller
Seller
방송의 셀러 정보
campaignKey
string
방송의 campaignKey

Payload	Type	description
seller	Seller	방송의 셀러 정보
campaignKey	string	방송의 campaignKey

사용예제

Web

var messageCallback = {
 ON_CLICK_VIEW_SELLER_STORE: (payload) => {
                console.log('ON_CLICK_VIEW_SELLER_STORE', payload)
                location.href=payload.seller.storeUrl
            },
}
cloud.shoplive.init({ accessKey: "ACCESS_KEY", messageCallback: messageCallback });

Android

fun onReceivedCommand(context: Context, command: String, data: JSONObject) {
    when (command) {
        "ON_CLICK_VIEW_SELLER_STORE" -> {
            val sellerStoreData =
                Gson().fromJson(data.toString(), SellerStoreData::class.java)
            CustomerWebViewActivity.startActivity(
                this@MainActivity,
                sellerStoreData.seller?.storeUrl ?: return
            )
        }
    }
}

private data class SellerStoreData(
    val campaignKey: String?,
    val campaignStatus: String?,
    val campaignTitle: String?,
    val seller: Seller?
)

private data class Seller(
    val description: String?,
    val name: String?,
    val profileUrl: String?,
    val schemes: String?,
    val sellerId: Int,
    val sellerIdentifier: String,
    val storeUrl: String?
)

iOS

func handleReceivedCommand(_ command: String, data: [String : Any]?) {
    switch command {
    case "ON_CLICK_VIEW_SELLER_STORE":
        var sellerStoreData = SellerStoreData(dict: payload)
        if let urlString = sellerStoreData.seller?.storeUrl, let url = URL(string: urlString)  {
            UIApplication.shared.canOpenURL(url)
        }
    default:
        break
    }
}

class SellerStoreData {
    var campaignKey : String?
    var campaignStatus : String?
    var campaignTitle : String?
    var seller : SellerData?
    
    init(campaignKey: String? = nil, campaignStatus: String? = nil, campaignTitle: String? = nil, seller: SellerData? = nil) {
        self.campaignKey = campaignKey
        self.campaignStatus = campaignStatus
        self.campaignTitle = campaignTitle
        self.seller = seller
    }
    
    init(dict : [String : Any]) {
        self.campaignKey = dict["campaignKey"] as? String
        self.campaignStatus = dict["campaignStatus"] as? String
        self.campaignTitle = dict["campaignTitle"] as? String
        self.seller = .init(dict: dict["seller"] as? [String : Any] ?? [:])
    }
}

class SellerData {
    var descriptions : String?
    var name : String?
    var profileUrl : String?
    var scheme : String?
    var sellerId : Int?
    var sellerIdentifier : String?
    var storeUrl : String
    
    init(descriptions: String? = nil, name: String? = nil, profileUrl: String? = nil, scheme: String? = nil, sellerId: Int? = nil, sellerIdentifier: String? = nil, storeUrl: String) {
        self.descriptions = descriptions
        self.name = name
        self.profileUrl = profileUrl
        self.scheme = scheme
        self.sellerId = sellerId
        self.sellerIdentifier = sellerIdentifier
        self.storeUrl = storeUrl
    }
    
    
    init(dict : [String : Any]) {
        self.descriptions = dict["descriptions"] as? String
        self.name = dict["name"] as? String
        self.profileUrl = dict["profileUrl"] as? String
        self.scheme = dict["scheme"] as? String
        self.sellerId = dict["sellerId"] as? Int
        self.sellerIdentifier = dict["sellerIdentifier"] as? String
        self.storeUrl = dict["storeUrl"] as? String ?? ""
    }
}

셀러 구독버튼을 클릭했을때의 동작을 정의하는 messageCallback :

ON_CLICK_SELLER_SUBSCRIPTION

셀러의 구독버튼이 클릭 되었을때 발생하는 messageCallback입니다.

고객사의 기능으로 구독 처리를 하고 결과값을 리턴하여 UI의 구독상태를 변경시키는 형태로 활용합니다.

주요 Payload

Payload	Type	description
seller	Seller	셀러 정보
campaignKey	string	방송의 campaignKey
isLogin	bollean	유저의 로긴 상태

사용예제

Web



var messageCallback = {
    ON_CLICK_SELLER_SUBSCRIPTION: (payload) => {
            const player = cloud.shoplive.getPlayer();

// 고객사의 서버에 저장후 플레이어의 UI 상태 업데이트
            fetchPostSavedSeller.then(({ saved }) => {
                player.sendMessage("SEND_COMMAND_MESSAGE", { command: "SET_SELLER_SAVED_STATE", payload: { saved } })
          });

// 예시. 플레이어 표시할 토스트 데이터
           const toastData = {
                    message: "구독 상태를 업데이트 했습니다.",
                    position: "CENTER",
                    duration: 3000,
                };
           player.sendMessage("showToast", toastData);

            },
}
cloud.shoplive.init({ accessKey: "ACCESS_KEY", messageCallback: messageCallback });

Android

fun onReceivedCommand(context: Context, command: String, data: JSONObject) {
    when (command) {
        "ON_CLICK_SELLER_SUBSCRIPTION" -> {
            val sellerSubscriptionData =
                Gson().fromJson(data.toString(), SellerSubscriptionData::class.java)
            // 고객사의 서버에 저장후 플레이어의 UI 상태 업데이트
            SomthingCustomerJob(sellerSubscriptionData) {
                val sellerSavedData = JSONObject()
                sellerSavedData.put("saved", !sellerSubscriptionData.saved)
                ShopLive.sendCommandMessage(
                    "SET_SELLER_SAVED_STATE",
                    sellerSavedData.toString()
                )
            }
        }
    }
}

private data class SellerSubscriptionData(
    val campaignKey: String?,
    val campaignStatus: String?,
    val campaignTitle: String?,
    val isLogin: Boolean,
    val saved: Boolean,
    val seller: Seller?
)

private data class Seller(
    val description: String?,
    val name: String?,
    val profileUrl: String?,
    val schemes: String?,
    val sellerId: Int,
    val sellerIdentifier: String,
    val storeUrl: String?
)

iOS

func handleReceivedCommand(_ command: String, data: [String : Any]?) {
    switch command {
    case "ON_RECEIVED_SELLER_CONFIG","ON_CLICK_VIEW_SELLER_STORE","ON_CLICK_SELLER_SUBSCRIPTION":
        var sellerSubsciptionData = SellerSubscriptionData(dict: payload)
        var sellerSavedData : [String : Any] = ["saved" : !(sellerSubsciptionData.saved ?? true)]
        ShopLive.sendCommandMessage(command: "SET_SELLER_SAVED_STATE", payload: sellerSavedData)
    default:
        break
    }
}
class SellerSubscriptionData {
    var campaignKey : String?
    var campaignStatus : String?
    var campaignTitle : String?
    var isLogin : Bool?
    var saved : Bool?
    var seller : SellerData?
    
    init(campaignKey: String? = nil, campaignStatus: String? = nil, campaignTitle: String? = nil, isLogin: Bool? = nil, saved: Bool? = nil, seller: SellerData? = nil) {
        self.campaignKey = campaignKey
        self.campaignStatus = campaignStatus
        self.campaignTitle = campaignTitle
        self.isLogin = isLogin
        self.saved = saved
        self.seller = seller
    }
    
    
    init(dict  : [String : Any] ) {
        self.campaignKey = dict["campaignKey"] as? String
        self.campaignStatus = dict["campaignStatus"] as? String
        self.campaignTitle = dict["campaignTitle"] as? String
        self.isLogin = dict["isLogin"] as? Bool
        self.saved = dict["saved"] as? Bool
        self.seller = SellerData(dict: dict["seller"] as? [String : Any] ?? [:])
        
    }
    
}

class SellerData {
    var descriptions : String?
    var name : String?
    var profileUrl : String?
    var scheme : String?
    var sellerId : Int?
    var sellerIdentifier : String?
    var storeUrl : String
    
    init(descriptions: String? = nil, name: String? = nil, profileUrl: String? = nil, scheme: String? = nil, sellerId: Int? = nil, sellerIdentifier: String? = nil, storeUrl: String) {
        self.descriptions = descriptions
        self.name = name
        self.profileUrl = profileUrl
        self.scheme = scheme
        self.sellerId = sellerId
        self.sellerIdentifier = sellerIdentifier
        self.storeUrl = storeUrl
    }
    
    
    init(dict : [String : Any]) {
        self.descriptions = dict["descriptions"] as? String
        self.name = dict["name"] as? String
        self.profileUrl = dict["profileUrl"] as? String
        self.scheme = dict["scheme"] as? String
        self.sellerId = dict["sellerId"] as? Int
        self.sellerIdentifier = dict["sellerIdentifier"] as? String
        self.storeUrl = dict["storeUrl"] as? String ?? ""
    }
}

연관기능

What's Next

shortform with IDs

Table of contents

셀러 구독 기능
방송 실행시 등록되어 있는 셀러의 정보를 수신하는 messageCallback : 
플레이어에 구독상태를 표시하는 명령어 : 
SET_SELLER_SAVED_STATE
플레이어에 토스트 메시지 띄우는  명령어 : 
SHOW_LAYER_TOAST
셀러 프로파일 클릭시의 동작을 정의하는 messageCallback : 
ON_CLICK_VIEW_SELLER_STORE
셀러 구독버튼을 클릭했을때의 동작을 정의하는 messageCallback : 
ON_CLICK_SELLER_SUBSCRIPTION