Full Steps to Create a Tastic

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

For this example:

  • Project Name = Shop
  • Customer Name = Frontastic
  • Tastic Being Created = Promo Box
1
Open a shell and write the Schema for your Tastic
{
    "tasticType": "frontastic-shop/promobox",
    "name": "Promo Box",
    "icon": "menu",
    "category": "Catwalk Promo Box",
    "schema": [
        {
            "name": "Positions",
            "fields": [
                {
                    "label": "Vertical Position",
                    "field": "verticalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": true,
                    "values": [
                        {
                            "value": "top",
                            "name": "Top"
                        },
                        {
                            "value": "middle",
                            "name": "Middle"
                        },
                        {
                            "value": "bottom",
                            "name": "Bottom"
                        }
                    ]
                },
                {
                    "label": "Horisontal Position",
                    "field": "horizontalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": true,
                    "values": [
                        {
                            "value": "left",
                            "name": "Left"
                        },
                        {
                            "value": "center",
                            "name": "Center"
                        },
                        {
                            "value": "right",
                            "name": "Right"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Image",
            "fields": [
                {
                    "label": "Topic",
                    "field": "topic",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Image",
                    "field": "image",
                    "translatable": false,
                    "type": "media",
                    "required": false,
                    "options": {
                        "ratio": "16:9"
                    }
                }
            ]
        },
        {
            "name": "Button",
            "fields": [
                {
                    "label": "Text",
                    "field": "buttonText",
                    "translatable": true,
                    "type": "string",
                    "required": true,
                    "default": "Shop now"
                },
                {
                    "label": "Link",
                    "field": "buttonLink",
                    "translatable": false,
                    "required": false,
                    "type": "reference",
                    "default": null
                }
            ]
        }
    ]
}
2
Save your Tastic file to your Catwalk folders in your Project, in our case it will be: frontastic_shop/src/js/tastic/promobox/tastic.json

3
Write the React version of your Tastic:
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Translatable from '@frontastic/catwalk/src/js/component/translatable'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'

import PromoboxWithPositioning from '../../../patterns/molecules/promobox/promobox-with-positioning'
import Button from '../../../patterns/atoms/buttons/button'

class PromoBoxTastic extends Component {
    render () {
        // eslint-disable-next-line no-unused-vars
        const { verticalPosition, horizontalPosition, buttonLink, buttonText, image, title, topic } = this.props.data

        return (
            <PromoboxWithPositioning
                vertical={verticalPosition}
                horizontal={horizontalPosition}
                image={image}
                customChildrenStyle={{ margin: '32px' }}
                >
                <p className='c-topic'>
                    <Translatable value={topic} />
                </p>
                <h1 className='c-title'>
                    <Translatable value={title} />
                </h1>

                {/* // TODO Implement reference properly */}
                <Button
                    // component='a'
                    // href={buttonLink.target}
                    type='primary'
                >
                    <Translatable value={buttonText} />
                </Button>
            </PromoboxWithPositioning>
        )
    }
}

PromoBoxTastic.propTypes = {
    data: PropTypes.object.isRequired,
}

PromoBoxTastic.defaultProps = {}

export default tastify()(PromoBoxTastic)
4
Save it to your Project folder: frontastic_shop/src/js/tastic/promobox/tastic.jsx

5
Add it to your Tastics JS which is found in your Project:   frontastic_shop/src/js/tastic/tastic.js
import PromoBoxTastic from './content/promo-box/tastic.jsx'
export default (() => {
    return {
        'frontastic/boost/promobox': PromoBoxTastic,
    }
})()
6
Open your Backstage and go to the Developer App in the Development Environment
Tastic Developer Homescreen
7
Go to the Tastics section and upload your Tastic (click add icon and select your file)
Tastic Section Add Screen
8

Switch to the Stage app, then click New on the top left of your screen, then Create Node

Tastic Stage New Screen
9
Fill in the required Node settings (highlighted below), the Promo Box Tastic doesn't require any other fields at this stage so we'll now click Save
Tastic New Node Create Screen
10
Select New on the top left of your screen again, but this time select Create Page, then input a Page Name, select a Layout and click Save
Tastic New Page Create Screen
11
Click the blue Add icon on any of the Regions (e.g. Main), select a Cell layout
Tastic Cell Layout Screen
12
Search the Tastics panel on the left of your screen then drag and drop it into the Cell
Tastic Drag and Drop GIF
13
Check that the Configuration Panel fields match what you've written in the Schema then click Save on the top right of your screen
Tastic Configuration Panel GIF
14
Change the state of your Page from the Draft (click the More button (three vertical dots) on the right of the Page name, then click Make Default)
Tastic Make Default Screen
15
Check your Tastic works correctly in your VM by using the URL path you specified on your Node e.g. http://frontastic.frontastic.io.local/Developers/Catherine

16
Go back to the Tastic section in the Developer App in Backstage and set your Tastic to be available in the Staging and Production environments (click on your Tastic, click the two cloud icons and click save)
Tastic Developer Environment Publish GIF
17
Go to the Tastic section in the Developer App in both the Staging and Production environments to check the Tastic is there then let your Frontend Manager know that the Tastic is there to use
Tastic Showing Different Environments GIF
18
Add the Tastic to a Page in the Staging or Production environments and edit the Configuration settings
Tastic Production Addition GIF
19
Preview the changes to make sure it all works as expected
Tastic Preview GIF

And that's how you make a Tastic from start to finish!


‹Back

Tips

Still need help? Contact Us Contact Us