[PaaS만]{class="badge informative" title="Adobe Commerce 온 클라우드 프로젝트(Adobe 관리 PaaS 인프라) 및 온프레미스 프로젝트에만 적용됩니다."}

Headless 상점 첫 화면 통합

CommerceAdapter 모듈이 Adobe Commerce을(를) 확장하여 헤드리스 상점 앞과 Adobe Commerce Optimizer 사이의 간격을 메웁니다. 고객 가격 장부 컨텍스트를 해결하기 위한 GraphQL 쿼리를 제공하고 Adobe Commerce Optimizer GraphQL API에 필요한 번들 제품 인코딩을 적용합니다.

높은 수준의 상점 설치 지침은 Adobe Commerce Optimizer Connector 개요에서 머천다이징 및 상점 구성을 참조하십시오.

GraphQL: commerceOptimizer 쿼리 graphql-commerceoptimizer-query

Headless storefront는 commerceOptimizer GraphQL 쿼리를 호출하여 현재 고객 세션에 대한 priceBookId을(를) 검색합니다. 가격을 가져올 때 이 값을 Adobe Commerce Optimizer GraphQL API에 전달하십시오.

{
  commerceOptimizer {
    priceBookId
  }
}

응답 예:

{
  "data": {
    "commerceOptimizer": {
      "priceBookId": "base::a94a8fe5ccb19ba61c4c0873d391e987982fbbd3"
    }
  }
}

priceBookId을(를) 해결하는 방법:

Store 요청 헤더가 웹 사이트 범위를 결정하므로 websiteCode 구성 요소가 결정됩니다. sha1(customerGroupId) 구성 요소는 데이터 동기화 중에 사용된 가격 장부 ID 수식과 일치합니다. 가격 장부를 참조하세요.

번들 제품: 장바구니에 추가 형식 bundle-products-add-to-cart-format

쇼핑객이 선택한 각 번들 옵션에 대해 SKU 및 qty만 사용하여 Headless 상점 앞에서 장바구니에 번들 제품을 추가할 수 있도록 허용합니다.

선택하거나 입력한 각 옵션 값은 다음 형식으로 base64로 인코딩되어야 합니다.

base64("bundle_item/" + JSON.stringify({"sku": "<child_sku>", "qty": "<qty>"}))

모든 옵션에서 동일한 하위 SKU가 한 번만 표시될 수 있습니다.

예(JavaScript):

const encodedOption = btoa(
  'bundle_item/' + JSON.stringify({ sku: 'child-product-sku', qty: '1' })
);