messageCallback

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

숏폼에서 발생하는 여러가지 이벤트를 직접 핸들링 할 수 있는 messageCallback 함수를 제공합니다.

설정 예시

페이지의 공통 레이아웃에 아래 코드를 입력합니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  const messageCallback = { 
    LOGIN_REQUIRED: function(payload) {
      alert("LOGIN_REQUIRED");
      location.href = "YOUR_LOGIN_PAGE_URL";
    },
    ON_CLICK_PRODUCT_ITEM: function(payload) {
      console.log("ON_CLICK_PRODUCT_ITEM");
      location.href = payload.product.url;      
    },
    PLAY_SHORTFORM_DETAIL: function(payload) {
      console.log("PLAY_SHORTFORM_DETAIL");
      window.open(`https://YOUR_PAGE?shortsId=${payload.shorts.shortsId}`);    
    },
  };
  
  cloud.shoplive.initShortform({ 
    accessKey: 'YOUR ACCESS KEY HERE', 
    messageCallback: messageCallback 
  });
</script>

Messages & Payload

messageCallback 설정으로 직접 핸들링할 수 있는 이벤트의 목록은 아래와 같습니다.

LOGIN_REQUIRED

사용자가 댓글을 작성하려고 할 때와 같이 로그인이 필요한 경우

Payload	Type
type	string

ON_CLICK_PRODUCT_ITEM

상품 목록에서 상품 하나를 클릭하는 경우

Payload	Type
product	Product
shorts	Shorts

ON_CLICK_SHARE_BUTTON

공유 버튼을 클릭하는 경우

Payload	Type
shorts	Shorts
url	string

PLAY_SHORTFORM_DETAIL

숏폼 상세 (숏폼 피드) 플레이어를 호출합니다.

Payload	Type
shorts	Shorts

CLOSE_SHORTFORM_DETAIL

숏폼 상세 (피드) 플레이어를 닫습니다. 일반적으로 UI 상 Back button 을 클릭 할때 발생합니다.

Payload	Type
N/A	N/A

COLLECTION_SHOW

컬렉션을 호출할 때 발생합니다.

Payload	Type	Description
containerId	string	숏폼이 렌더링된 DOM 엘리먼트 id
template	string	사용된 템플릿 타입 (예: "GRID2")
totalCount	number	현재 불러온 숏폼 비디오의 총 개수

What's Next

Video progress tracking

설정 예시
Messages & Payload