Header
The Header component can be used on any page.
Example image
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 (<Headertagline={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;