Header
Frontastic component name
Header
Suggested page placement
Any page type
Example images


Code samples
{
"tasticType": "frontastic/ui/header",
"name": "Frontastic UI header",
"icon": "menu",
"category": "Header and footer",
"schema": [
{
"name": "Menu",
"fields": [
{
"label": "Tagline",
"field": "tagline",
"type": "string",
"translatable": true,
"required": false
},
{
"label": "Logo",
"field": "logo",
"type": "media",
"required": true
},
{
"label": "Links",
"field": "links",
"type": "group",
"itemLabelField": "name",
"fields": [
{
"label": "Name",
"field": "name",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
}
]
},
{
"name": "Links",
"fields": [
{
"label": "Logo link",
"field": "logoLink",
"type": "reference",
"required": true
},
{
"label": "Search link",
"field": "searchLink",
"type": "reference",
"required": true
},
{
"label": "Account link",
"field": "accountLink",
"type": "reference",
"required": true
},
{
"label": "Wishlist link",
"field": "wishlistLink",
"type": "reference",
"required": true
},
{
"label": "Cart link",
"field": "cartLink",
"type": "reference",
"required": true
}
]
}
]
}
import React from 'react';
import Header from 'components/frontastic-ui/header';
import { useCart, useWishlist } from '../../provider';
import { calculateCartCount } from '../../../helpers/utils/calculateCartCount';
const HeaderTastic = ({ data }) => {
const { data: cart } = useCart();
const { data: wishlist } = useWishlist();
return (
<Header
tagline={data.tagline}
links={data.links}
cartItemCount={calculateCartCount(cart?.lineItems) || 0}
wishlistItemCount={wishlist?.lineItems?.length || 0}
logo={data.logo}
logoLink={data.logoLink}
searchLink={data.searchLink}
accountLink={data.accountLink}
wishlistLink={data.wishlistLink}
cartLink={data.cartLink}
/>
);
};
export default HeaderTastic;
Updated 10 days ago
Did this page help you?