모아보기 모듈화 사용법
모듈화 사용
페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다. id 속성에는 임의의 값을 지정합니다.
여러 요소에 적용하려는 경우, 복수의 태그를 임의의 위치에 추가합니다. 단, 중복되지 않는 id 속성의 값을 지정합니다.
큐레이션 모듈화
<div id='curation_1'></div>
<div id='curation_2'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_1" });
// 임의의 큐레이션ID 는 소스라이브 어드민에서 확인가능합니다.(모아보기=>큐레이션리스트에서 개별 큐레이션 클릭해서 확인)
// elementId 는 curation_1 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>
// or
<script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_1" });
window.SauceWebLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "curation_2" });
</script>
// elementId 는 curation_1 와 같이 지정 위치에 렌더링할 ID 를 지정하며 여러개의 큐레이션을 세팅하여 모듈화 가능합니다.
캘린더 모듈화
<div id='calendar'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadCalendar({ elementId: "calendar" });
// elementId 는 calendar 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>
배너 모듈화
<div id='topBanner'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadTopBanner({ elementId: "topBanner" });
// elementId 는 topBanner 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>
스케쥴 모듈화 (라이브 미리보기)
<div id='schedule'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadSchedule({
scheduleType: 'image' | 'feed' | 'list',
elementId: "schedule"
});
// elementId 는 schedule 와 같이 지정 위치에 렌더링할 ID 를 지정합니다.
</script>
최신 라이브 영역 모듈화 (라이브 다시보기)
<div id='broadcast'></div>
<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
window.SauceWebLib.setInit({ partnerId: 'service1234' });
window.SauceWebLib.loadBroadcast({
displayType: "horizontal", // 종류: 'horizontal'(가로형), 'vertical'(세로형)
elementId: "broadcast",
title: "최근 방송 보기" // 해당 모듈에 제목을 사용하지 않을 경우 생략 가능
});
// elementId 는 schedule 와 같이 지정 위치에 렌더링할 ID 를 지정하는 필수 값입니다.
// displayType을 통해 표시 유형을 가로형과 세로형으로 설정할 수 있습니다.
// displayType은 선택 값이며, 해당 기능은 모듈화 방식만 지원합니다. 기본값은 'horizontal'(가로형)입니다.
// title 을 통해 라이브 방송 영역의 제목을 입력할 수 있습니다.
// title 은 선택 값이며, 해당 기능은 모듈화 방식만 지원합니다.
</script>
Updated about 9 hours ago
What’s Next