Creating a configurable Frontastic component

Quick start guide to working with Frontastic components.

👍

Prerequisites

  • 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
  • Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. access
  • Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. running
  • You've read the creating a Frontastic component article

In 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. schema, you can provide a schema that makes 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`. render a configuration interface for 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. whenever it's used on a page. The resulting configuration is delivered to the mounted React component 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. as the prop data.

Schema sections and fields

The schema array 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. schema allows you to group configuration fields into logical (and 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`. visual) sections. Each section can contain any number of configuration fields:

{
  "tasticType": "example/hello-world",
  "name": "Hello World",
  "category": "Example",
  "description": "A very basic Frontastic component example",
  "schema": [
    {
      "name": "Content configuration",
      "fields": [
        {
          "label": "Greeting recipient",
          "field": "recipient",
          "type": "string",
          "default": "world"
        }
      ]
    }
  ]
}

In this example, the schema of the HelloWorldTastic received a section Content configuration which contains exactly 1 configuration field: recipient. The field is of type string and labeled with the text Greeting recipient. If there's no value provided for the field 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`., the string world is submitted to 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. as the default for recipient.

Uploading this schema 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`. and editing it on a page results in the following settings form:

🚧

When you upload this version 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. schema, 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`. will ask you if you want to override the previous tutorial version. In this case, you can do this safely because the schema is backward compatible as we're providing a default for the newly added field. See the schema best practices article for more information.

As can be seen, a field of type string is translatable by default. So, if your project is configured to support multiple locales, translation facilities are automatically included in the configuration.

Find out more about schemas and a complete list of field types and their possibilities in Frontastic schemas.

Frontastic component input in code

In the React entry point of 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., Frontastic automatically provides you with the prop data which contains the entire configuration from 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`..

import React from 'react';

type HelloWorldTasticProps = {
  data: {
    recipient: string;
  };
};

const HelloWorldTastic: React.FC<HelloWorldTasticProps> = ({ data }) => {
  return <h1>Hello {data.recipient}</h1>;
};

export default HelloWorldTastic;

The updated index.tsx defines a type for the data prop derived from 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. schema. In the code, the provided data can then directly be accessed. As you can see, Frontastic automatically selects the correct localized version of the translatable configuration for you.

❗️

It's important to note that the structuring in sections in the schema field in 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. schema is only for visualization purposes. The field identifiers in different sections are all global. That means you can freely regroup fields into sections, but also that field identifiers must be unique across all sections!


Did this page help you?