Using the commercetools extension

Frontastic comes with a ready-to-use commercetools extension. This article will show you how to use it and adapt it to your needs.

👍

Prerequisites

  • 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)

Steps to use

You'll find the commercetools extension in your GitHub customer repository under /packages/<project>/backend/commercetools.

There are 2 things you need to do to make it work for your project:

  1. Add your commercetools credentials to your project.yml
  2. 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 <customer>-<project>/<project>/config.

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 /packages/<project>/backend/schemas/dataSource.

One is a product list (frontastic-product-list.json), and the other is for a single product (frontastic-product.json).

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.

Editing the commercetools extension

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.

You can check information about the latest releases on the commercetools extension changelog and update your code by cloning the commercetools extension GitHub repository.


Did this page help you?