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.
Updated over 1 year ago