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 theproject.yml
file. - Copy the following sample code and paste it in the
configuration
section of theproject.yml
file. - Replace comments with your commercetools Composable Commerce credentials.
Edit only the configuration
section. Otherwise, you will lose your commercetools Frontend project setup.
commercetools:clientId: # your unique client ID for commercetools Composable CommerceclientSecret: # your unique client secret for commercetools Composable CommerceprojectKey: # your unique project key for commercetools Composable CommerceauthUrl: # the authorization URL for commercetools Composable CommercehostUrl: # the host of the HTTP API service for commercetools Composable Commerceproduct: # duplicate this section for account, cart, search, wishlistengine: 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.