쇼룸 브릿지 가이드
쇼룸의 기능 중 플레이어 이동, 배너 클릭, 상품 클릭, 알림 받기/해제 등과 같은 특정 이벤트에 대한 동작을 직접 구현할 수 있습니다.
특정 이벤트에 대한 동작을 구현하고자 하는 위치에 따라 구분하여 구현할 수 있습니다.
쇼룸 라이브러리를 사용한 웹페이지를 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 정의 를 참고해주세요.
Updated 8 days ago