Skip to content

Commit

Permalink
Merge pull request #18 from VikasTiwari-Webkul/v2
Browse files Browse the repository at this point in the history
Compatible with Bagisto 2.0
  • Loading branch information
VikasTiwari-Webkul authored Jun 6, 2024
2 parents d1abc58 + 9f8e436 commit bed1c02
Show file tree
Hide file tree
Showing 7 changed files with 70 additions and 63 deletions.
10 changes: 7 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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/)

<h3 id="v1-note"></h3>

## 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.
Expand Down
12 changes: 11 additions & 1 deletion app/(checkout)/checkout/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="mx-auto max-w-6xl">
Expand All @@ -27,7 +29,15 @@ export default async function CheckoutLayout({ children }: React.PropsWithChildr
>
<header className="flex flex-col gap-4">
<div className="hidden w-full flex-col gap-6 lg:flex">
<LogoSquare />
<div>
<Link
className="flex items-center gap-2 text-black md:pt-1 dark:text-white"
href="/"
>
<LogoSquare />
<span className="uppercase">{SITE_NAME}</span>
</Link>
</div>
</div>
<NextBreadcrumb />
</header>
Expand Down
15 changes: 7 additions & 8 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
7 changes: 5 additions & 2 deletions components/checkout/cart/cart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand All @@ -22,7 +22,10 @@ export default async function Cart() {
<>
<div className="flex w-full flex-col gap-6 lg:hidden">
<div className="mx-auto mt-8 flex items-center px-2 lg:hidden">
<LogoSquare />
<Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
<LogoSquare />
<span className="uppercase">{SITE_NAME}</span>
</Link>
</div>
<CartItemAccordian cartItem={cart} />
</div>
Expand Down
25 changes: 17 additions & 8 deletions components/layout/footer.tsx
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -15,7 +15,10 @@ export default async function Footer() {
<footer className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
<div>
<LogoSquare size="sm" />
<Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
<LogoSquare size="sm" />
<span className="uppercase">{SITE_NAME}</span>
</Link>
</div>
<Suspense
fallback={
Expand All @@ -33,13 +36,19 @@ export default async function Footer() {
</Suspense>
<div className="md:ml-auto">
<a
className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
className="flex h-8 w-max flex-none items-center justify-center rounded-md text-xs text-black"
aria-label="Deploy on Vercel"
href="https://vercel.com/templates/next.js/nextjs-commerce"
target="_blank"
href="https://github.com/bagisto/nextjs-commerce"
>
<span className="px-3"></span>
<hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
<span className="px-3">Deploy</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
shapeRendering="geometricPrecision"
className="h-6 fill-black dark:fill-white"
>
<path d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21227 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21227 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"></path>
</svg>
</a>
</div>
</div>
Expand All @@ -53,7 +62,7 @@ export default async function Footer() {
<p>Designed in California</p>
<p className="md:ml-auto">
<a href="#" className="text-black dark:text-white">
Crafted by ▲ Vercel
Crafted by Bagisto
</a>
</p>
</div>
Expand Down
9 changes: 7 additions & 2 deletions components/layout/navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -21,7 +21,12 @@ export default async function Navbar() {
</div>
<div className="flex w-full items-center">
<div className="flex w-full md:w-1/3">
<LogoSquare header />
<Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
<LogoSquare />
<div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
{SITE_NAME}
</div>
</Link>
{menu.length ? (
<ul className="hidden gap-6 text-sm md:flex md:items-center">
{menuData.slice(0, 3).map((item: Menu) => (
Expand Down
55 changes: 16 additions & 39 deletions components/logo-square.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Link
href="/"
<div
className={clsx(
'mr-2 flex w-full items-center md:w-auto lg:mr-6',
header && 'justify-center'
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
{
'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm'
}
)}
>
<div
className={clsx(
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
{
'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm'
}
)}
>
<Image
src={storeConfig?.logoUrl}
width={16}
height={16}
className={clsx({
'h-[16px] w-[16px]': !size,
'h-[10px] w-[10px]': size === 'sm'
})}
alt="Picture of the author"
/>
</div>
<div className="ml-2 flex-none text-base font-medium md:hidden lg:block">
{storeConfig?.name}
</div>
</Link>
<LogoIcon
className={clsx({
'h-[16px] w-[16px]': !size,
'h-[10px] w-[10px]': size === 'sm'
})}
/>
</div>
);
}

0 comments on commit bed1c02

Please sign in to comment.