Catalyst support

Mega Menu now supports BigCommerce's catalyst - the headless reference architecture.

This is currently available via a private npm package. Get in touch for access.

npm install @hypa-apps/mega-menu-builder

You can then add a new function that will fetch menu items. In our demo site, we’ve added this to client/queries/get-hypa-menu-items.ts

import { MenuItem } from '@hypa-apps/mega-menu-builder/dist/types';

export const getHypaMenuItems = async (storeHash: string, menuCode: string): Promise<MenuItem[]> => {
  const path = `https://megamenu.hypaapps.com/megamenubuilder/${storeHash}/${menuCode}`;

  try {
    const response = await fetch(path);
    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
    const data = (await response.json()) as { data: MenuItem[] };

    return data.data;
  } catch (error) {
    return [];
  }
};

React Component

Optionally, you can use our mega menu react components. To do so, open components/header/index.tsx

Add the following imports:

import { MegaMenuBuilder } from "@hypa-apps/mega-menu-builder";
import { MenuItem } from '@hypa-apps/mega-menu-builder/dist/types';
import '@hypa-apps/mega-menu-builder/dist/css/mega-menu-builder.css';
import { getHypaMenuItems } from '~/client/queries/get-hypa-menu-items';

Use your new function to fetch the menu items:

const menuItems = await getHypaMenuItems(process.env.BIGCOMMERCE_STORE_HASH, process.env.HYPA_MENU_CODE);

Next, replace the default menu component:

<HeaderNav className="hidden xl:flex" data={data.categoryTree} />

With the Hypa mega menu component:

<MegaMenuBuilder
  className="hidden lg:block"
  code={process.env.HYPA_MENU_CODE}
  menuItems={menuItems}
  storeHash={process.env.BIGCOMMERCE_STORE_HASH}
  theme="desktop"
/>

Similarly, you can replace the mobile menu component:

<NavigationMenuCollapsed>
  <HeaderNav data={data.categoryTree} inCollapsedNav />
</NavigationMenuCollapsed>

With the Hypa mobile menu component

<NavigationMenuCollapsed className="px-0 sm:px-0">
  <MegaMenuBuilder
    code={process.env.HYPA_MENU_CODE}
    menuItems={menuItems}
    storeHash={process.env.BIGCOMMERCE_STORE_HASH}
    theme="mobile"
  />
</NavigationMenuCollapsed>

Customer group support

Mega Menu Builder supports showing and hiding menu items depending on the logged-in customer and the customer group that they are assigned to. Our react component also has support for this feature.

To access it, create a further helper function in a new file client/queries/get-customer-group-id.ts

import { cache } from 'react';

import { getSessionCustomerId } from '~/auth';
import { client } from '~/client';
import { graphql } from '~/client/generated';

import { revalidate } from '../revalidate-target';

const GET_CUSTOMER_GROUP_ID_QUERY = graphql(`
  query getCustomerGroupId {
    customer {
      customerGroupId
    }
  }
`);

export const getCustomerGroupId = cache(async () => {
  const customerId = await getSessionCustomerId();

  const response = await client.fetch({
    document: GET_CUSTOMER_GROUP_ID_QUERY,
    variables: {},
    customerId,
    fetchOptions: { next: { revalidate } },
  });

  const customerGroupId = response.data.customer?.customerGroupId;

  if (!customerGroupId) {
    return null;
  }

  return customerGroupId;
});

Then, hop back into header/index.tsx  and find the line where you fetch menu items and add a line to get the current customer’s customer group ID:

const customerGroupId = await getCustomerGroupId();

You can then update the reference to our react component to pass in the customer group as a further prop, e.g.

<MegaMenuBuilder
  className="hidden lg:block"
  code={process.env.HYPA_MENU_CODE}
  customerGroupId={customerGroupId}
  customerId={customerId}
  menuItems={menuItems}
  storeHash={process.env.BIGCOMMERCE_STORE_HASH}
  theme="desktop"
/>

And with that, you’re done!

If you have any feedback, or feature requests, please get in touch!