crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-07 10:17:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

add cart menu

Browse Source
This commit is contained in:
karl 2025-03-28 13:18:17 -04:00
parent 2c1cfb6b38
commit cd4f725298
5 changed files with 49 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -1,5 +1,5 @@
import { CartProvider } from 'components/cart/cart-context'
// import { Navbar } from 'components/layout/navbar'
import { Navbar } from 'components/layout/navbar'
import NavbarV2 from 'components/layout/navbar/NavbarV2'
import { WelcomeToast } from 'components/welcome-toast'
import { GeistSans } from 'geist/font/sans'

86
components/layout/UserNav/UserNav.tsx
View File

@ -17,50 +17,50 @@
// const countItem = (count: number, item: LineItem) => count + item.quantity
// const UserNav: React.FC<{
// className?: string
// }> = ({ className }) => {
// const { data } = useCart()
// const { data: isCustomerLoggedIn } = useCustomer()
// const {
// toggleSidebar,
// closeSidebarIfPresent,
// openModal,
// setSidebarView,
// openSidebar,
// displaySidebar,
// } = useUI()
const UserNav: React.FC<{
className?: string
}> = ({ className }) => {
// const { data } = useCart()
// const { data: isCustomerLoggedIn } = useCustomer()
// const {
// toggleSidebar,
// closeSidebarIfPresent,
// openModal,
// setSidebarView,
// openSidebar,
// displaySidebar,
// } = useUI()
// const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
// const DropdownTrigger = isCustomerLoggedIn
// ? DropdownTriggerInst
// : React.Fragment
// const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
// const DropdownTrigger = isCustomerLoggedIn
// ? DropdownTriggerInst
// : React.Fragment
// return (
// <nav className={cn(s.root, className)}>
// <ul className={s.list}>
// {process.env.COMMERCE_CART_ENABLED && (
// <li className={s.item}>
// <Button
// className={s.item}
// variant="naked"
// onClick={() => {
// setSidebarView('CART_VIEW')
// openSidebar()
// }}
// aria-label={`Cart items: ${itemsCount}`}
// >
// <Bag className={displaySidebar ? undefined : 'text-white'} />
return (
<nav>Button</nav>
// <nav className={cn(s.root, className)}>
// <ul className={s.list}>
// {process.env.COMMERCE_CART_ENABLED && (
// <li className={s.item}>
// className={s.item}
// variant="naked"
// onClick={() => {
// setSidebarView('CART_VIEW')
// openSidebar()
// }}
// aria-label={`Cart items: ${itemsCount}`}
// >
// <Bag className={displaySidebar ? undefined : 'text-white'} />
// {itemsCount > 0 && (
// <span className={s.bagCount}>{itemsCount}</span>
// )}
// </Button>
// </li>
// )}
// </ul>
// </nav>
// )
// }
// {itemsCount > 0 && (
// <span className={s.bagCount}>{itemsCount}</span>
// )}
// </Button> */}
// </li>
// )}
// </ul>
// </nav>
)
}
// export default UserNav
export default UserNav

2
components/layout/UserNav/index.ts
View File

@ -1,3 +1,3 @@
// export { default } from './UserNav'
export { default } from './UserNav'
// export { default as MenuSidebarView } from './MenuSidebarView'
// export { default as CustomerMenuContent } from './CustomerMenuContent'

44
components/layout/navbar/NavbarV2.tsx
View File

@ -2,7 +2,7 @@
import { FC, useEffect, useMemo, useRef } from 'react'
import Link from 'next/link'
// import { UserNav } from '@components/common'
import UserNav from '../UserNav'
import { useRouter, usePathname } from 'next/navigation'
import Image from 'next/image'
@ -18,6 +18,7 @@ import {
// Product data
import { GLOVES_DATA } from '@/data/Gloves'
import { INDUSTRIAL_DATA } from '@/data/Industrial'
import CartModal from '@/components/cart/modal'
let _scrollTopValue: number | null = null
@ -573,6 +574,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
{/* Cart */}
<div className="ml-4 flow-root lg:ml-8">
{/* <UserNav /> */}
<CartModal />
</div>
</div>
</div>
@ -583,46 +585,6 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
</nav>
</header>
{/* <NavbarRoot>
<Container clean className="mx-auto max-w-8xl px-6">
<div className={s.nav}>
<div className="flex items-center flex-1">
<Link href="/" className={s.logo} aria-label="Logo">
<Logo />
</Link>
<nav className={s.navMenu}>
{NAVIGATION.map((menuContent) => (
<Link
key={menuContent.category}
href={menuContent.link}
className={s.link}
>
{menuContent.category}
</Link>
))}
</nav>
</div> */}
{/* {process.env.COMMERCE_SEARCH_ENABLED && (
<div className="justify-center flex-1 hidden lg:flex">
<Searchbar />
</div>
)} */}
{/* <div className="flex items-center justify-end flex-1 space-x-8">
<UserNav />
</div>
</div>
{process.env.COMMERCE_SEARCH_ENABLED && (
<div className="flex pb-4 lg:px-6 lg:hidden">
<Searchbar id="mobile-search" />
</div>
)}
</Container>
</NavbarRoot> */}
<div
style={{
height:

2
components/layout/navbar/index.tsx
View File

@ -13,7 +13,7 @@ export async function Navbar() {
const menu = await getMenu('next-js-frontend-header-menu')
return (
<nav className="relative flex items-center justify-between p-4 lg:px-6">
<nav className="relative flex items-center justify-between p-100 lg:px-6">
<div className="block flex-none md:hidden">
<Suspense fallback={null}>
<MobileMenu menu={menu} />