Header

The Header component can be used on any page.

Example image

header.png

Code samples

{
"tasticType": "commercetools/ui/header",
"name": "commercetools 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/commercetools-ui/header';
import { calculateCartCount } from 'helpers/utils/calculateCartCount';
import { useCart, useWishlist, useAccount } from 'frontastic/provider';
const HeaderTastic = ({ data }) => {
const { data: cart } = useCart();
const { data: wishlist } = useWishlist();
const { account } = useAccount();
return (
<Header
tagline={data.tagline}
links={data.links}
cartItemCount={calculateCartCount(cart?.lineItems) || 0}
wishlistItemCount={wishlist?.lineItems?.length || 0}
logo={data.logo}
logoLink={data.logoLink}
account={account}
accountLink={data.accountLink}
wishlistLink={data.wishlistLink}
cartLink={data.cartLink}
/>
);
};
export default HeaderTastic;