レイアウトのカスタマイズ

Shoplive Pluginのページは、以下のように様々なフォーマットで設定することができます。

• featuredOnly: Plugin上部のプレイヤー領域のみを表示

• list-Only: ライブ配信一覧のみ表示

• campaignList (配信一覧)のレイアウトをGRID形式で表示する

• campaignList (配信一覧)のレイアウトをHORIZONTAL形式で表示する

• featuredOnly と list-Onlyの間に任意のコンテンツを追加する

• featuredPlayerModal: ライブ配信のモーダルウィンドウだけを表示する

• show/dismissLiveMiniPreview: 配信バナーを手動で制御する

featuredOnly: Plugin上部のプレイヤー領域のみ表示

次のコードをWebページにインストールして、Plugin上部のプレーヤー領域のみを表示

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

list-Only: ライブ配信一覧 のみ表示

Webページに以下のコードをインストールし、Plugin下部のライブ配信一覧(リストのみのレイアウト)を表示

<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(配信一覧)のレイアウトをGRID形式で表示する

次のコードを Web ページにインストールして、配信一覧をGRIDレイアウトで表示します

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

campaignList(配信一覧)のレイアウトをHORIZONTAL形式で表示する

次のコードを Web ページにインストールして、配信一覧をHORIZONTALレイアウトで表示します

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

featuredOnlyとlist-Onlyの間に任意のコンテンツを追加する

1. 初期化（詳細は Shoplive Plugin連携 - 基本的なインストール方法 を参照）

2. Plugin上部のプレイヤー領域（featuredOnly）を呼び出すコードを挿入します。

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

3. 任意のコンテンツを追加する

4. Plugin下部のライブ配信一覧を呼び出すコードを挿入する(list-Only)

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

featuredPlayerModal: ライブ配信のモーダルウィンドウだけを表示する

1.初期化

2.[Step 2: setOverall]の代わりに次のコード を挿入します。(ステップ2:プレイヤー、リストの表示)

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

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

disableHistoryHook

showFeaturedPlayerModal を使用してコンテンツを再生する場合、戻るボタンは現在のページのプレーヤーのみを非表示にします。前のページに戻るには、disableHistoryHook:true オプションを使用してください。

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

show/dismissLiveMiniPreview: 配信バナーを手動で表示および閉じる

進行中のライブ配信がある場合、ピクチャ イン ピクチャ(PIP)形態のプレビューで配信バナーが自動的に表示されます。この機能を無効にするには、Shoplive管理画面のサイドメニューから「プラグイン」＞「PIP」＞「配信バナー」セクションで「使用しない」にチェックを入れます。

手動で構成する場合は、次のコードを使用します。

showLiveMiniPreview: 配信バナーを表示

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

dismissLiveMiniPreview: 配信バナーを閉じる

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