Header Tastic

Tastic name:

Header

Page type:

All pages

Example image:

Header Tastic

Schema.json:

{
    "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 will currently not 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 & Information Links",
            "fields": [
                {
                    "label": "Header",
                    "field": "infoHeader",
                    "type": "string"
                },
                {
                    "label": "Header icon",
                    "field": "infoHeaderIcon",
                    "translatable": false,
                    "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",
                    "translatable": false,
                    "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",
                    "translatable": false,
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "value": "help",
                            "name": "Help"
                        },
                        {
                            "value": "chat",
                            "name": "Chat"
                        },
                        {
                            "value": "announcement",
                            "name": "Announcement"
                        }
                    ]
                }
            ]
        }
    ]
}

Tastic.jsx:

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 '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') }}
            	infoHeader={data.infoHeader}
           	infoHeaderIcon={data.infoHeaderIcon}
            	aboutHeader={data.aboutHeader}
            	aboutHeaderIcon={data.aboutHeaderIcon}
            	contactHeader={data.contactHeader}
            	contactHeaderIcon={data.contactHeaderIcon}
        />
    )
}

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

export default tastify()(MainMenuTastic)

Still need help? Contact us Contact us