Frontastic component library

Frontastic 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 Frontastic component in the library. Each includes:

  • The name of the Frontastic 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 you haven't created a Frontastic component before, see the creating a Frontastic component article before continuing.

👍

Prerequisites

  • Access to your company's GitHub customer repository
  • Access to your company's project in the Frontastic studio

Steps to use

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 Frontastic 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 Frontastic studio. To do this, open the Frontastic studio, click Components, click the blue add icon and select all the schema.json files for the Frontastic components you want to use.

If you want to use any of the Frontastic 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 Frontastic components in the library are shipped with the Frontastic extension library.

Then, you can add them to any page version within the Frontastic 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 Frontastic component schema article for more information.

You can check information about the latest releases on the Components library changelog and update your code by cloning the components library GitHub repository.


Did this page help you?