この機能を有効にするには、Shopliveにお問い合わせください
ブランドのお気に入り機能を使用する前に、ブランドを作成して設定する必要があります。
ブランドのお気に入り機能の実装については、以下のガイドを参照してください。
メッセージコールバック
ユーザーがブランドのお気に入りのボタンをクリックしたときにトリガーされる messageCallbackを実装することで、必要な機能を定義できます。
アクション | ペイロード | 説明 |
|---|
ON_CHANGED_BRAND_FAVORITE | campaignKey (文字列) | ブランドのあるキャンペーンのプレーヤーが開始されたとき、またはブランド情報がリアルタイムで変更されたときに呼び出されるイベントです |
ON_CLICK_BRAND_FAVORITE_BUTTON | coupon (文字列) type (文字列) | 「Brand Favorite」をクリックすると呼び出されるイベント |
SEND_COMMAND_MESSAGE
SEND_COMMAND_MESSAGEは、e sendMessage()によって発火されるコマンドの一種であり、以下のアクションとペイロードを配信できます。
アクション | ペイロード | 説明 |
|---|
SET_FAVORITE_BRAND | json object | messageCallback called on clicking the brand favorite button
|
ペイロード オブジェクト
名前 | 種類 | 例 | 説明 |
|---|
お気に入り | ブーリアン | 真 |偽 | ブランドのお気に入りかどうか |
識別子 | 糸 | ショップライブ | ブランド識別名 |
サンプルコード
これは、プレーヤーでブランドのお気に入りボタンがクリックされたときに呼び出されるmessageCallbackを定義するためのサンプルコードです。
var messageCallback = {
// Event that is called when the player for a livestream with a brand is started, or when brand information is changed in real time.
ON_CHANGED_BRAND_FAVORITE: function(payload) {
const { identifier } = payload; // Brand identifier that is set
// You can change the current user's brand favorite status.
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)
}
},
// Event that is called on clicking "Brand Favorite"
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) => {
// In case the brand favorite processing result is returned in success.
if (res.success) {
alert(`${identifier}를 has been added to favorite`);
} else {
alert(`${identifier}를 has been removed from favorite`);
}
});
},
}
// Starting the player by specifying the brand favorite status.
var options = {
messageCallback: messageCallback,
brand: {
identifier: "YOUR_BRAND_IDENTIFIER",
favorite: true,
},
};
cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });
.png){kind=logo}
