Creating a header

Every site needs a header, and it's something that's used across most of your pages.

There are 2 ways to create a header:

  • Create a single footer Frontastic component
  • Create a component group that includes multiple Frontastic components

Both are reusable across all pages so you only have to set them up once, but by creating a component group, it's easier to edit and update what's in the header, especially for business users.

Single component

The header we've created as a starter component has the below schema.json and tastic.jsx:

{
    "tasticType": "frontastic/header",
    "name": "Header",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "Menu",
            "fields": [
                {
                    "type": "description",
                    "text": "Choose a few top categories to be displayed on top of the navigation. Selecting a top category will allow the consumer to navigate to its tree."
                },
                {
                    "label": "Top categories",
                    "field": "topCategories",
                    "type": "group",
                    "itemLabelField": "name",
                    "fields": [
                        {
                            "label": "Name",
                            "field": "name",
                            "translatable": false,
                            "required": true,
                            "type": "string"
                        },
                        {
                            "label": "Navigation tree",
                            "field": "tree",
                            "type": "tree"
                        },
                        {
                            "label": "Link",
                            "field": "reference",
                            "required": true,
                            "type": "reference"
                        },
                        {
                            "label": "Mobile nav background",
                            "field": "mobileNavBackgroundImage",
                            "type": "media"
                        },
                        {
                            "type": "description",
                            "text": "Ratio-setting won't currently be used."
                        }
                    ]
                }
            ]
        },
        {
            "name": "Logo",
            "fields": [
                {
                    "type": "description",
                    "text": "Select a logo to overwrite the default 'Catwalk'."
                },
                {
                    "label": "Logo",
                    "field": "logo",
                    "type": "media",
                    "required": false
                }
            ]
        },
        {
            "name": "Help and information links",
            "fields": [
                {
                    "label": "Header",
                    "field": "infoHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "infoHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Contact info",
            "fields": [
                {
                    "label": "Header",
                    "field": "contactHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "contactHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        },
        {
            "name": "About links",
            "fields": [
                {
                    "label": "About header",
                    "field": "aboutHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "aboutHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        }
    ]
}
import React from 'react'
import PropTypes from 'prop-types'

import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import app from '@frontastic/catwalk/src/js/app/app'

import MainMenu from '../../../patterns/organisms/MainMenu'

const MainMenuTastic = ({ data }) => {
    return (
        <MainMenu
            topCategories={data.topCategories}
            logo={data.logo}
            goToCartPage={() => {
                app.getRouter().push('Frontastic.Frontend.Master.Checkout.cart')
            }}
            goToWishlistPage={() => {
                app.getRouter().push('Frontastic.Frontend.Master.Account.wishlists', { wishlist: null })
            }}
            goToProfilePage={() => {
                app.getRouter().push('Frontastic.Frontend.Master.Account.profile')
            }}
        />
    )
}

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

export default tastify({ translate: true })(MainMenuTastic)

Most sections are configurable by business users but if we wanted to add a new section or remove one, it would have to be done from the schema first.

Component group header

If we wanted to create the exact same header but within a component group, we can break it up into the below Frontastic components:

Header menu:

{
    "tasticType": "frontastic/header",
    "name": "Header menu",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "Menu",
            "fields": [
                {
                    "type": "description",
                    "text": "Choose a few top categories to be displayed on top of the navigation. Selecting a top category will allow the consumer to navigate to its tree."
                },
                {
                    "label": "Top categories",
                    "field": "topCategories",
                    "type": "group",
                    "itemLabelField": "name",
                    "fields": [
                        {
                            "label": "Name",
                            "field": "name",
                            "translatable": false,
                            "required": true,
                            "type": "string"
                        },
                        {
                            "label": "Navigation tree",
                            "field": "tree",
                            "type": "tree"
                        },
                        {
                            "label": "Link",
                            "field": "reference",
                            "required": true,
                            "type": "reference"
                        },
                        {
                            "label": "Mobile nav background",
                            "field": "mobileNavBackgroundImage",
                            "type": "media"
                        },
                        {
                            "type": "description",
                            "text": "Ratio-setting won't currently be used."
                        }
                    ]
                }
            ]
        }
    ]
}

Logo:

{
    "tasticType": "frontastic/header",
    "name": "Header logo",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "Logo",
            "fields": [
                {
                    "type": "description",
                    "text": "Select a logo to overwrite the default 'Catwalk'."
                },
                {
                    "label": "Logo",
                    "field": "logo",
                    "type": "media",
                    "required": false
                }
            ]
        }
    ]
}

Help info:

{
    "tasticType": "frontastic/header",
    "name": "Header help info",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "Help and information links",
            "fields": [
                {
                    "label": "Header",
                    "field": "infoHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "infoHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        }
    ]
}

Contact info:

{
    "tasticType": "frontastic/header",
    "name": "Header contact info",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "Contact info",
            "fields": [
                {
                    "label": "Header",
                    "field": "contactHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "contactHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        }
    ]
}

About links:

{
    "tasticType": "frontastic/header",
    "name": "Header about",
    "icon": "menu",
    "category": "Header",
    "schema": [
        {
            "name": "About links",
            "fields": [
                {
                    "label": "About header",
                    "field": "aboutHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "aboutHeaderIcon",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        }
    ]
}

Once we've added these components to the Frontastic studio (and tested them), we can go to Templates and then create a new component group that has them in the layout we want. See the creating a component group article for more information.