쇼룸 브릿지 가이드

쇼룸의 기능 중 플레이어 이동, 배너 클릭, 상품 클릭, 알림 받기/해제 등과 같은 특정 이벤트에 대한 동작을 직접 구현할 수 있습니다.

특정 이벤트에 대한 동작을 구현하고자 하는 위치에 따라 구분하여 구현할 수 있습니다.

📘
쇼룸 라이브러리를 사용한 웹페이지를 iframe으로 사용하는 경우에는 필수로 구현해야 하며,
부모 페이지에서 구현하는 경우를 참고해 주세요.

동일 페이지 내 구현하는 경우 (5월 28일 오픈 예정)

쇼룸 라이브러리를 사용한 웹페이지에서 window.showroom객체에 함수를 정의하여 구현할 수 있습니다.

window.showroom = {
  // 배너 클릭 시의 이벤트 정의
  sauceShowroomMoveBanner: ({ linkUrl }) => {
    window.location.href = linkUrl;
  },
  // 상품 클릭 시의 이벤트 정의
  sauceShowroomMoveProduct: ({ linkUrl }) => {
    window.location.href = linkUrl;
  },
  // 클립 플레이어 이동 이벤트 정의
  sauceShowroomMoveSauceClipPlayer: ({ clipUrl }) => {
    window.location.href = clipUrl;
  },
  // 라이브 플레이어 이동 이벤트 정의
  sauceShowroomMoveSauceLivePlayer: ({ broadcastUrl }) => {
    window.location.href = broadcastUrl;
  },
  // 알림 받기 클릭 시의 이벤트 정의
  sauceShowroomTurnOnNotification: () => {
    // 5월 28일 오픈 예정
  },
  // 알림 해제 클릭 시의 이벤트 정의 
  sauceShowroomTurnOffNotification: () => {
    // 5월 28일 오픈 예정
  },
};

부모 페이지에서 구현하는 경우

쇼룸 라이브러리를 사용한 웹페이지를 iframe으로 사용하는 경우, 부모 페이지에서 message 이벤트 리스너를 통해 구현할 수 있습니다.

window.addEventListener('message',(e)=>{
    if (typeof e.data === 'string') {
        let event;
        let params;
        
        try {
            const data = JSON.parse(e.data);
            event = data.key ?? data.type;
            params = data.params;
        } catch (_error) {
            event = e.data;
        }
        
        switch (event) {
            // 배너 클릭 시의 이벤트 정의
            case 'sauceShowroomMoveBanner': {
                window.location.href = params.linkUrl;
                break;
            }
            // 상품 클릭 시의 이벤트 정의
            case 'sauceShowroomMoveProduct': {
                window.location.href = params.linkUrl;
                break;
            }
            // 클립 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceClipPlayer': {
                window.location.href = params.clipUrl;
                break;
            }
            // 라이브 플레이어 이동 이벤트 정의
            case 'sauceShowroomMoveSauceLivePlayer': {
                window.location.href = params.broadcastUrl;
                break;
            }
            // 알림 받기 클릭 시의 이벤트 정의
            case 'sauceShowroomTurnOnNotification': {
                // 5월 28일 오픈 예정
                break;
            }
            // 알림 해제 클릭 시의 이벤트 정의
            case 'sauceShowroomTurnOffNotification': {
                // 5월 28일 오픈 예정
                break;
            }
            default:
        }
    }
});

이벤트 별 페이로드의 정의는 payload 정의 를 참고해주세요.