전시 사용 예시
예제 코드
스테이지 환경으로 예시 페이지에 전시하는 예제 코드입니다.
전체 페이지만을 렌더링하는 방식
파트너ID 입력이 필요합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>[스테이지] 소스클립 전시 전체페이지만 렌더링 방식 데모</title>
</head>
<body>
<header>
<section class="left">
<a href="https://sauce.im">
<img
alt="logo"
src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
width="120"
height="30"
decoding="async"
loading="lazy"
style="color:transparent"
/>
</a>
</section>
<section class="center"></section>
<section class="right">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</header>
<main>
<!-- STEP1. 태그 추가 -->
<div id="sauce_clip_collection"></div>
</main>
<script>
/* 공통STEP. 스크립트 추가 */
const clipCollectionScriptEl = document.createElement("script");
clipCollectionScriptEl.setAttribute(
"src",
"https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
);
clipCollectionScriptEl.setAttribute("async", "");
document.head.append(clipCollectionScriptEl);
clipCollectionScriptEl.addEventListener("load", () => {
/* STEP2. 렌더링 함수 호출 */
window.SauceClipCollectionLib({ partnerId: 'mobidoo' });
});
</script>
</body>
<style>
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
header {
display: flex;
justify-content: space-between;
padding: 32px;
border-bottom: 2px solid rgba(0, 0, 0, 0.20);
width: 100%;
height: 98px;
}
header .right ul {
list-style: none;
display: flex;
gap: 8px;
}
header .right ul li {
width: 60px;
height: 30px;
border-radius: 8px;
background-color: #e6e6e6;
}
main {
width: 100%;
}
</style>
</html>
모듈화 방식
- 파트너ID 입력이 필요합니다.
- 큐레이션ID 입력이 필요합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>[스테이지] 소스클립 전시 모듈화 방식 데모</title>
</head>
<body>
<header>
<section class="left">
<a href="https://sauce.im">
<img
alt="logo"
src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75"
width="120"
height="30"
decoding="async"
loading="lazy"
style="color:transparent"
/>
</a>
</section>
<section class="center"></section>
<section class="right">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</header>
<main>
<!-- STEP1. 태그 추가 -->
<div id="sauce_clip_collection"></div>
<div id="sauce_clip_curation_1"></div>
<div id="sauce_clip_curation_2"></div>
<div id="sauce_clip_curation_3"></div>
</main>
<script>
// 공통STEP. 스크립트 추가
const clipCollectionScriptEl = document.createElement("script");
clipCollectionScriptEl.setAttribute(
"src",
"https://stage.showcase.sauceclip.com/static/js/SauceClipCollectionLib.js"
);
clipCollectionScriptEl.setAttribute("async", "");
document.head.append(clipCollectionScriptEl);
clipCollectionScriptEl.addEventListener("load", () => {
/* STEP2. 모듈 초기화 */
window.SauceClipCollectionLib.setInit({ partnerId: "mobidoo" });
/* STEP3. 옵션 설정 */
/* STEP 3-플레이어 실행 방식 설정. */
var clipPlayerOpenType = 'redirect'; // 리다이렉션
// var clipPlayerOpenType = 'new-window'; // 새창열기
// var clipPlayerOpenType = 'modal'; // 모달열기
window.SauceClipCollectionLib.setClipPlayerOpenType(clipPlayerOpenType);
/* STEP 3-전시 요소의 인라인 스타일 설정. */
/* 큐레이션 네비게이션 컨테이너 요소의 인라인 스타일 설정 - z-index 감소 */
SauceClipCollectionLib.setCurationNavigationContainerStyle('{"zIndex": 100}');
/* 큐레이션 네비게이션 스크롤 버튼 요소의 인라인 스타일 설정 - z-index 감소 */
SauceClipCollectionLib.setCurationNavigationScrollButtonStyle('{"zIndex": 10}');
/* 큐레이션 내 클립의 미디어 요소의 인라인 스타일 설정 - z-index 감소 */
SauceClipCollectionLib.setCurationClipMediaStyle('{"zIndex": 90}');
/* 가로형 큐레이션 내 컨텐츠 요소의 인라인 스타일 설정 - 좌우 여백 주기 */
var paddingValue = "16px"; // 여백값
window.SauceClipCollectionLib.setCurationHorizontalContentsStyle(`{"padding-left": "${paddingValue}", "padding-right": "${paddingValue}", "overflow-x": "hidden"}`);
/* STEP4. 렌더링 함수 호출 */
/* STEP 4-전체페이지 렌더링. */
window.SauceClipCollectionLib.load({ elementId: "sauce_clip_collection" });
/* STEP 4-큐레이션 렌더링. */
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_1" });
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_2" });
window.SauceClipCollectionLib.loadCuration({ curationId: "000", elementId: "sauce_clip_curation_3" });
});
</script>
<script>
window.addEventListener("load", () => {
window.addEventListener(
"message",
function (e) {
// 브릿지는 이 곳에서 처리할 수 있습니다.
},
false
);
});
</script>
</body>
<style>
html, body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
header {
display: flex;
justify-content: space-between;
padding: 32px;
border-bottom: 2px solid rgba(0, 0, 0, 0.20);
width: 100%;
height: 98px;
}
header .right ul {
list-style: none;
display: flex;
gap: 8px;
}
header .right ul li {
width: 60px;
height: 30px;
border-radius: 8px;
background-color: #e6e6e6;
}
main {
width: 100%;
}
</style>
</html>
Updated about 10 hours ago