Frontastic component library

Frontastic comes with a component librarycomponent library - Frontastic components that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling. 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 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. in the library. Each includes:

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

👍

Prerequisites

  • Access to your company's 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.
  • 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`.

Steps to use

You'll find the component library 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. 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 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. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.. To do this, open 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 Components, click the blue add icon and select all the schema.json files for the 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. you want to use.

If you want to use any of the 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. with 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., 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 sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site. for all 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. in the library are shipped with the Frontastic extension libraryFrontastic extension library - Extensions that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling..

Then, you can add them to any page version 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`. 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 backwards compatible. See the updating a Frontastic component schema article for more information.


Did this page help you?