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 repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your customer repository.
  • Access to your company's project in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.
  • commercetools project and credentials (see the commercetools documentation)

Steps to use

You'll find the commercetools extension in your GitHub customer repositoryGitHub customer repository - Where your code lives in GitHub for all your projects, you can have many project folders within your 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.

Let's go through how to do them separately.

To add your commercetools credentials, open your project.yml in your GitHub project repositoryGitHub project repository - Where your code lives in GitHub for your company's projects. You can have 1 project folder within it, or you can have many project folders.. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (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 componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. 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.


Did this page help you?