Creating a footer
Every site needs a footer, and it's something that's used across most of your pages.
There are 2 ways to create a footer:
- 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 footer, especially for business users.
Single component
The footer we've created as a starter component has the below schema.json and tastic.jsx:
{
"tasticType": "frontastic/boost/footer",
"name": "Footer",
"icon": "list",
"category": "Footer",
"schema": [
{
"name": "Meta navigation",
"fields": [
{
"label": "Title",
"field": "title",
"type": "string"
},
{
"label": "Links",
"field": "links",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
},
{
"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"
}
]
},
{
"label": "Links",
"field": "infoLinks",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
},
{
"name": "Contact info",
"fields": [
{
"label": "Header",
"field": "contactHeader",
"type": "string"
},
{
"label": "Phone number",
"field": "phoneNumber",
"type": "string"
},
{
"label": "Phone number subline",
"field": "phoneNumberSubline",
"type": "string"
},
{
"label": "Email",
"field": "email",
"type": "string"
},
{
"label": "Email overline",
"field": "emailOverline",
"type": "string"
}
]
},
{
"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"
}
]
},
{
"label": "Links",
"field": "aboutLinks",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
},
{
"name": "Payment methods",
"fields": [
{
"label": "Payment methods",
"field": "paymentMethods",
"type": "group",
"itemLabelField": "icon",
"fields": [
{
"label": "Icon",
"field": "playmentIcon",
"type": "enum",
"values": [
{
"name": "PayPal",
"value": "paypal"
},
{
"name": "Visa",
"value": "visa"
},
{
"name": "Mastercard",
"value": "mastercard"
}
]
}
]
}
]
}
]
}
import React from 'react'
import PropTypes from 'prop-types'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Footer from '../../patterns/molecules/Footer'
function MetaNavTastic ({
data: {
title,
links,
infoHeader,
infoHeaderIcon,
infoLinks,
aboutHeader,
aboutHeaderIcon,
aboutLinks,
contactHeader,
phoneNumber,
phoneNumberSubline,
email,
emailOverline,
paymentMethods,
paymentHeader,
},
}) {
return (
<Footer
title={title}
links={links}
infoHeader={infoHeader}
infoHeaderIcon={infoHeaderIcon}
infoLinks={infoLinks}
aboutHeader={aboutHeader}
aboutHeaderIcon={aboutHeaderIcon}
aboutLinks={aboutLinks}
contactHeader={contactHeader}
phoneNumber={phoneNumber}
phoneNumberSubline={phoneNumberSubline}
email={email}
emailOverline={emailOverline}
paymentMethods={paymentMethods}
paymentHeader={paymentHeader}
/>
)
}
MetaNavTastic.propTypes = {
data: PropTypes.object.isRequired,
}
export default tastify({ translate: true })(MetaNavTastic)
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 footer
If we wanted to create the exact same footer but within a component group, we can break it up into the below Frontastic components:
Meta navigation:
{
"tasticType": "frontastic/boost/footer/metanavigation",
"name": "Footer meta navigation",
"icon": "menu",
"category": "Footer",
"schema": [
{
"name": "Meta navigation",
"fields": [
{
"label": "Title",
"field": "title",
"type": "string"
},
{
"label": "Links",
"field": "links",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
}
]
}
Help information:
{
"tasticType": "frontastic/boost/footer/helpinformation",
"name": "Footer help information",
"icon": "list",
"category": "Footer",
"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"
}
]
},
{
"label": "Links",
"field": "infoLinks",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
}
]
}
Contact info:
{
"tasticType": "frontastic/boost/footer/contactinfo",
"name": "Footer contact info",
"icon": "list",
"category": "Footer",
"schema": [
{
"name": "Contact info",
"fields": [
{
"label": "Header",
"field": "contactHeader",
"type": "string"
},
{
"label": "Phone number",
"field": "phoneNumber",
"type": "string"
},
{
"label": "Phone number subline",
"field": "phoneNumberSubline",
"type": "string"
},
{
"label": "Email",
"field": "email",
"type": "string"
},
{
"label": "Email overline",
"field": "emailOverline",
"type": "string"
}
]
}
]
}
About:
{
"tasticType": "frontastic/boost/footer/about",
"name": "Footer about",
"icon": "list",
"category": "Footer",
"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"
}
]
},
{
"label": "Links",
"field": "aboutLinks",
"type": "group",
"itemLabelField": "label",
"fields": [
{
"label": "Label",
"field": "label",
"type": "string"
},
{
"label": "Link",
"field": "reference",
"type": "reference"
}
]
}
]
}
]
}
Payment methods:
{
"tasticType": "frontastic/boost/footer/paymentmethods",
"name": "Footer payment methods",
"icon": "list",
"category": "Footer",
"schema": [
{
"name": "Payment methods",
"fields": [
{
"label": "Payment methods",
"field": "paymentMethods",
"type": "group",
"itemLabelField": "icon",
"fields": [
{
"label": "Icon",
"field": "playmentIcon",
"type": "enum",
"values": [
{
"name": "PayPal",
"value": "paypal"
},
{
"name": "Visa",
"value": "visa"
},
{
"name": "Mastercard",
"value": "mastercard"
}
]
}
]
}
]
}
]
}
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 almost 2 years ago