Tutorial: full steps to create a Frontastic component

In this tutorial, we'll show you how to create a Tastic from start to finish. Let's go!

πŸ“˜

We assume that you know how to write a Tastic schema.json and a tastic.jsx

For this example:

  • Our project name = Shop
  • Our customer name = Frontastic
  • Frontastic component being created = Promo Box
  1. Open a shell and write the schema for your Frontastic component
{
    "tasticType": "frontastic-shop/content/tile",
    "name": "Tile",
    "category": "Content",
    "icon": "menu",
    "schema": [
         {
            "name": "Image",
            "helpText": "Customize your image",
            "fields": [
                {
                    "label": "Image",
                    "field": "image",
                    "translatable": false,
                    "type": "media",
                    "required": true
                }
            ]
        },
        {
            "name": "Message",
            "helpText": "Customize your tile message",
            "fields": [
                {
                    "label": "Topic",
                    "field": "topic",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                }
            ]
        },
        {
            "name": "Message placement",
            "helpText": "Choose the placement of the Frontastic component",
            "fields": [
                {
                    "label": "Vertical position",
                    "field": "verticalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": false,
                    "default": "bottom",
                    "values": [
                        {
                            "value": "top",
                            "name": "Top"
                        },
                        {
                            "value": "middle",
                            "name": "Middle"
                        },
                        {
                            "value": "bottom",
                            "name": "Bottom"
                        }
                    ]
                },
                {
                    "label": "Horizontal position",
                    "field": "horizontalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": false,
                    "default": "left",
                    "values": [
                        {
                            "value": "left",
                            "name": "Left"
                        },
                        {
                            "value": "center",
                            "name": "Center"
                        },
                        {
                            "value": "right",
                            "name": "Right"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Call to action",
            "helpText": "Customize your call to action",
            "fields": [
                {
                    "label": "Button label",
                    "field": "buttonLabel",
                    "translatable": true,
                    "type": "string",
                    "required": false,
                    "default": ""
                },
                {
                    "label": "Link",
                    "field": "reference",
                    "translatable": false,
                    "required": false,
                    "type": "reference",
                    "default": null
                },
                {
                    "label": "Whole tile clickable",
                    "field": "isClickable",
                    "type": "boolean",
                    "default": false
                }
            ]
        }
    ]
}
  1. Save your Frontastic component file to your project folders in GitHub, in our case, it will be: frontastic_shop/src/js/tastic/content/tile/schema.json

  2. Write the React version of your Frontastic component:

import React, { FunctionComponent } from 'react'
import { connect } from 'react-redux'

import { Tastic } from '@frontastic/catwalk/src/js/types/frontend'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Tile from '../../../patterns/molecules/Tile'

export interface TileTasticData {
     image?: any;
     topic: string;
     title: string;
     verticalPosition: string;
     horizontalPosition: string;
     buttonLabel: string;
     reference: any;
     isClickable: boolean;
}

export interface Props {
    tastic: Tastic,
    data: TileTasticData,
}

export const TileTastic: FunctionComponent<Props> = ({ data, tastic }: Props) => {
    return (
        <Tile
            image={data.image}
            topic={data.topic}
            title={data.title}
            verticalPosition={data.verticalPosition}
            horizontalPosition={data.horizontalPosition}
            buttonLabel={data.buttonLabel}
            reference={data.reference}
            isClickable={data.isClickable}
        />
    )
}

export default tastify({ translate: true })(TileTastic)
  1. Save it to your project folder: frontastic_shop/src/js/tastic/content/tile/tastic.jsx

  2. Add it to your tastics.js file which is found in your project: frontastic_shop/src/js/tastic/tastic.js

import TileTastic from './content/tile/tastic'
export default (() => {
    return {
        'frontastic/shop/content/tile': TileTastic,
    }
})()
  1. Open your Frontastic studio and select the Development environment
  1. Go to the Components section and upload your Frontastic component (click add icon and select your file)
  1. Switch to the Site builder area, then click New on the top left of your screen, then Create page folder
  1. Fill in the required page folder settings (highlighted below), the Tile component doesn't require any other fields at this stage so we'll now click Save
  1. Select New on the top left of your screen again, but this time select Create page version, then input a Page name, select a Layout, and click Save
  1. Click the blue add icon on any of the sections (for example Main), select a Layout element
  1. Search the components panel on the left of your screen then drag and drop it into the layout element
  1. Check all the settings panel fields match what you've written in the schema then click Save on the top right of your screen
  1. Click the more icon (three vertical dots) on the right of the draft page name, then click Make default
  1. Check your Frontastic component works correctly in your local machine by using the URL path you specified on your page folder, for example, http://frontastic.frontastic.io.local/Developers/Catherine

  2. Go back to the Components area in the Frontastic studio and set your Frontastic component to be available in the Staging and Production environments (click on your Frontastic component, click the 2 cloud icons, and click Save)

  1. Change your environment to Staging and then to Production to check the Frontastic component is there then let your team know that the component is there to use
  1. Add the Frontastic component to a page in the Staging or Production environments and edit the settings
  1. Preview the changes to make sure it all works as expected

And that's how you make 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. from start to finish!


Did this page help you?