브랜드 좋아요 기능을 사용하기에 앞서 브랜드 생성 및 설정이 필요합니다. 브랜드 좋아요 기능 연동을 위해 다음 가이드를 참고해주세요.
기능 활성화 요청은 샵라이브(ask@shoplive.cloud)로 문의해주세요.
messageCallback
브랜드 좋아요 클릭 시 호출되는 messageCallback입니다. 이를 통해 브랜드 좋아요 이벤트를 정의할 수 있습니다
Action | Payload | Description |
|---|
ON_CHANGED_BRAND_FAVORITE | campaignKey (string) identifier(string)
| 캠페인에 브랜드가 포함된 경우 플레이어가 시작되거나 브랜드 정보가 실시간으로 변경될 때 호출되는 이벤트입니다. |
ON_CLICK_BRAND_FAVORITE_BUTTON | brand(string) campaignKey (string) favorite(string) identifier(string) name(string)
| "브랜드 좋아요"를 클릭할 때 호출되는 이벤트입니다. |
SEND_COMMAND_MESSAGE
SEND_COMMAND_MESSAGE는 sendMessage()에 의해 발생하는 명령 유형 중 하나로, 아래의 동작과 페이로드를 전달할 수 있습니다.
Action | Payload | Description |
|---|
SET_FAVORITE_BRAND | json object | 브랜드 좋아요 상태를 변경하기 위한 명령입니다. |
Payload
Name | Type | Example | Description |
|---|
favorite | boolean | true | false | 브랜드 좋아요 여부 |
identifier | string | shoplive | 브랜드 식별자 |
Sample code
플레이어에서 브랜드 즐겨찾기 버튼을 클릭했을 때 호출되는 messageCallback을 정의하는 샘플 코드입니다.
var messageCallback = {
// 브랜드가 포함된 플레이어가 시작되거나 브랜드 정보가 실시간으로 변경될 때 호출되는 이벤트입니다.
ON_CHANGED_BRAND_FAVORITE: function(payload) {
const { identifier } = payload; // 설정되어 있는 브랜드 식별자
// 현재 사용자의 브랜드 좋아요 상태를 변경할 수 있습니다.
if( identifier === "USER_FAVORITE_BRAND_IDENTIFIER" ) {
const commandPayload = {
command: "SET_BRAND_FAVORITE",
payload: { identifier: identifier, favorite: true }
}
const player = cloud.shoplive.getPlayer();
player.sendMessage("SEND_COMMAND_MESSAGE", commandPayload)
}
},
// 사용자가 브랜드 좋아요 버튼을 누르면 호출되는 이벤트
ON_CLICK_BRAND_FAVORITE_BUTTON: function (payload) {
const { favorite, identifier } = payload;
console.log(identifier, favorite);
fetch("favorite save api address")
.then((res) => res.json())
.then((res) => {
// 브랜드 좋아요 처리 결과를 success에 담아 반환한 경우
if (res.success) {
alert(`${identifier}를 has been added to favorite`);
} else {
alert(`${identifier}를 has been removed from favorite`);
}
});
},
}
// 브랜드 좋아요 상태를 지정하여 플레이어를 시작하기
var options = {
messageCallback: messageCallback,
brand: {
identifier: "YOUR_BRAND_IDENTIFIER",
favorite: true,
},
};
cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });
.png){kind=logo}
