Documentation

Composable Commerce extension

Elevate, May 20-22-2025, Miami Beach, Florida
commercetools Frontend comes with out-of-the-box Composable Commerce extensions for B2C and B2B. With the extensions, you can fetch data from Composable Commerce and display it in your Frontend components.
Prerequisites
  • Access to your commercetools Frontend GitHub customer repository
  • Access to your commercetools Frontend Project from the Studio
  • Access to your Composable Commerce Project

Use the Composable Commerce extension

You can find the Composable Commerce extension in your commercetools Frontend project at this path packages/PROJECT_NAME/backend/commerce-commercetools.
If the commerce-commercetools extension is not available in your commercetools Frontend project, before proceeding with the following configuration, you must:

  1. Clone the extension repository and add the code to your project:

  2. Register the extension in your project.

To use the Composable Commerce extension you must:

  1. Create an API client.
  2. Configure your Composable Commerce extension.
  3. Add data source schemas to the Studio.

Create an API client

When creating an API client, do the following:
  • If you are using the B2C extension, select Frontend B2C from the template drop-down list.
  • If you are using the B2B extension, select Frontend B2B from the template drop-down list.
For more information about API Clients, see Authorization and Scopes.

Configure the Composable Commerce extension

To configure your Composable Commerce extension, follow these steps:

  1. Add the following project configuration fields to the project schema from the Studio.
    Add Composable Commerce project configuration fieldsjson
    {
  "name": "commercetools Composable Commerce extension",
  "fields": [
    {
      "label": "Project Key",
      "field": "EXTENSION_COMMERCETOOLS_PROJECT_KEY",
      "type": "string",
      "translatable": false,
      "required": true
    },
    {
      "label": "Client ID",
      "field": "EXTENSION_COMMERCETOOLS_CLIENT_ID",
      "type": "encrypted",
      "translatable": false,
      "required": true
    },
    {
      "label": "Client Secret",
      "field": "EXTENSION_COMMERCETOOLS_CLIENT_SECRET",
      "type": "encrypted",
      "translatable": false,
      "required": true
    },
    {
      "label": "Locale overwrite",
      "field": "EXTENSION_COMMERCETOOLS_LOCALE_OVERWRITE",
      "type": "string",
      "translatable": false,
      "required": false
    },
    {
      "label": "Authentication URL",
      "field": "EXTENSION_COMMERCETOOLS_AUTH_URL",
      "type": "string",
      "translatable": false,
      "required": false,
      "default": "https://auth.sphere.io"
    },
    {
      "label": "API URL",
      "field": "EXTENSION_COMMERCETOOLS_HOST_URL",
      "type": "string",
      "translatable": false,
      "required": false,
      "default": "https://api.sphere.io"
    },
    {
      "label": "Product ID field",
      "field": "EXTENSION_COMMERCETOOLS_PRODUCT_ID_FIELD",
      "type": "string",
      "translatable": false,
      "required": false,
      "default": "id"
    },
    {
      "label": "Category ID field",
      "field": "EXTENSION_COMMERCETOOLS_CATEGORY_ID_FIELD",
      "type": "string",
      "translatable": false,
      "required": false,
      "default": "id"
    }
  ]
}
  2. Set the Composable Commerce configuration values from the Studio.
    You can set different values for each environment.

Add data source schemas to the Studio

In your commercetools Frontend project, at the /packages/<project>/backend/schemas/dataSource path, you can find the following data source schemas:
  • The frontastic-product-list.json product list schema
  • The frontastic-product.json single product schema

To add the data source schemas to the Studio, follow these steps:

  1. From the Studio home page or from the left navigation menu, go to Developer > Data sources.
  2. Click Upload schema.

  3. Search and select the JSON file to upload: the schema editor opens.

  4. Click Publish to add the schema.
You can now use the Composable Commerce extension to fetch data to be displayed in the Frontend components.

Edit the Composable Commerce extension

You can edit the Composable Commerce extension to adapt it to your needs.

We recommend adding code to extend the extension's functionality rather than deleting or replacing anything. This way, when extension updates are released, they will be easier to apply.

To update your code, clone the Composable Commerce extension GitHub repository.