배너

배너는 이미지·띠·라이브 3종이고 함수가 각각 다릅니다. 세 함수 모두 어드민에서 등록한 배너 그룹 ID를 받습니다.

배너 — 쇼룸 WEB

⏱ 예상 소요 시간: 10분

📋 사전 조건: 배너 그룹 ID

배너 3종

배너 그룹을 만들 때 고른 배너 유형에 맞는 함수를 호출합니다.

배너	함수	표시되는 것
이미지 배너	`loadImageBanner`	이미지 슬라이드
띠 배너	`loadStripBanner`	가로로 긴 띠 형태 슬라이드
라이브 배너	`loadLiveBanner`	라이브 영상·방송 정보·상품 영역·알림 버튼

▲ 이미지 배너 — 등록한 이미지(1024×350)와 여러 장일 때의 페이지네이션

▲ 띠 배너 — 이미지 크기(1024×224)가 다를 뿐 동작은 이미지 배너와 같습니다

💡 배너 그룹 등록과 배너 유형 선택은 어드민 쇼룸 > 배너 그룹에서 합니다. 배너 그룹은 최대 20개, 그룹당 이미지·띠 배너는 최대 50개입니다.

호출

세 함수의 파라미터는 같습니다.

javascript

window.SauceShowroomLib.loadImageBanner({
  bannerGroupId: '배너 그룹 ID',
  elementId: 'my-image-banner'
})

window.SauceShowroomLib.loadStripBanner({
  bannerGroupId: '배너 그룹 ID',
  elementId: 'my-strip-banner'
})

window.SauceShowroomLib.loadLiveBanner({
  bannerGroupId: '배너 그룹 ID',
  elementId: 'my-live-banner'
})

파라미터	타입	필수	설명
bannerGroupId	String	필수	배너 그룹 ID. 값이 잘못되면 브라우저 콘솔에 경고를 남기고 표시를 건너뜁니다 — 값이 없으면 `배너 그룹ID를 설정해주세요.` · 숫자 형식이 아니면 `올바른 형식의 배너 그룹ID를 설정해주세요.`
elementId	String	선택	생략하면 배너 종류별 기본 ID + 배너 그룹 ID `sauce-showroom-image-banner-{배너 그룹 ID}` `sauce-showroom-strip-banner-{배너 그룹 ID}` `sauce-showroom-live-banner-{배너 그룹 ID}`

라이브 배너의 추가 동작

이미지·띠 배너는 클릭 시 배너에 설정한 링크로 이동합니다. 라이브 배너는 방송 카드에 가까워 다루는 동작이 더 많습니다.

▲ 라이브 배너 — 영상·일시·방송명·이동 버튼·상품 영역·알림 버튼이 편성 정보로 구성됩니다

동작	연동
배너 클릭 → 라이브 플레이어 이동	이동 연동 — `sauceShowroomMoveBanner`
배너 안 상품 클릭	이동 연동 — `sauceShowroomMoveProduct`
방송 시작 전 알림 버튼	라이브 알림 연동

📌 브릿지 이벤트를 구현하지 않아도 배너 클릭은 동작합니다. 이 경우 쇼룸이 배너에 설정된 링크로 직접 이동시킵니다.

다음 단계

라이브 목록 — 최근 · 예정 · 캘린더

→

Updated about 4 hours ago

Did this page help you?