Shoplive Pluginのレイアウト構成

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>

dismissLayerModalPlayer (英語)

<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管理ページに移動し、[プラグイン]をクリックして、[キャンペーンバナー]の下の[使用しない]をオンにします

手動で設定を変更する場合は、次のコードを使用します

ライブミニプレイヤーを表示

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

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