CATEGORY

• 카테고리를 선택하고 해당 카테고리의 상품 정보를 가져올 수 있어요.
• 선택한 카테고리 목록과 카테고리에 속한 상품들을 함께 제공해요.
• 카테고리별 상품 목록이나 카테고리 탭 구성에 적합해요.

<template>
  {{#each property.categories.data}}
    <button data-category-id="{{id}}">{{name}}</button>
  {{/each}}
  {{#each property.categories.products.data}}
    <div>{{name}} - {{price.sale}}</div>
  {{/each}}
</template>

<script>
  function updateActiveButton() {
    const active = bm.config('property:categories.products.category');
    const activeBtn = bm.container.querySelector(`[data-category-id="${active}"]`);
    if (activeBtn) activeBtn.classList.add('active');
  }

  updateActiveButton();
  bm.onContextChange = () => updateActiveButton();

  bm.container.addEventListener('click', (event) => {
    if (event.target.matches('[data-category-id]')) {
      bm.config('property:categories.products.category', event.target.dataset.categoryId);
      bm.apply();
    }
  });
</script>

"categories": {
  "data": [                        // 선택된 카테고리 목록
    {
      "id": "ABC123,DEF456",       // "All"은 콤마(,)로 연결된 선택 카테고리 ID
      "name": "All",               // "All"은 이름이 "All"로 고정
      "path": [],                  // "All"은 항상 빈 배열
      "children": [ ... ]          // "All"은 선택된 카테고리를 포함 (예: 현 예시의 상의, 하의, ...)
    },
    {
      "id": "ABC123",              // 카테고리 ID
      "name": "상의",               // 카테고리 이름
      "path": [],                  // 조상 카테고리 경로 (루트 → 현재 카테고리 직전까지)
      "children": [                // 직계 하위 카테고리 목록
        {
          "id": "GHI789",
          "name": "맨투맨",
          "path": [
            { "id": "ABC123", "name": "상의" }
          ],
          "children": [ ... ]
        }
      ]
    },
    {
      "id": "DEF456",
      "name": "하의",
      "path": [],
      "children": [ ... ]
    }
    ...
  ],
  "products": {                    // 선택된 카테고리 내 상품
    "data": [ ... ],               // 상품 목록 (PRODUCT 세팅 참고)
    "count": 107                   // 선택된 카테고리 내 총 상품 개수
  }
}

bm.config()

bm.config()를 통해 데이터를 가져오는 방식을 설정할 수 있어요.

bm.config('property:categories.products.category', categoryId); // 선택 카테고리 변경
bm.config('property:categories.products.page', page); // 페이지 번호 설정
bm.config('property:categories.products.limit', limit); // 가져올 상품 개수 설정
bm.config('property:categories.products.sort', sort); // 정렬 설정 (예: 'price.original', '-price.original', 'price.sale', '-price.sale', 'createdAt', '-createdAt', 'sequence', '-sequence')