Frontastic comes with a ready-to-use commercetools extension. This article will show you how to use it and adapt it to your needs.
- Access to your company's GitHub customer repository
- Access to your company's project in the Frontastic studio
- commercetools project and credentials (see the commercetools documentation)
You'll find the commercetools extension in your GitHub customer repository under
There are 2 things you need to do to make it work for your project:
- Add your commercetools credentials to your
- Add the schemas to the Frontastic studio
Let's go through how to do them separately.
To add your commercetools credentials, open your
project.yml in your Project folder. You'll find it under
Under configuration, add the below and input your credentials in place of the comments:
configuration: commercetools: clientId: # this is your unique client id for commercetools clientSecret: # this is your unique client secret for commercetools projectKey: # this is your unique project key for commercetools authUrl: # this is the authorization URL for commercetools hostUrl: # the host of the HTTP API service for commercetools product: # you'll need to duplicate this section for account, cart, search, wishlist engine: commercetools
Don't edit anything else!
You'll break your API hub setup if you edit any other section in this file.
Next, you'll need to add the schemas to your Frontastic studio. You'll find 2 in
One is a product list (
frontastic-product-list.json), and the other is for a single product (
You'll need to take these 2
json files and add them to the data source section of the Frontastic studio (click Developer on the dashboard, then Data sources). See the using data sources in the Frontastic studio article for more information.
You'll now be able to use the commercetools extension the get the data into your Frontastic components. See the creating Frontastic component with a data source article for how to do this.
Once the commercetools extension is in your project, it's up to you to maintain it and adapt it to your needs.
You can change anything you want to in this extension.
However, we suggest extending functionality rather than replacing functionality. If there are any issues with what was initially provided, we'll release an update, but if you've replaced the functionality, it'll make this harder to do.
Updated about 2 months ago