[PaaS only]{class="badge informative" title="Applies to Adobe Commerce on Cloud projects (Adobe-managed PaaS infrastructure) and on-premises projects only."}

Headless storefront integration

The CommerceAdapter module extends Adobe Commerce to bridge the gap between a headless storefront and Adobe Commerce Optimizer. It provides a GraphQL query for resolving the customer price book context, and enforces the bundle product encoding expected by the Adobe Commerce Optimizer GraphQL API.

For high-level storefront setup instructions, see Configure merchandising and storefronts in the Adobe Commerce Optimizer Connector overview.

GraphQL: commerceOptimizer query graphql-commerceoptimizer-query

Headless storefronts call the commerceOptimizer GraphQL query to retrieve the priceBookId for the current customer session. Pass this value to the Adobe Commerce Optimizer GraphQL API when fetching prices.

{
  commerceOptimizer {
    priceBookId
  }
}

Example response:

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

How priceBookId is resolved:

The Store request header determines the website scope and therefore the websiteCode component. The sha1(customerGroupId) component matches the price book ID formula used during data sync. See Price books.

Bundle products: add-to-cart format bundle-products-add-to-cart-format

Allow shoppers to add bundle products to the cart from a headless storefront with only the SKU and qty for each selected bundle option.

Each selected or entered option value must be base64-encoded in the following format:

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

The same child SKU may appear only once across all options.

Example (JavaScript):

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