PRODUCT

• 상품을 선택하고 상품 카탈로그 정보를 가져올 수 있어요.
• 대표 상품 소개, 추천 상품, 상품 목록처럼 상품 정보를 표시해야 하는 블록에 적합해요.

<template>
  {{#each property.products.data}}
    <div>{{name}} - {{price.sale}}</div>
  {{/each}}
  <button>더 보기</button>
</template>

<script>
  bm.container.addEventListener('click', (event) => {
    event.preventDefault();
    if (event.target.matches('button')) {
      const currentPage = bm.config('property:products.page');
      bm.config('property:products.page', currentPage + 1);
      bm.apply();
    }
  });
</script>

"products": {
  "data": [
    {
      "id": "...",                  // 카탈로그 ID
      "product": { "id": "..." },   // 상품 ID
      "option": { "id": "..." },    // 옵션 ID (옵션: 사이즈, 색상 등)
      "variation": { "id": "..." }, // 옵션 선택지 ID (옵션 선택지: M, 빨강 등)
      "variant": { "id": "..." },   // 품목 ID (옵션 조합: M/빨강 등)
      "availability": "in-stock",   // 재고 상태 (예: "in-stock", "out-of-stock", "temporarily-out-of-stock"). "in-stock"이 아니면 품절 상태
      "isQuickAddable": false,      // 바로 담기 가능 여부
      "slug": "...",                // 상품 슬러그 (상품 URL에 사용)
      "name": "상품 이름",           // 상품 이름
      "summary": "요약 설명",        // 상품 요약
      "labels": [                   // 상품 라벨 목록
        {
          "id": "...",              // 라벨 ID
          "name": "인기 상품"        // 라벨 이름
        }
      ],
      "images": [                   // 상품 이미지 목록 (현재는 항상 1개)
        { "url": "https://example.org/image.png" }
      ],
      "price": {                    // 가격 정보
        "original": 50000,          // 정가
        "sale": 42500               // 판매가
      },
      "discounts": [                // 할인 목록
        {
          "name": null,             // 할인명 (있는 경우)
          "type": "percentage",     // 할인 타입 (예: "percentage", "fixed")
          "discounted": 7500,       // 할인 금액
          "value": 15,              // 할인값 (예: 15% 또는 7500원)
          "discountType": "default" // 할인 분류
        }
      ],
      "shipping": {                       // 배송 정보
        "methods": [                      // 배송 방식 목록
          {
            "id": "1",                    // 배송 방식 ID
            "name": "택배"                 // 배송 방식 이름
          }
        ]
      },
      "review": {                         // 리뷰 정보
        "publicReviewAverageRating": 4.5, // 평균 평점
        "publicReviewCount": 10           // 리뷰 개수
      }
    }
  ],
  "count": 1 // 총 상품 개수
}

bm.config()

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

bm.config('property:products.page', page); // 페이지 번호 설정
bm.config('property:products.limit', limit); // 가져올 상품 개수 설정
bm.config('property:products.sort', sort); // 정렬 설정 (예: 'price.original', '-price.original', 'price.sale', '-price.sale', 'createdAt', '-createdAt', 'sequence', '-sequence')
bm.config('property:products.search', search); // 상품명 키워드 검색 필터