Tutorial: playing with Frontastic components

In this tutorial, we're going to take you through how to create a very basic 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. and iterate on it to give it more functionality each time.

We'll be building 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. from scratch, but we won't go into a lot of technical details here. It's just to give you a quick idea of what's possible. This article gives you full explanation of how Frontastic components work.

πŸ“˜

We'll be putting some styling into 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. itself. When building your real 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., this styling shouldn't be within 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. itself but within a UI component or a CSS file.

  1. Get your Frontastic CLIFrontastic CLI - Our Commandline Interface (CLI) that you can use for frontend development. up and running (see this article for how to do that

  2. Open your IDE and go to your-project-name/src/js/tastic, then create a folder with the name 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., in this example, we'll use awesome-tastic for our 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., and our project name is Frontastic

mkdir frontastic/src/js/tastic/awesome-tastic
  1. Create 2 new files within this folder, 1 called schema.json and the other called tastic.jsx
touch frontastic/src/js/tastic/awesome-tastic/schema.json src/js/tastic/awesome-tastic.js
  1. Copy the below code into your schema.json then save it:
{
    "tasticType": "frontastic/content/awesome-tastic",
    "name": "Awesome Tastic",
    "category": "content",
    "icon": "image",
    "schema": []
}
  1. Copy the below code into your tastic.jsx then save it:
import React from 'react'

function AwesomeTastic(){
    return <p>Hello, World</p>
}

export default AwesomeTastic
  1. Open your tastics.js file (your-project-name/src/js/tastic/tastics.js) and add the below to the different sections

Add this to the import section:

import AwesomeTastic from '.content/awesome-tastic/tastic'

And this to the export section:

'frontastic/content/awesome-tastic': AwesomeTastic

We've put a slimmed-down version of the tastics.js below, and we've added those lines in to give you an idea of how it should look:

import asyncComponent from '@frontastic/catwalk/src/js/component/asyncComponent'
import '../injections'

import MarkdownTastic from './content/markdown/tastic'
import ShowcaseTextTastic from './content/showcase-text/tastic'
import NewsletterBlockTastic from './forms/newsletter-block/tastic'
import TileTastic from './content/tile/tastic'
import TileTasticV2 from './content/tile-v2/tastic'
import AwesomeTastic from '.content/awesome-tastic/tastic'

export default (() =&gt; {
    return {
        'frontastic/boost/content/markdown': MarkdownTastic,
        'frontastic/boost/content/showcase-text': ShowcaseTextTastic,
        'frontastic/boost/forms/newsletter-block': NewsletterBlockTastic,
        'frontastic/boost/content/tile': TileTastic,
        'frontastic/boost/content/tile-v2': TileTasticV2,
    'frontastic/content/awesome-tastic': AwesomeTastic
    }
})()

Then save the tastics.js file.

  1. Open your Frontastic studio (your-project-name.frontastic.io) and select the Production environment from the environment dropdown
  1. Click Components, then drag your schema.json file into the window
  1. Click the Site builder icon, click New, select + Create page folder, input a name for your page folder as well as a relevant path (your name is fine to use), then click Save
  1. Select your new page folder name, then click New, select + Create page version, input a name for your page version, and click Save
  1. Add a Header and Footer component groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`. to your page, as well as a full-page layout elementlayout element - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cell`., then find 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 list on the left and drag it into your page, then click Save
  1. Click Preview followed by clicking the link, and you'll now see "Hello, world" on your page along with the header and footer

So now we have a very basic 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 our page. Let's make it editable 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`. itself.

  1. Go back to your schema.json and update the schema section, so it looks like the below:
{
    "tasticType": "frontastic/content/awesome-tastic",
    "name": "Awesome Tastic",
    "category": "content",
    "icon": "image",
    "schema": [
        {
            "name": "Text",
            "fields": [
                {
                    "label": "Text",
                    "field": "text",
                    "type": "string",
                    "translatable": false
                }
            ]
        }
    ]
}
  1. Drag your schema.json into the Component section of 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`.
  1. Go back to your tastic.jsx file and remove "Hello, world" so it looks like the below, and then save it:
import React from 'react'

function AwesomeTastic({data}){
    return <p>{data.text}</p>
}

export default AwesomeTastic
  1. Go back to your Frontastic studio and to the page you created in step 11, then refresh the page and you'll see the new text field, so add some text and check your preview

Pretty cool, right? So now, let's have a little fun with it.

  1. Go to your tastic.jsx file and update it to the below:
import React from 'react'

function AwesomeTastic({data}){
    return 
 <marquee> 
        
  <p>{data.text}</p>
    
 </marquee>
}

export default AwesomeTastic

Now let's add some style. We’re using TailwindCSS in this example.

  1. Go to your tastic.jsx file and update it to the below:
import React from 'react'

function AwesomeTastic({data}){
    return (
    
 <marquee direction="left" className="h-64 bg-black text-white flex items-center"> 
        
  <p>{data.text}</p>
    
 </marquee>
      )
}

export default AwesomeTastic

So now we have a black box with text scrolling across the middle. But what if we want to be able to change the color of the background when we want without coding? Let's add a new field into our schema.json to do just that.

  1. Update your schema.json to be just like the below, then drag it into the Component area again:
{
    "tasticType": "frontastic/content/awesome-tastic",
    "name": "Awesome Tastic",
    "category": "content",
    "icon": "image",
    "schema": [
        {
            "name": "Text",
            "fields": [
                {
                    "label": "Text",
                    "field": "text",
                    "type": "string",
                    "translatable": false
                },
                {
                    "label": "Background color",
                    "field": "bgColor",
                    "type": "string",
                    "translatable": false
                }
            ]
        }
    ]

}

Refresh your page builderpage builder - An interface you work with to build your pages., and you'll be able to see it in your settings panel. So pick a color, we'll go with green:

  1. Update your tastic.jsx to be just like the below and save it:
import React from 'react'

function AwesomeTastic({data}){
    return (
    
 <marquee direction="left" style={{backgroundColor: data.bgcolor}} className="h-64 text-white flex items-center"> 
        
  <div> 
   <p>{data.text}</p> 
  </div>
    
 </marquee>
      )
}

export default AwesomeTastic

Then refresh your preview, and you should see your new green background:

So now you should see the flow here: We update the schema.json, then add it to the Components section 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`., we update our tastic.jsx file, and we make the changes 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. settings on the page and check our preview.

But Frontastic is really about connecting APIs to content, so how do we bring data into our 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.? Let's get to it.

  1. Update your schema.json to the below:
{
    "tasticType": "frontastic/content/awesome-tastic",
    "name": "Awesome Tastic",
    "category": "content",
    "icon": "image",
    "schema": [
        {
            "name": "Text",
            "fields": [
                {
                    "label": "Text",
                    "field": "text",
                    "type": "string",
                    "translatable": false
                },
                {
                    "label": "Background color",
                    "field": "bgColor",
                    "type": "string",
                    "translatable": false
                },
                {
                    "label": "My products",
                    "field": "stream",
                    "type": "stream",
                        "streamType": "product-list",
                    "default": null
                }
            ]
        }
    ]

}

Then add 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`. as usual. This time in the settings, you'll see it has an error as data is missing. So, we need to add the 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..

  1. Click Add data source filter then click Save

While we're in the studio, we're going to change our background color to Frontastic pink. Feel free to make any changes to your configuration here too. You can even use hex numbers for the colors.

  1. Update your tastic.jsx to the below:
import React from 'react'

function AwesomeTastic({data}){
    return (
    
 <marquee direction="right" style={{backgroundColor: data.bgcolor}} className="h-64 text-white flex items-center"> 
        
  <div className='flex flex-row'>
    {data.stream.items.map((item) => (
        <div className='w-32 h-32 mr6 bg-white'>
            <img src={item.variants[0].images[0]}/>
        </div>
    ))}
   <p>{data.text}</p> 
  </div>
    
 </marquee>
      )
}

export default AwesomeTastic

What we've done here is bring in the 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., and using the images attached to the products in the data source filter, we've placed them in the white boxes we've made for them. Super simple!


Did this page help you?