Custom Navigation

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

packages/opencommerce/schema.d.ts

@@ -8001,6 +8001,127 @@ export type CatalogItemsQuery = {
   } | null
 }
 
+export type PrimaryShopQueryVariables = Exact<{
+  language?: Scalars['String']
+}>
+
+export type PrimaryShopQuery = {
+  __typename?: 'Query'
+  primaryShop?: {
+    __typename?: 'Shop'
+    _id: string
+    description?: string | null
+    name: string
+    currency: { __typename?: 'Currency'; code: string }
+    defaultNavigationTree?: {
+      __typename?: 'NavigationTree'
+      _id: string
+      shopId: string
+      name: string
+      items?: Array<{
+        __typename?: 'NavigationTreeItem'
+        navigationItem: {
+          __typename?: 'NavigationItem'
+          data?: {
+            __typename?: 'NavigationItemData'
+            contentForLanguage?: string | null
+            classNames?: string | null
+            url?: string | null
+            isUrlRelative?: boolean | null
+            shouldOpenInNewWindow?: boolean | null
+          } | null
+        }
+        items?: Array<{
+          __typename?: 'NavigationTreeItem'
+          navigationItem: {
+            __typename?: 'NavigationItem'
+            data?: {
+              __typename?: 'NavigationItemData'
+              contentForLanguage?: string | null
+              classNames?: string | null
+              url?: string | null
+              isUrlRelative?: boolean | null
+              shouldOpenInNewWindow?: boolean | null
+            } | null
+          }
+          items?: Array<{
+            __typename?: 'NavigationTreeItem'
+            navigationItem: {
+              __typename?: 'NavigationItem'
+              data?: {
+                __typename?: 'NavigationItemData'
+                contentForLanguage?: string | null
+                classNames?: string | null
+                url?: string | null
+                isUrlRelative?: boolean | null
+                shouldOpenInNewWindow?: boolean | null
+              } | null
+            }
+          } | null> | null
+        } | null> | null
+      } | null> | null
+    } | null
+  } | null
+}
+
+export type NavigationTreeFragmentFragment = {
+  __typename?: 'NavigationTree'
+  _id: string
+  shopId: string
+  name: string
+  items?: Array<{
+    __typename?: 'NavigationTreeItem'
+    navigationItem: {
+      __typename?: 'NavigationItem'
+      data?: {
+        __typename?: 'NavigationItemData'
+        contentForLanguage?: string | null
+        classNames?: string | null
+        url?: string | null
+        isUrlRelative?: boolean | null
+        shouldOpenInNewWindow?: boolean | null
+      } | null
+    }
+    items?: Array<{
+      __typename?: 'NavigationTreeItem'
+      navigationItem: {
+        __typename?: 'NavigationItem'
+        data?: {
+          __typename?: 'NavigationItemData'
+          contentForLanguage?: string | null
+          classNames?: string | null
+          url?: string | null
+          isUrlRelative?: boolean | null
+          shouldOpenInNewWindow?: boolean | null
+        } | null
+      }
+      items?: Array<{
+        __typename?: 'NavigationTreeItem'
+        navigationItem: {
+          __typename?: 'NavigationItem'
+          data?: {
+            __typename?: 'NavigationItemData'
+            contentForLanguage?: string | null
+            classNames?: string | null
+            url?: string | null
+            isUrlRelative?: boolean | null
+            shouldOpenInNewWindow?: boolean | null
+          } | null
+        }
+      } | null> | null
+    } | null> | null
+  } | null> | null
+}
+
+export type NavigationItemFieldsFragment = {
+  __typename?: 'NavigationItemData'
+  contentForLanguage?: string | null
+  classNames?: string | null
+  url?: string | null
+  isUrlRelative?: boolean | null
+  shouldOpenInNewWindow?: boolean | null
+}
+
 export type GetProductBySlugQueryVariables = Exact<{
   slug: Scalars['String']
 }>

packages/opencommerce/src/api/operations/get-site-info.ts

@@ -9,11 +9,16 @@ import {
   GetAllProductVendorsQueryVariables,
 } from '../../../schema'
 import getTagsQuery from '../queries/get-tags-query'
