전시 모듈화 사용법

모듈화 방식

여러 요소에 적용하려는 경우, 복수의 태그를 임의의 위치에 추가합니다. 단, 중복되지 않는 id 속성의 값을 지정합니다.

<div id="{{임의의 태그ID}}"></div>

📘
파트너ID에는 계정정보 가져오기 API를 통해서 확인한 파트너ID를 입력해 주세요.

<script>
  window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
</script>

STEP 3는 선택사항입니다. 실행하지 않는 경우 기본 설정으로 적용됩니다.

선택 가능한 옵션은 다음과 같습니다.

큐레이션 내 클립 클릭 시, 플레이어를 실행하는 방식을 선택할 수 있습니다.

<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('redirect');
</script>

<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('new-window');
</script>

<script>
  window.SauceClipCollectionLib.setClipPlayerOpenType('modal');
</script>

페이지의 최대 너비를 선택할 수 있습니다.

<script>
  window.SauceClipCollectionLib.setMaxWidth(1200);
</script>

<script>
  window.SauceClipCollectionLib.setMaxWidth(1280);
</script>

특정 요소에 css 인라인 스타일을 추가할 수 있습니다.

<script>
  SauceClipCollectionLib.setCurationNavigationContainerStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 10}'
</script>

<script>
  SauceClipCollectionLib.setCurationNavigationScrollButtonStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 100}'
</script>

<script>
  SauceClipCollectionLib.setCurationClipMediaStyle("{{인라인스타일 문자열}}"); // ex) '{"zIndex": 90}' 
</script>

<script>
  SauceClipCollectionLib.setCurationHorizontalContentsStyle("{{인라인스타일 문자열}}"); // ex) '{"padding": "0 16px"}' 
</script>

함수를 여러 번 실행하여 복수의 페이지나 큐레이션을 렌더링할 수 있습니다.

다음과 같이 함수를 실행합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.

<script>
  window.SauceClipCollectionLib.load({ elementId: "{{임의의 태그ID}}" });
</script>

다음과 같이 함수를 실행합니다.
함수 매개변수 내 curationId의 값에는 등록된 큐레이션 id 값을 지정합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.

<script>
  window.SauceClipCollectionLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "{{임의의 태그ID}}" });
</script>

📘

등록된 큐레이션이 없는 경우, 빈 화면이 출력됩니다.

큐레이션 내에 공개 상태의 클립이 없는 경우에 빈 화면이 출력됩니다