Header

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