-import { GetSiteInfoOperation, OCCategory } from '../../types/site'
-import { normalizeCategory, normalizeVendors } from '../../utils/normalize'
+import { GetSiteInfoOperation, OCCategory, SiteTypes } from '../../types/site'
+import {
+  normalizeCategory,
+  normalizeNavigation,
+  normalizeVendors,
+} from '../../utils/normalize'
 import type { OpenCommerceConfig, Provider } from '..'
 import filterEdges from '../utils/filter-edges'
 import getAllProductVendors from '../queries/get-vendors-query'
+import getPrimaryShopQuery from '../queries/get-primary-shop-query'
 
 export default function getSiteInfoOperation({
   commerce,
@@ -39,15 +44,17 @@ export default function getSiteInfoOperation({
   } = {}): Promise<T['data']> {
     const { fetch, shopId } = commerce.getConfig(cfg)
 
-    const [categoriesResponse, vendorsResponse] = await Promise.all([
-      await fetch<GetTagsQuery, GetTagsQueryVariables>(getTagsQuery, {
-        variables: { first: 250, shopId },
-      }),
-      await fetch<
-        GetAllProductVendorsQuery,
-        GetAllProductVendorsQueryVariables
-      >(getAllProductVendors, { variables: { shopIds: [shopId] } }),
-    ])
+    const [categoriesResponse, vendorsResponse, primaryShopResponse] =
+      await Promise.all([
+        await fetch<GetTagsQuery, GetTagsQueryVariables>(getTagsQuery, {
+          variables: { first: 250, shopId },
+        }),
+        await fetch<
+          GetAllProductVendorsQuery,
+          GetAllProductVendorsQueryVariables
+        >(getAllProductVendors, { variables: { shopIds: [shopId] } }),
+        await fetch(getPrimaryShopQuery),
+      ])
 
     const categories = filterEdges(categoriesResponse.data.tags?.edges).map(
       (edge) => normalizeCategory(edge.node! as OCCategory)
@@ -57,7 +64,15 @@ export default function getSiteInfoOperation({
       ...new Set(filterEdges(vendorsResponse.data.vendors?.nodes)),
     ].map(normalizeVendors)
 
-    return { categories, brands }
+    const navigationItems =
+      primaryShopResponse.data.primaryShop.defaultNavigationTree.items ?? []
+
+    console.log(normalizeNavigation(navigationItems))
+    return {
+      categories,
+      brands,
+      navigation: normalizeNavigation(navigationItems),
+    }
   }
 
   return getSiteInfo

packages/opencommerce/src/api/queries/get-primary-shop-query.ts

@@ -0,0 +1,50 @@
+const getPrimaryShopQuery = /* GraphQL */ `
+  query primaryShop($language: String! = "en") {
+    primaryShop {
+      _id
+      currency {
+        code
+      }
+      defaultNavigationTree(language: $language) {
+        ...NavigationTreeFragment
+      }
+      description
+      name
+    }
+  }
+  fragment NavigationTreeFragment on NavigationTree {
+    _id
+    shopId
+    name
+    items {
+      navigationItem {
+        data {
+          ...NavigationItemFields
+        }
+      }
+      items {
+        navigationItem {
+          data {
+            ...NavigationItemFields
+          }
+        }
+        items {
+          navigationItem {
+            data {
+              ...NavigationItemFields
+            }
+          }
+        }
+      }
+    }
+  }
+  fragment NavigationItemFields on NavigationItemData {
+    contentForLanguage
+    classNames
+    url
+    isUrlRelative
+    shouldOpenInNewWindow
+  }
+`
+
+export default getPrimaryShopQuery

packages/opencommerce/src/commerce.config.json

@@ -1,6 +1,7 @@
 {
   "provider": "opencommerce",
   "features": {
-    "customCheckout": true
+    "customCheckout": true,
+    "customNavigation": true
   }
 }

packages/opencommerce/src/types/site.ts

@@ -1,4 +1,5 @@
 import { Vendor as QueryVender, TagEdge } from '../../schema'
+import { SiteTypes as CoreSiteTypes } from '@vercel/commerce/types/site'
 
 export * from '@vercel/commerce/types/site'
 
@@ -13,3 +14,23 @@ export type Vendor = {
     path: string
   }
 }
+
+export type NavigationItem = {
+  url: string
+  label: string
+  isUrlRelative: boolean
+  shouldOpenInNewWindow: boolean
+  items?: NavigationItem[]
+}
+
+export type SiteTypes = CoreSiteTypes & {
+  navigation: NavigationItem
+}
+
+export type GetSiteInfoOperation<T extends SiteTypes = SiteTypes> = {
+  data: {
+    categories: T['category'][]
+    brands: T['brand'][]
+    navigation: T['navigation'][]
+  }
+}

packages/opencommerce/src/utils/normalize.ts

@@ -4,13 +4,20 @@ import type {
   ProductOptionValues,
   ProductVariant,
 } from '../types/product'
-import { OCCategory, Category, Vendor, OCVendor } from '../types/site'
+import {
+  OCCategory,
+  Category,
+  Vendor,
+  OCVendor,
+  NavigationItem,
+} from '../types/site'
 import {
   CatalogItemProduct,
   CatalogProductVariant,
   ImageInfo,
   Cart as OCCart,
   CartItemEdge,
+  NavigationTreeItem,
 } from '../../schema'
 import { Cart, LineItem } from '../types/cart'
 
@@ -300,3 +307,17 @@ function normalizeLineItem(cartItemEdge: CartItemEdge): LineItem {
     ],
   }
 }
+
+export const normalizeNavigation = (
+  navigationTreeItems: NavigationTreeItem[]
+): NavigationItem[] => {
+  return navigationTreeItems.map(({ items, navigationItem: { data } }) => {
+    return {
+      url: data?.url ?? '/',
+      label: data?.contentForLanguage ?? 'N/A',
+      isUrlRelative: !!data?.isUrlRelative,
+      shouldOpenInNewWindow: !!data?.shouldOpenInNewWindow,
+      items: normalizeNavigation((items ?? []) as NavigationTreeItem[]),
+    }
+  })
+}

site/components/common/Layout/Layout.tsx

@@ -17,6 +17,7 @@ import { MenuSidebarView } from '@components/common/UserNav'
 import type { Page } from '@commerce/types/page'
 import type { Category } from '@commerce/types/site'
 import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
+import { NavigationItem } from '@framework/types/site'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@@ -52,6 +53,7 @@ interface Props {
   pageProps: {
     pages?: Page[]
     categories: Category[]
+    navigation: NavigationItem[]
   }
 }
 
@@ -104,8 +106,9 @@ const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => {
 
 const Layout: React.FC<Props> = ({
   children,
-  pageProps: { categories = [], ...pageProps },
+  pageProps: { categories = [], navigation = [], ...pageProps },
 }) => {
+  console.log({ navigation })
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
   const navBarlinks = categories.slice(0, 2).map((c) => ({
@@ -116,7 +119,7 @@ const Layout: React.FC<Props> = ({
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <Navbar links={navBarlinks} />
+        <Navbar links={navBarlinks} customNavigation={navigation} />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <ModalUI />

site/components/common/Navbar/CustomNavbar.tsx

@@ -0,0 +1,66 @@
+import cn from 'clsx'
+import Link from 'next/link'
+
+import { NavigationItem } from '@framework/types/site'
+
+import s from './Navbar.module.css'
+
+interface SubItemProps {
+  subItem: NavigationItem
+  level?: number
+}
+
+const SubItem = ({ subItem, level = 0 }: SubItemProps) => {
+  return (
+    <>
+      <Link href={subItem.url} key={subItem.url}>
+        <a
+          className={`block rounded ml-${
+            level * 2
+          } py-[10px] px-4 text-sm text-secondary`}
+        >
+          {subItem.label}
+        </a>
+      </Link>
+      {subItem.items && subItem.items.length > 0
+        ? subItem.items.map((el) => (
+            <SubItem subItem={el} key={el.url} level={level + 1} />
+          ))
+        : null}
+    </>
+  )
+}
+
+interface CustomNavbarProps {
+  links?: NavigationItem[]
+}
+
+const CustomNavbar = ({ links = [] }: CustomNavbarProps) => {
+  return (
+    <>
+      {links.map((item) => (
+        <div className="group inline-block relative" key={item.url}>
+          <Link href={item.url}>
+            <a
+              className={cn(
+                s.link,
+                Number(item.items?.length) > 0 && s.customLink
+              )}
+            >
+              {item.label}
+            </a>
+          </Link>
+          {item.items && item.items.length > 0 ? (
+            <div className="relative top-full left-0 hidden min-w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full">
+              {item.items.map((subItem) => (
+                <SubItem subItem={subItem} key={subItem.url} />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default CustomNavbar

site/components/common/Navbar/Navbar.module.css

@@ -33,3 +33,7 @@
     transform: scale(1.05);
   }
 }
+
+.customLink {
+  @apply relative py-2 after:absolute after:right-1 after:top-1/2 after:mt-[-2px] after:h-2 after:w-2 after:-translate-y-1/2 after:rotate-45 after:border-b-2 after:border-r-2 after:border-current lg:pl-0 lg:pr-4 lg:after:right-0;
+}

site/components/common/Navbar/Navbar.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react'
+import cn from 'clsx'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
+import { SiteTypes } from '@framework/types/site'
+import CustomNavbar from './CustomNavbar'
 
 interface Link {
   href: string
@@ -12,9 +15,10 @@ interface Link {
 
 interface NavbarProps {
   links?: Link[]
+  customNavigation?: SiteTypes['navigation'][]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
+const Navbar: FC<NavbarProps> = ({ links, customNavigation }) => (
   <NavbarRoot>
     <Container clean className="mx-auto max-w-8xl px-6">
       <div className={s.nav}>
@@ -33,6 +37,9 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
                 <a className={s.link}>{l.label}</a>
               </Link>
             ))}
+            {process.env.COMMERCE_CUSTOMNAVIGATION_ENABLED && (
+              <CustomNavbar links={customNavigation} />
+            )}
           </nav>
         </div>
         {process.env.COMMERCE_SEARCH_ENABLED && (

site/lib/search-props.tsx

@@ -11,12 +11,13 @@ export async function getSearchStaticProps({
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const { pages } = await pagesPromise
-  const { categories, brands } = await siteInfoPromise
+  const { categories, brands, navigation } = await siteInfoPromise
   return {
     props: {
       pages,
       categories,
       brands,
+      navigation,
     },
     revalidate: 200,
   }

site/pages/[...pages].tsx

@@ -21,7 +21,7 @@ export async function getStaticProps({
   const pagesPromise = commerce.getAllPages({ config, preview })
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const { pages } = await pagesPromise
-  const { categories } = await siteInfoPromise
+  const { categories, navigation } = await siteInfoPromise
   const path = params?.pages.join('/')
   const slug = locale ? `${locale}/${path}` : path
   const pageItem = pages.find((p: Page) =>
@@ -44,7 +44,7 @@ export async function getStaticProps({
   }
 
   return {
-    props: { pages, page, categories },
+    props: { pages, page, categories, navigation },
     revalidate: 60 * 60, // Every hour
   }
 }
@@ -70,9 +70,7 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   }
 }
 
-export default function Pages({
-  page,
-}: {page: Page}) {
+export default function Pages({ page }: { page: Page }) {
   const router = useRouter()
 
   return router.isFallback ? (

site/pages/index.tsx

@@ -22,7 +22,7 @@ export async function getStaticProps({
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
   const { products } = await productsPromise
   const { pages } = await pagesPromise
-  const { categories, brands } = await siteInfoPromise
+  const { categories, brands, navigation } = await siteInfoPromise
 
   return {
     props: {
@@ -30,6 +30,7 @@ export async function getStaticProps({
       categories,
       brands,
       pages,
+      navigation,
     },
     revalidate: 60,
   }

site/pages/product/[slug].tsx

@@ -29,7 +29,7 @@ export async function getStaticProps({
     preview,
   })
   const { pages } = await pagesPromise
-  const { categories } = await siteInfoPromise
+  const { categories, navigation } = await siteInfoPromise
   const { product } = await productPromise
   const { products: relatedProducts } = await allProductsPromise
 
@@ -43,6 +43,7 @@ export async function getStaticProps({
       product,
       relatedProducts,
       categories,
+      navigation,
     },
     revalidate: 200,
   }