Component library overview
commercetools Frontend comes with a component library for the most common commerce use cases, like product listings, details pages, cart, and checkout.
This article will show you how to use the library or single components from it.
The articles in the section are dedicated to an individual Frontend component in the library. Each includes:
- The name of the Frontend component
- Which page types you can use the component on
- An example image of what the component looks like
- The configuration settings provided by the component
If this is your first time creating a Frontend component, see Creating a Frontend component before continuing.
Prerequisites
- Access to your company's GitHub customer repository
- Access to your company's project in the studio
Using component library
You'll find the component library in your GitHub customer repository under /packages/<project>/frontend/frontastic/tastics.
This example is based on a single project where no code is shared between projects. If you want to share these Frontend components between projects, /packages/_shared/frontend/… instead.
The only thing you need to do to get the component library working in your project is to take the schema.json files for each component and add them to the studio. To do this, open the studio, click Components, click the blue add icon and select all the schema.json files for the Frontend components you want to use.
If you want to use any of the Frontend components with a data source, you'll need to make sure that you've uploaded a data source schema as well as the code in your repository (see the developing a data source extension article for how to do this). Fitting data sources for all Frontend components in the library are shipped with the extension library.
Then, you can add them to any page version within the studio and edit the configuration as you need to.
Styling
We're using Tailwind for styling. You'll find the main config under packages/<project>/frontend/tailwind.config.js. Here, you can edit the colors for your main settings.
If you want to do any other changes to the styling, you'll need to edit the corresponding component code directly.
For more information about styling your site, see the styling your site article.
Editing the component library
You can use this code as a base to start working with. You can make it your own code, strip it down to the minimum you need to have, and change it to the way you like.
If you've already uploaded the schema.json files from the library, you'll need to keep these backward compatible. See the updating a Frontend component schema article for more information.
You can update your code by cloning the components library GitHub repository.