diff --git a/README.md b/README.md index 4b28171..1e1e421 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Next.js Commerce Bagisto +> Note: Looking for Bagisto Next.js Commerce v1? View the [code](https://github.com/bagisto/nextjs-commerce/tree/v1), [demo](https://bagisto-commerce.vercel.app/), and [release notes](https://github.com/bagisto/nextjs-commerce/releases/tag/v1) + A Next.js 14 and App Router-ready ecommerce template featuring: - Next.js App Router @@ -14,20 +16,22 @@ A Next.js 14 and App Router-ready ecommerce template featuring: - Checkout and payments with Bagisto - Automatic light/dark mode based on system settings +Demo live at: [Bagisto Store](https://v2-bagisto-demo.vercel.app/) +

## Configuration ### Setup Bagisto Store -- For `BAGISTO_CURRENCY_CODE` and `BAGISTO_STORE_ENDPOINT`, you need to install the [Bagisto](https://github.com/bagisto/bagisto). -- Then, you need to install the [Bagisto Headless Extension](https://github.com/bagisto/headless-ecommerce) in the Bagisto. +- For `BAGISTO_CURRENCY_CODE` and `BAGISTO_STORE_ENDPOINT`, you need to install the [Bagisto](https://github.com/bagisto/bagisto/tree/v2.0.0). +- Then, you need to install the [Bagisto Headless Extension](https://github.com/bagisto/headless-ecommerce/tree/v2.0.1) in the Bagisto. - Now you need to host the full application so that you have store endpoint and if you are in development mode then you can use Ngrok also. - After that you can proceed with setting up Next.js commerce. ## Running locally -You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary. +You will need to use the environment variables defined in [`.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary. > Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Bagisto store. diff --git a/app/(checkout)/checkout/layout.tsx b/app/(checkout)/checkout/layout.tsx index 6963065..39f29a1 100644 --- a/app/(checkout)/checkout/layout.tsx +++ b/app/(checkout)/checkout/layout.tsx @@ -5,10 +5,12 @@ import Loading from 'components/checkout/loading'; import NextBreadcrumb from 'components/checkout/next-breadcrumb'; import FormPlaceHolder from 'components/checkout/place-holder'; import LogoSquare from 'components/logo-square'; +import Link from 'next/link'; import { Suspense } from 'react'; const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded'; const activeAndTitles = 'bg-neutral-400 dark:bg-neutral-300'; const items = 'bg-neutral-400 dark:bg-neutral-700'; +const { SITE_NAME } = process.env; export default async function CheckoutLayout({ children }: React.PropsWithChildren) { return (
@@ -27,7 +29,15 @@ export default async function CheckoutLayout({ children }: React.PropsWithChildr >
- +
+ + + {SITE_NAME} + +
diff --git a/app/globals.css b/app/globals.css index 2f67943..b5e3194 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,26 +2,25 @@ @tailwind components; @tailwind utilities; - *::-webkit-scrollbar-track { -webkit-box-shadow: none; - @apply border-opacity-100 bg-gray-100; + @apply border-opacity-100 bg-white dark:bg-black; } *::-webkit-scrollbar { - @apply my-5 w-2 bg-gray-300; + @apply my-5 w-[6px] bg-gray-300; } *::-webkit-scrollbar-thumb { - @apply my-5 rounded-full bg-gray-300; + @apply my-5 rounded-full bg-gray-500 dark:bg-gray-300; } -.hiddenScrollBar { - -ms-overflow-style: none; /* Internet Explorer 10+ */ +/* .hiddenScrollBar { + -ms-overflow-style: none; scrollbar-width: none; -} +} */ .hiddenScrollBar::-webkit-scrollbar { - display: none; /* Safari and Chrome */ + @apply my-5 h-[6px] bg-gray-300; } @media (prefers-color-scheme: dark) { diff --git a/components/checkout/cart/cart.tsx b/components/checkout/cart/cart.tsx index 89a8080..d9b7a3b 100644 --- a/components/checkout/cart/cart.tsx +++ b/components/checkout/cart/cart.tsx @@ -8,7 +8,7 @@ import { cookies } from 'next/headers'; import Image from 'next/image'; import Link from 'next/link'; import CartItemAccordian from './cart-item-accordian'; - +const { SITE_NAME } = process.env; type MerchandiseSearchParams = { [key: string]: string; }; @@ -22,7 +22,10 @@ export default async function Cart() { <>
- + + + {SITE_NAME} +
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index 101f520..3935755 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -1,8 +1,8 @@ import FooterMenu from 'components/layout/footer-menu'; import LogoSquare from 'components/logo-square'; import { getThemeCustomization } from 'lib/bagisto'; +import Link from 'next/link'; import { Suspense } from 'react'; - const { COMPANY_NAME, SITE_NAME } = process.env; export default async function Footer() { @@ -15,7 +15,10 @@ export default async function Footer() {
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx index d75a283..70a12a2 100644 --- a/components/layout/navbar/index.tsx +++ b/components/layout/navbar/index.tsx @@ -7,7 +7,7 @@ import Link from 'next/link'; import { Suspense } from 'react'; import MobileMenu from './mobile-menu'; import Search, { SearchSkeleton } from './search'; - +const { SITE_NAME } = process.env; export default async function Navbar() { const menu = await getMenu('next-js-frontend-header-menu'); const menuData = [{ id: '', path: '/search', title: 'All' }, ...menu]; @@ -21,7 +21,12 @@ export default async function Navbar() {
- + + +
+ {SITE_NAME} +
+ {menu.length ? (
    {menuData.slice(0, 3).map((item: Menu) => ( diff --git a/components/logo-square.tsx b/components/logo-square.tsx index 7ca67c8..eccf5cb 100644 --- a/components/logo-square.tsx +++ b/components/logo-square.tsx @@ -1,46 +1,23 @@ import clsx from 'clsx'; -import { getChennel } from 'lib/bagisto'; -import Image from 'next/image'; -import Link from 'next/link'; -export default async function LogoSquare({ - size, - header -}: { - size?: 'sm' | undefined; - header?: boolean; -}) { - const storeConfig = await getChennel(); +import LogoIcon from './icons/logo'; + +export default function LogoSquare({ size }: { size?: 'sm' | undefined }) { return ( - -
    - Picture of the author -
    -
    - {storeConfig?.name} -
    - + +
); }