라이브 목록

최근 라이브·예정 라이브·라이브 캘린더 세 모듈입니다. 표시 개수와 레이아웃은 어드민 테마 설정이 결정합니다.

라이브 목록 — 쇼룸 WEB

⏱ 예상 소요 시간: 10분

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

모듈 3종

모듈	함수	표시되는 것
최근 라이브	`loadRecentLive`	진행 중·종료된 라이브 목록
예정 라이브	`loadScheduledLive`	방송 예정인 라이브 목록
라이브 캘린더	`loadLiveCalendar`	날짜별 편성표

▲ 최근 라이브 — 카드에 담기는 항목과 표시 개수는 어드민 테마 설정이 결정합니다

호출

javascript

window.SauceShowroomLib.loadRecentLive({ elementId: 'my-recent-live' })

window.SauceShowroomLib.loadScheduledLive({ elementId: 'my-scheduled-live' })

window.SauceShowroomLib.loadLiveCalendar({ elementId: 'my-live-calendar' })

파라미터	타입	필수	기본값
elementId	String	선택	`sauce-showroom-recent-live` `sauce-showroom-scheduled-live` `sauce-showroom-live-calendar`

최근 라이브 레이아웃

loadRecentLive 만 typeCode 로 레이아웃을 고를 수 있습니다.

javascript

window.SauceShowroomLib.loadRecentLive({
  elementId: 'my-recent-live',
  typeCode: 'WIDE'
})

typeCode	목록	모두보기
생략	테마에 설정한 개수만큼	모두보기 버튼 → 모달
`'WIDE'`	전체 목록을 펼쳐 표시	스크롤에 따라 더 불러오기

테마가 결정하는 것

함수 파라미터로는 조정하지 않습니다.

항목	대상
제목 표시 여부와 문구	세 모듈 모두
표시 개수	최근 라이브
진행 중 라이브 포함 여부	최근 라이브
정렬 필터 표시 여부	최근 라이브
레이아웃 유형	예정 라이브 — 캐러셀 · 피드 · 이미지 · 리스트 · 와이드
알림 버튼 사용 여부	예정 라이브 · 라이브 캘린더
카드 색상·상품 정보 노출	세 모듈 모두

💡 설정 위치는 어드민 테마 설정 > 라이브 예고 · 최근 라이브 영역입니다.

알림 버튼

예정 라이브와 라이브 캘린더의 시작 전 카드에 알림 버튼이 표시됩니다.

어드민 테마 설정에서 알림받기 기능을 사용으로 설정합니다.
사용자 인증으로 회원 정보를 전달합니다.
라이브 알림 연동의 브릿지 이벤트를 구현합니다.

⚠️ 세 조건 중 하나라도 빠지면 알림 버튼이 표시되지 않거나 눌러도 완료되지 않습니다. 알림은 브릿지 이벤트 없이 동작하지 않습니다.

다음 단계

다시보기 큐레이션 — VOD · CLIP

→

Updated about 4 hours ago

Did this page help you?