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

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


    記事の要約

    ▶︎ コレクションリストの設定

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

    コレクション構成 - 基本

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

    単一タグ

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

    <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",        // (optional) "likeCount" | "viewCount" | "commentCount" | "shareCount" | "bookmarkCount"
        sortDirection: "desc"             // (optional) "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>