Layout Configuration

Shoplive Plugin page can be configured in a variety of formats as follows:

• featuredOnly: Display only the featured area of the Plugin

• list-Only: Display only the campaign list

• campaignList: Display the campaign list with a grid layout

• campaignList: Display the campaign list with a horizontal layout\

• Add custom content between featuredOnly and list-Only

• featuredPlayerModal: how campaign with a modal layer

• show/dismissLiveMiniPreview: Show and dismiss Live Mini Preview manually

featuredOnly: Display only the featured area of the Plugin

Install the following code on a web page to display the top player area (featured-only layout).

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

list-Only: Display only the campaign list 

Install the following code on a web page to display the bottom livestream area (list-only layout).

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

campaignStatus

If you want to render campaign list with specific status, please refer to below sample.

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

tags

If you want to render campaign list with specific tags, please refer to below sample

• Using the tagSearchOperator, you can combine multiple tags with OR | AND condition.

<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: Display the campaign list with a grid layout

Install the following code on a web page to display the campaign list on a grid layout.

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

campaignList: Display the campaign list with a horizontal layout

Install the following code on a web page to display the campaign list on a horizontal layout

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

Add custom content between featuredOnly and list-Only

1. Initialize (For details, refer to Shoplive Plugin Integration - Basic guide)

2. Insert code to call the top player area(featured only)

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

3. Add any custom contents

4. Insert code to call the bottom livestream area(list only)

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

featuredPlayerModal: Show campaign with a modal layer

Insert the following code instead of [Step 2: setOverall]

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

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

disableHistoryHook

When you use showFeaturedPlayerModal to play content, the back button will only hide the player on the current page. To return to the previous page, use the disableHistoryHook:true option.

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

show/dismissLiveMiniPreview: Show and dismiss the Live Mini Preview manually

If there is an ongoing live broadcast, a preview of the broadcast will automatically be displayed in a Picture-in-Picture (PIP) window. To disable this feature, go to the Shoplive Admin page, click on Plugins, and then check the “Not use” under “Campaign banner”

If you want to manually configure, use the following code:

showLiveMiniPreview: Show Campaign Banner

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

dismissLiveMiniPreview: Dismiss Campaign Banner

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