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 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.
  • Create a 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`. that includes multiple 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.

Both are reusable across all pages so you only have to set them up once, but by creating a 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`., 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 groupcomponent group - A group of Frontastic components saved in a reusable block – they’re created using the component group builder. Previously known as `kits`., we can break it up into the below 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.:

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.


Did this page help you?