숏폼 컬렉션 설치

인쇄

Article Summary

Share feedback

Thanks for sharing your feedback!

▶︎ 숏폼 컬렉션 안내

숏폼 컬렉션 설치 방법을 안내합니다.

[1 단계] 초기화

샵라이브 숏폼을 사용자 인증 없이 초기화하는 방법, 간단한 인증을 사용하는 방법, 그리고 JWT 토큰 인증을 사용하는 방법의 예시는 다음과 같습니다. 원하는 인증 타입의 초기화 코드를 공통 레이아웃(헤드 영역 등)에 설치합니다.

초기화와 함께 사용자 인증 기능을 사용하려면 사용자 인증 가이드를 참조하십시오.

Access Key
Access Key와 Secret Key는 Shoplive 담당자로부터 받을 수 있습니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//Simple auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWT auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

[2 단계] 원하는 형태의 숏폼 컬렉션 설치

"Shortform 목록을 노출하려는 위치에 아래 코드를 입력하세요. 템플릿은 'GRID1', 'GRID2', 'HORIZONTAL' 중 원하는 형태를 선택하여 설치할 수 있습니다.

<div id="shoplive-shortform"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID1 | GRID2 | HORIZONTAL"} );
</script>

▶︎ 레이아웃 안내

숏폼 컬렉션을 원하는 곳에 아래 3가지 형식으로 노출할 수 있으며 "더보기(VIEW MORE)" 버튼의 사용여부와 최대 줄수를 지정할 수 있습니다.

Grid1 - 세로 스크롤 레이아웃 (개별 콘텐츠 사이즈: Large)
Grid2 - 세로 스크롤 레이아웃 (개별 콘텐츠 사이즈: Small)
Horizontal - 가로 스크롤 레이아웃

Grid1 - 세로 스크롤 레이아웃 (개별 콘텐츠 사이즈: Large)

<div id="shoplive-shortform-1"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-1", {template: "GRID1"} );
</script>

Grid2 - 세로 스크롤 레이아웃 (개별 콘텐츠 사이즈: Small)

<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2"} );
</script>

Horizontal - 가로 스크롤 레이아웃

<div id="shoplive-shortform-3"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-3", {template: "HORIZONTAL"} );
</script>

구성 옵션

세로 스크롤 레이아웃(Grid1, Grid2)에서는 rows와 hasMoreButton 파라미터를 사용할 수 있습니다.

Parameter	Feature	Description	Default
rows	최대 줄 수	세로 스크롤 레이아웃에 적용되는 기본 행 수를 설정합니다.	2 (max:4)
hasMoreButton	‘더 보기’ 버튼 노출 여부	"더 보기" 버튼을 표시할지 여부를 나타냅니다. 표시하지 않으면 목록 하단에 도달하면 추가 행이 자동으로 로딩됩니다.	true

<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2" ,hasMoreButton:true, rows:4} );
</script>

What's Next

숏폼 프리뷰(PIP) 설치

▶︎ 숏폼 컬렉션 안내
▶︎ 레이아웃 안내