노출 구성 제어

Shoplive Plugin 페이지를 아래와 같이 다양한 형식으로 구성할 수 있습니다.

• featuredOnly: 플레이어 영역만 노출

• list-Only: 방송 모아보기 영역만 노출

• campaignList의 layout을 GRID 형태로 만들기

• campaignList의 layout을 HORIZONTAL 형태로 만들기

• featuredOnly와 (list-Only) 사이에 콘텐츠 삽입

• featuredPlayerModal: 방송 모달창만 노출

• show/dismissLiveMiniPreview: 방송 배너 수동 제어

featuredOnly: 플레이어 영역만 노출

상단 플레이어 영역을 노출할 웹페이지에 다음 코드를 설치합니다.

<div id="featuerd-only"></div>
  <script defer>
    cloud.shoplive.setOverall('featuerd-only', { featuredOnly: true });
  </script>

list-Only: 방송 모아보기 영역만 노출

방송 모아보기 영역을 노출할 웹페이지에 다음 코드를 설치합니다.

<div id="list-only"></div>
  <script defer>
    cloud.shoplive.setOverall('list-only', { campaignListsOnly: true });
  </script>

campaignStatus - 특정 상태의 방송으로 목록 구성

특정 상태의 방송으로만 목록을 구성하고 싶을 때에는, 아래 코드를 참고해주세요.

<div id="list-only"></div>
  <script defer>
    var campaignStatus = 'CLOSED'; // 'ONAIR' | 'CLOSED' | 'READY'
    cloud.shoplive.setOverall('list-only', {
      campaignListsOnly: true,
      campaignStatus: campaignStatus
    });
  </script>

tags - 캠페인 태그를 통해 목록 구성

특정 태그의 방송으로만 목록을 구성하고 싶을 때에는, 아래 코드를 참고해주세요.

• 복수개 태그 사용시 tagSearchOperator를 통해 OR | AND 조건을 지정을 할 수 있습니다.

<div id="list-only"></div>
  <script defer>
    var campaignStatus = 'CLOSED'; // 'ONAIR' | 'CLOSED' | 'READY'
    cloud.shoplive.setOverall('list-only', {
      campaignListsOnly: true,
      tags: ["tag1","tag2"],
      tagSearchOperator:"OR"
    });
  </script>

campaignList의 layout을 GRID 형태로 만들기

방송 모아보기를 격자형 목록으로 노출할 새 웹페이지 또는 기존 웹페이지에 다음 코드를 설치합니다.

<script defer>
  var overallConfig = { campaignList: { layout: 'GRID' }};
  cloud.shoplive.setOverall('YOUR_CONTAINER_ID', overallConfig);
</script>

campaignList 의 layout을 HORIZONTAL 형태로 만들기

방송 모아보기를 한줄 가로 스크롤로 노출할 새 웹페이지 또는 기존 웹페이지에 다음 코드를 설치합니다.

<script defer>
  var overallConfig = { campaignList: { layout: 'HORIZONTAL' }};
  cloud.shoplive.setOverall('YOUR_CONTAINER_ID', overallConfig);
</script>

featuredOnly와 list-Only 사이에 콘텐츠 삽입

1. 초기화

2. 상단 플레이어 영역(featured-only)을 호출하는 코드 삽입

<div id="featuerd-only"></div>
  <script defer>
    cloud.shoplive.setOverall('featuerd-only', { featuredOnly: true });
  </script>

3. 원하는 콘텐츠 삽입

4. 하단 캠페인 영역(list-only) 호출하는 코드 삽입

<div id="list-only"></div>
  <script defer>
    cloud.shoplive.setOverall('list-only', { campaignListsOnly: true });
  </script>

featuredPlayerModal: 방송 모달창만 노출

1. 초기화

2. 플레이어와 목록 표시하기 대신 다음 코드를 설치

<script defer>
  cloud.shoplive.showFeaturedPlayerModal({campaignKey: "CAMPAIGN_KEY_HERE"});
</script>

dismissLayerModalPlayer

활성화 되어있는 방송 모달창을 닫을 수 있습니다.

<script defer>
  cloud.shoplive.dismissLayerModalPlayer();
</script>

disableHistoryHook

showFeaturedPlayerModal을 사용하여 콘텐츠를 재생할 때, 뒤로가기 버튼은 현재 페이지에서 Player만 사라지도록 정의됩니다. 이전 페이지로 돌아가도록 하기 위해서는 disableHistoryHook:true 옵션을 사용합니다.

<script defer>
  cloud.shoplive.showFeaturedPlayerModal({campaignKey: "CAMPAIGN_KEY_HERE", disableHistoryHook: true});
</script>

show/dismissLiveMiniPreview: 방송 배너 수동 제어

현재 LIVE 상태의 방송이 있다면, PIP 형태의 미리보기로 방송 배너가 자동으로 표시됩니다.

이 기능을 수동으로 제어하려면 Shoplive Admin 페이지 - 플러그인 - PIP - 방송배너를 사용안함으로 체크하세요.

수동으로 구성하려면 다음 코드를 사용하세요.

showLiveMiniPreview - 방송 배너 표시

<script defer> cloud.shoplive.showLiveMiniPreview(); </script>

dismissLiveMiniPreview - 방송 배너 닫기

<script defer> cloud.shoplive.dismissLiveMiniPreview(); </script>