Creating a Frontastic component in the Frontastic studio

Because 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. don't exist on their own you need to prepare a page 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`. which contains 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. you've just created in your project. You only need to do this once for every new 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., because the actual code for 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. exists on your local machine and is re-compiled when you change something.

However, creating pages to test 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. in different combinations and layouts is also a good idea.

Once you've created a Frontastic component you need to upload the spec file to 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 let it know that 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. exists.

Uploading the schema

  1. Select the Development environment from the dropdown, go to the Component area, then the add icon, and select your Frontastic component schema file

🚧

If you're only using the Frontastic CLI, you'll need to select the Staging environment.

πŸ“˜

Within the Components area, you'll see all the Frontastic components that have been uploaded to all environments.

Once uploaded, you'll need to check it works on a page so you'll need to create a page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code..

  1. Switch to Site builder, click New, then select Create page folder

As you're working in the Development environment, the page folderspage folders - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. you create won't affect Production.

  1. Input in the required page folder settings
    To keep structure to the folders we recommend creating a top-level page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. Developer where each developer can have their own page folder-level (usually their name). This helps to avoid disturbances between different developers:

Remember the path to your page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code.. You'll need this path to view the page created later on your local machine. For example: /developers/Catherine.

  1. Expand the Data source section, click Add stream, then select the data source type from the dropdown (if the Frontastic component you're testing is using a data source)

For example, the Product List Tastic that was shown in the Frontastic component article requires a data source type of product-list so you'll need to select Product API Search.

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. are created on the page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. level because their data can be shared between multiple 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. on the same page in that page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code..

  1. Give your data source filter a name and add any of the filters you'd like to, then click the back arrow

The Filter Preview on the right of your screen gives you an idea of which products will be returned in that data source.

  1. Save the page folder configuration

You'll then need to create a page versionpage version - A page can have multiple versions and in different states within a page folder, such as draft, scheduled, live, and so on. within your page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. that'll contain 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..

Create a page version

  1. Select your new page folder, then click New, select Create page version, input a page name, and click Save
  1. Click the blue add icon on any of the section (for example, MAIN), then select a layout element
  1. Search for the name of the Frontastic component you've just created and drag it into your cell, then select the data source you created in the settings panel, then click Save

🚧

You can't preview 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. 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`., yet. The code for 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. only exists on your local machine so far, so the preview environments can't render it yet.

  1. Click the more icon on your page version, then click Make Default

For more on using the site buildersite builder - An interface that you work with to build your commerce site. Previously known as `stage`. and page builderpage builder - An interface you work with to build your pages., see the using the site builder section for more information.

Viewing the Frontastic component

You can now view 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. on your local machine. Use the URL path you specified at your page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. against the local machine, for example, http://frontastic.io.local/Developers/Catherine.

Whenever you change the code 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., the development stack will automatically re-compile the code and show you the result instantly.

Once you're happy with 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., you can make it available in all environments by clicking the environment icons:

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. only exists once 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`., so once you’ve changed it to Production and you want to make any changes to the schema, it will take immediate effect on Production even if you’re only changing it in the Development environment.

In the next article, we'll go through 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 itself in more detail but for tips on how to update your schema to an existing see the updating a Frontastic component schema article as well as the renaming a Frontastic component field article.

πŸ“˜

You don't need to go through the steps shown in this tutorial for every change to 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.. You only need to re-upload the spec whenever it changes.


Did this page help you?