전시 모듈화 사용법
모듈화 방식
STEP 1. 페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다. id 속성에는 임의의 값을 지정합니다.
여러 요소에 적용하려는 경우, 복수의 태그를 임의의 위치에 추가합니다. 단, 중복되지 않는 id 속성의 값을 지정합니다.
<div id="{{임의의 태그ID}}"></div>
STEP 2. 모듈을 초기화합니다.
파트너ID에는 계정정보 가져오기 API를 통해서 확인한 파트너ID를 입력해 주세요.
<script>
window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
</script>
STEP 3. 선택적으로 옵션을 설정합니다.
STEP 3는 선택사항입니다. 실행하지 않는 경우 기본 설정으로 적용됩니다.
선택 가능한 옵션은 다음과 같습니다.
- 플레이어 실행 방식 설정
- 전시 요소의 인라인 스타일 설정
STEP 3-플레이어 실행 방식 설정
큐레이션 내 클립 클릭 시, 플레이어를 실행하는 방식을 선택할 수 있습니다.
- 리다이렉션 (기본)
<script>
window.SauceClipCollectionLib.setClipPlayerOpenType('redirect');
</script>
- 새창 열기
<script>
window.SauceClipCollectionLib.setClipPlayerOpenType('new-window');
</script>
- 모달 열기
<script>
window.SauceClipCollectionLib.setClipPlayerOpenType('modal');
</script>
STEP 3-최대 너비 설정
페이지의 최대 너비를 선택할 수 있습니다.
- 1200px (기본)
<script>
window.SauceClipCollectionLib.setMaxWidth(1200);
</script>
- 1280px
<script>
window.SauceClipCollectionLib.setMaxWidth(1280);
</script>
- 새창 열기
STEP 3-전시 요소의 인라인 스타일 설정
특정 요소에 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>
STEP 4. STEP1에서 추가한 태그에 전체 페이지나 큐레이션이 렌더링 되도록 함수를 실행합니다.
함수를 여러 번 실행하여 복수의 페이지나 큐레이션을 렌더링할 수 있습니다.
STEP 4-전체페이지 렌더링
다음과 같이 함수를 실행합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.
<script>
window.SauceClipCollectionLib.load({ elementId: "{{임의의 태그ID}}" });
</script>
STEP 4-큐레이션 렌더링
다음과 같이 함수를 실행합니다.
함수 매개변수 내 curationId의 값에는 등록된 큐레이션 id 값을 지정합니다.
함수 매개변수 내 elementId의 값에는 STEP1에서 추가한 원하는 위치의 태그 id 속성 값을 지정합니다.
<script>
window.SauceClipCollectionLib.loadCuration({ curationId: "{{임의의 큐레이션ID}}", elementId: "{{임의의 태그ID}}" });
</script>
STEP5. 페이지 내에 적용된 것을 확인합니다.
- 등록된 큐레이션이 없는 경우, 빈 화면이 출력됩니다.
- 큐레이션 내에 공개 상태의 클립이 없는 경우에 빈 화면이 출력됩니다
Updated about 11 hours ago