컬렉션 고급 구성

숏폼 컬렉션을 원하는 형식으로 구성할 수 있습니다.

기본 구성

<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"],                  // (optional) sku 로 검색할 때
    brands: ["BRAND_IDENTIFIER1","BRAND_IDENTIFIER2"],      // (optional) brand 로 검색할 때
    tags: ["TAG1", "TAG2", "TAG3"],   // (optional) tag 배열
    shuffle: false,                   // (optional) 랜덤구성 여부, true | false
    shortformCollectionId: "SHORTFORM_GROUP_ID",   // (optional) 특정 숏폼 GroupId 지정 가능
    sortProperty: "viewCount",         // (optional) "likeCount" | "viewCount" | "commentCount" | "shareCount" | "bookmarkCount"
    sortDirection: "desc"             // (optional) "asc" | "desc"  
  });
</script>

숏폼 그룹으로 구성

그룹 정보에서 얻은 숏폼 그룹 ID를 통해 특정 숏폼 그룹으로만 구성된 컬렉션을 구성합니다.

• 관련 가이드: 숏폼 그룹 사용하기

<div id="shoplive-shortform"></div>  
<script>    
  cloud.shoplive.setShortformCollection('shoplive-shortform', { 
     shortformCollectionId :"SHORTFORM_GROUP_ID",    
  });  
</script>

SKU로 구성

단일 또는 여러개의 sku 값을 사용하여 연관된 숏폼의 컬렉션을 구성할 수 있습니다.

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

태그로 구성

각 숏폼 영상에 설정된 태그를 사용하여 숏폼 컬렉션을 구성할 수 있습니다.

단일 태그

단일 태그를 사용하여 컬렉션을 구성할 수 있습니다.

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

복수 태그

여러 태그를 포함하는 검색 조건을 사용하여 컬렉션을 구성할 수 있습니다. 태그는 최대 5개까지 설정할 수 있으며 OR 모드에서 작동합니다.

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

여러 개의 태그로 숏폼 컬렉션을 구성할 때, tagSearchOperator="AND" 옵션을 활용하여 모든 태그(AND 조건)를 포함하는 조건으로 구성할 수 있습니다.

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

브랜드로 구성

각 숏폼 영상에 설정된 브랜드의 Brand Identifier를 사용하여 브랜드별 컬렉션을 생성할 수 있습니다.

단일 브랜드

단일 브랜드 식별자를 사용하여 컬렉션을 구성할 수 있습니다.

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

복수 브랜드

여러 브랜드를 포함하는 컬렉션을 구성하려면 배열에 브랜드 식별자를 포함합니다. 브랜드 수는 최대 5개까지 가능합니다.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", { 
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"] 
  });
</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_IDENTIFIER1", "BRAND_IDENTIFIER2"],
    tags: ["TAG1", "TAG2"],
    shuffle: true
  });
</script>

Shortform 임의 재생 정책

무작위로 생성된 목록에서 Shortform을 클릭하면 피드의 Shortform 순서도 무작위로 생성됩니다.

컬렉션 자동 재생 끄기

컬렉션의 숏폼이 화면에 노출시 자동으로 재생되는 기능을 off 합니다.

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

노출되는 숏폼 갯수 지정하기

HORIZONTAL 템플릿의 숏폼 컬렉션에서 화면에 노출되는 숏폼의 갯수를 설정하고, 추가로 숏폼을 불러오지 않습니다.

<div id="shoplive-shortform"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform", {
    template: "HORIZONTAL",
    hasMoreButton: false,
    limit: 5 // MAX: 24
  });
</script>