高度な設定 - 一覧表示のカスタマイズ

    高度な設定 - 一覧表示のカスタマイズ


    記事の要約

    ショートフォームリストは、任意の形式で構成できます。

    コレクション構成 - 基本

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform");
    </script>


    オプション構成

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", {
        template: "GRID1",                // "GRID1" | "GRID2" | "HORIZONTAL"
        sku: ["SKU1", "SKU2"],            // (任意)SKUで検索する場合
        brands: ["BRAND_IDENTIFIER1","BRAND_IDENTIFIER2"],  // (任意)ブランドで検索する場合
        tags: ["TAG1", "TAG2", "TAG3"],   // (任意)タグで検索する場合
        shuffle: false,                   // (任意)ランダム順に並び替えるかどうか、true | false
        shortformCollectionId: "SHORTFORM_GROUP_ID",   // (任意)特定のショートフォームGroupIdを指定可能
        sortProperty: "viewCount",         // (任意)並び順を指定。いいね数順 "likeCount" | 視聴数順 "viewCount" | コメント順 "commentCount" | シェア数順 "shareCount" | お気に入り順"bookmarkCount"
        sortDirection: "desc"             // (任意)昇順 "asc" | 降順 "desc"
      });
    </script>


    コレクション構成 - タグ

    Shoplive ショートフォームのリストは、各コンテンツに設定されたタグを使用して構成できます。

    単一タグ

    つのタグを使用してコレクションを構成できます。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        tags: ["YOUR_TAG"] 
      });
    </script>

    複数のタグ

    複数のタグを含む検索条件を使用してリストを設定できます。タグは最大5つまで設定でき、ORモードで動作します。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        tags: ["YOUR_TAG1", "YOUR_TAG2"] 
      });
    </script>

    ショートフォームに複数のタグを設定する場合、すべてのタグを含む条件(AND条件)として設定する tagSearchOperator="AND" オプションを追加できます 。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        tags: ["YOUR_TAG1", "YOUR_TAG2"],
        tagSearchOperator: "AND"
      });
    </script>



    コレクション構成 - ブランド

    Shoplive ショートフォームのコンテンツごとに設定されているブランドの「識別子」を使用して、ブランドのリストを作成できます。

    単一ブランド

    フィードは、1 つのブランド ID を使用して設定できます。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        brands: ["brand_idetifier"] 
      });
    </script>

    複数のブランド

    複数のブランドを含むショートフォームリストを設定するには、ブランド識別子を配列に含めます。ブランドの数は最大 5 つまで可能です。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        brands: ["brand_idetifier1", "brand_idetifier2"] 
      });
    </script>


    再生数やいいね数に基づく並び順の変更

    ショートフォーム動画を特定の実績データに基づいて並び順を変更したコレクションを作成できます。

    • sortProperty(基準測定値): likeCount(いいね数), viewCount(再生回数), commentCount(コメント数), shareCount(シェア数), bookmarkCount(ブックマーク数)

    • sortDirection(並び順): asc(昇順), desc(降順)

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", {
        sortProperty: "viewCount",        // (任意) "likeCount" | "viewCount" | "commentCount" | "shareCount" | "bookmarkCount"
        sortDirection: "desc"             // (任意) "asc" | "desc"
      });
    </script>


    コレクション構成 - ランダム掲載

    基本シャッフル

    リスト内のショートフォームの順序は、ランダムに表示されるように設定できます。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        shuffle: true 
      });
    </script>

    シャッフル - タグまたはブランド

    タグまたはブランドによるリスト設定と組み合わせて使用できます。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        brands: ["brand_idetifier1"],
        tags: ["your_tag1"],
        shuffle: true
      });
    </script>

    ショートフォームランダム再生ポリシー

    ランダムに生成されたリストからショートフォームをクリックすると、フィード内のショートフォームの順序もランダムに生成されます。


    コレクション構成 - 自動再生の無効化

    コレクション内のショートフォームビデオが画面に表示されるときに自動再生される機能をオフにします。

    <div id="shoplive-shortform"></div>
    <script defer>
      cloud.shoplive.setShortformCollection("shoplive-shortform", { 
        disablePreviewVideoPlay: true 
      });
    </script>