commercetools commerce APIs extension

Frontend Add-On
Ask about this Page
Copy for LLM
View as Markdown
commercetools Frontend comes with out-of-the-box extensions for commercetools commerce APIs for B2C and B2B. With the extensions, you can fetch data from commercetools commerce APIs 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 commerce Project

Use the extension

You can find the 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. Copy the commerce-commercetools code from the following repositories to your project:
  2. Register the extension in your project.

To use the extension you must:

  1. Create an API client.
  2. Configure your 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 extension

To configure your extension, follow these steps:

  1. Add the following project configuration fields to the project schema from the Studio.
    Add commerce Project configuration fieldsjson
    {
  "name": "commercetools 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 commerce Project 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 extension to fetch data to be displayed in the Frontend components.

Edit the extension

You can edit the 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 extension GitHub repository.