Guides

모아보기 모듈화 사용법

Suggest Edits

모듈화 사용

페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다. 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 11 hours ago

What’s Next