commercetools Composable Commerce extension

commercetools Frontend comes with the ready-to-use commercetools Composable Commerce extension. With the extension, you can fetch data from commercetools Composable Commerce and display it in your Frontend components.

Prerequisites

Access to your commercetools Frontend project GitHub repository
Access to your commercetools Frontend project from the studio
Setting up your commercetools Composable Commerce project and creating your API client. For more information on the API client, see Authorization and Scopes.

Use the commercetools Composable Commerce extension

You can find the commercetools Composable Commerce extension in your commercetools Frontend project at the following path: /packages/<project>/backend/commerce-commercetools.

To use the commercetools Composable Commerce extension you must:

Add your commercetools Composable Commerce credentials to the project.yml file in your commercetools Frontend project.
Add data source schemas to the studio.

Add commercetools Composable Commerce credentials

To add your commercetools Composable Commerce credentials to your commercetools Frontend project, follow these steps:

Go to <customer>-<project>/<project>/config and open the project.yml file.
Copy the following sample code and paste it in the configuration section of the project.yml file.
Replace comments with your commercetools Composable Commerce credentials.

Edit only the configuration section. Otherwise, you will lose your commercetools Frontend project setup.

Set Composable Commerce credentials in the configuration section of project.ymlyaml

commercetools:
clientId: # your unique client ID for commercetools Composable Commerce
clientSecret: # your unique client secret for commercetools Composable Commerce
projectKey: # your unique project key for commercetools Composable Commerce
authUrl: # the authorization URL for commercetools Composable Commerce
hostUrl: # the host of the HTTP API service for commercetools Composable Commerce
product: # duplicate this section for account, cart, search, wishlist
engine: commercetools

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:

From the studio home page or from the left navigation menu, go to Developer > Data sources.
Click Upload schema.
Search and select the JSON file to upload: the schema editor opens.
Click Publish to add the schema.

You can now use the commercetools Composable Commerce extension to fetch data to be displayed in the Frontend components.

Edit the commercetools Composable Commerce extension

You can edit the commercetools 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. That way, when extension updates are released, they will be easier to apply.

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