Integrations

When your project is first set up in our system, we configure your credentials for your API provider in your project.yml and commit it to your repository. This means that our API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. instance knows which API to connect with and how it should deal with that API. It also means you're ready to start using your integration with data sources, which need to be configured and will automatically run against your API provider.

API provider integrations

The existing integrationsintegrations - Pre-built data connectors from API providers to Frontastic, for example, commercetools, Adyen, and Contentful. we have with API providers are:

Fully supported:

Other integrations which can be used as a starter:

Click on the integration name to find out which fields we map and those we don't. If we haven't mapped a particular field that you need, you can use this article to help you add it yourself.

You can find out what else we map using our API documentation on GitHub. These libraries get updated regularly so you'll need to keep them up-to-date. See the API documentation article to find out how to install them.

Frontastic doesn't store any data coming from an API, so all the data comes from your CMS or PIM system. We provide the platform to assemble, rearrange, visualize, and make it actionable for your customers.

If you want to make any changes to any products or content that comes from your API provider, you can do this at any time in your CMS and the data will be updated in the API which Frontastic will then display.

Working with data sources

A data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. is the information that's provided to you from Frontastic. For data from an API to be shown on a page, a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. needs to be created which consumes this data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. and has it defined. The Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. will then receive the data from the necessary data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site..

What's a Frontastic component?

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. are used to create the frontend layout. A Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. can be very simple (like a headline) or rather complex.

A Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. is made up of 2 parts: a React component that's the element on the page (a JSX file) and a schema (a JSON file) that creates a configuration within 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`.. It's in these 2 files where you need to define what your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. will do, including how it will work with data sourcesdata sources - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site..

To see how to bring a data source into a Frontastic component, see this article. But be sure to read all about Frontastic components in this article and how to create a Frontastic component in this article.


Read next
Did this page help you?