Frontastic component name

Header text

Page type

Can be used on all pages

Example images

Code samples

{
    "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)

Did this page help you?