브랜드 좋아요 기능 연동하기

Shoplive와 사전 협의를 통해 브랜드 좋아요 기능을 연동할 수 있습니다.

브랜드 좋아요 기능을 사용하기에 앞서 브랜드 생성 및 설정이 필요합니다.

브랜드 좋아요 기능 연동을 위해 다음 가이드를 참고해주세요.

messageCallback

브랜드 좋아요 클릭 시 호출되는 messageCallback입니다. 이를 통해 브랜드 좋아요 이벤트를 정의할 수 있습니다.

action	payload	설명
SET_FAVORITE_BRAND	json object	브랜드 좋아요 클릭 시 호출되는 message Callback 입니다.

Payload 객체

Name	Type	Example	Description
favorite	boolean	true \| false	브랜드 좋아요 체크 여부
identifier	string	shoplive	브랜드 식별명

샘플 코드

Shoplive 플레이어에서 브랜드 좋아요 버튼 클릭 시 호출되는 messageCallback을 정의하기 위한 샘플 코드입니다.


  var messageCallback = {
    
    // 브랜드가 설정되어있는 방송의 플레이어가 시작될때, 또는 실시간으로 브랜드 정보가 변경될때 호출되는 이벤트.
    ON_CHANGED_BRAND_FAVORITE: function(payload) {

      const { identifier } = payload; // 방송에 설정되어있는 브랜드의 identifier
      // 현재 사용자의 브랜드 좋아요 상태를 변경할 수 있습니다.
      if( identifier === "USER_FAVORITE_BRAND_IDENTIFIER" ) {
        const commandPayload = {
          command: "SET_BRAND_FAVORITE",
          payload: { identifier: identifier, favorite: true  }
        }
        mplayer("send", "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} 브랜드를 즐겨찾기에 등록했습니다.`);
        } else {
          alert(`${identifier} 브랜드를 즐겨찾기에서 해제습니다.`);
        }
      });
    },
  }

  // brand 좋아요 상태를 지정하여 플레이어를 시작하기.
  var options = {
    messageCallback: messageCallback,
    brand: {
      identifier: "YOUR_BRAND_IDENTIFIER", 
      favorite: true,
    },
  };

  (function (s,h,o,p,l,i,v,e) {s["ShoplivePlayer"]=l;(s[l]=s[l]||function(){
  (s[l].q=s[l].q||[]).push(arguments);}),(i=h.createElement(o)),
  (v=h.getElementsByTagName(o)[0]);i.async=1;i.src=p;v.parentNode.insertBefore(i,v);
  })(window,document,"script","https://static.shoplive.cloud/[email protected]","mplayer");
  
  mplayer("init", ACCESS_KEY, CAMPAIGN_KEY, JWT_OR_USER_INFO, options);
  mplayer("run", PLAYER_ID);