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

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: ライブ放送のモーダルウィンドウだけを表示する

[Step 2: setOverall] の代わりに次のコード を挿入します。

<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: Live Mini プレビューを手動で表示および閉じる

進行中のライブ ブロードキャストがある場合、ブロードキャストのプレビューがピクチャ イン ピクチャ (PIP) ウィンドウに自動的に表示されます。この機能を無効にするには、Shoplive 管理ページに移動し、プラグインをクリックして、「キャンペーン バナー」の下の「使用しない」にチェックを入れます。

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

showLiveMiniPreview: キャンペーンバナーを表示

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

dismissLiveMiniPreview: キャンペーンバナーを閉じる

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