플레이어 모달

쇼룸의 방송 · 클립 카드를 누를 때 페이지를 옮기지 않고 그 자리에서 플레이어를 모달로 엽니다. setPlayerModalEnabled(true) 한 줄로 켭니다.

플레이어 모달

📋 사전 조건: 라이브러리 설치

모달 켜기

setInit 다음, load 앞에서 한 번 부릅니다.

javascript

window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너 ID' })
window.SauceShowroomLib.setPlayerModalEnabled(true)
window.SauceShowroomLib.load()

파라미터	타입	필수	기본값	설명
isEnabled	Boolean	필수	`false`	`true` 면 카드 · 배너를 누를 때 모달로 엽니다. `false` 면 다시 끕니다. 불리언이 아니면 브라우저 콘솔에 `플레이어 모달 표시 여부는 true 또는 false로 설정해주세요.` 를 남기고 무시합니다

📌 파트너 ID 가 없으면 모달을 열지 못합니다.

누르면 열리는 것

모달을 켜면 아래 셋이 페이지를 옮기지 않고 그 자리에서 열립니다.

누른 곳	열리는 것
라이브 · VOD 카드	소스라이브 플레이어 웹 SDK 의 모달. 쇼룸이 `open({ broadcastId, vodCurationId })` 을 부릅니다
라이브 배너	같은 웹 SDK 모달
클립 카드	쇼룸의 클립 플레이어 모달. 떠 있던 라이브 플레이어는 닫습니다
이미지 · 스트립 배너	바뀌지 않습니다. 어드민에서 정한 링크로 이동합니다

📘 모달을 열면 페이지 주소에 그 방송 · 클립의 쿼리가 붙고, 닫으면 지워집니다. 주소는 history.replaceState 로 바꾸므로 뒤로 가기 기록은 늘지 않습니다.

클릭 처리 순서

카드 · 배너를 누르면 아래 순서로 처음 해당하는 하나만 실행합니다.

순서	조건	동작
1	몰이 이동 연동 이벤트를 정의했다	그 이벤트를 부릅니다. 라이브 · VOD 카드 `sauceShowroomMoveSauceLivePlayer` · 배너 `sauceShowroomMoveBanner` · 클립 카드 `sauceShowroomMoveSauceClipPlayer`
2	모달을 켰다	모달을 엽니다
3	둘 다 아니다	플레이어 페이지로 이동합니다

⚠️ 이동 연동 이벤트를 정의한 몰에서는 모달이 열리지 않습니다. 모달로 바꾸려면 이동 연동에서 정의한 해당 이벤트를 지웁니다.

함께 바뀌는 동작

모달을 켠 쇼룸 페이지에서는 아래도 바뀝니다.

Updated about 5 hours ago

Did this page help you?