Improved using CartModal on checkout page

Ecwid · Apr 19, 2024 · b080326 · b080326
1 parent 638c1e8
commit b080326
Show file tree

Hide file tree

Showing 16 changed files with 254 additions and 171 deletions.
diff --git a/app/checkout/layout.tsx → app/(checkout)/checkout/layout.tsx b/app/checkout/layout.tsx → app/(checkout)/checkout/layout.tsx
diff --git a/app/checkout/page.tsx → app/(checkout)/checkout/page.tsx b/app/checkout/page.tsx → app/(checkout)/checkout/page.tsx
diff --git a/app/(checkout)/layout.tsx b/app/(checkout)/layout.tsx
@@ -0,0 +1,45 @@
+import NavbarWithoutCartIcon from 'components/layout/navbar/index-without-cart-icon';
+import { GeistSans } from 'geist/font';
+import { ensureStartsWith } from 'lib/utils';
+import { ReactNode, Suspense } from 'react';
+import '../globals.css';
+
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : 'http://localhost:3000';
+const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
+const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
+
+export const metadata = {
+    metadataBase: new URL(baseUrl),
+    title: {
+        default: SITE_NAME!,
+        template: `%s | ${SITE_NAME}`
+    },
+    robots: {
+        follow: true,
+        index: true
+    },
+    ...(twitterCreator &&
+        twitterSite && {
+        twitter: {
+            card: 'summary_large_image',
+            creator: twitterCreator,
+            site: twitterSite
+        }
+    })
+};
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en" className={GeistSans.variable}>
+            <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
+                <NavbarWithoutCartIcon />
+                <Suspense>
+                    <main>{children}</main>
+                </Suspense>
+            </body>
+        </html>
+    );
+}
diff --git a/app/api/revalidate/route.ts → app/(shop)/api/revalidate/route.ts b/app/api/revalidate/route.ts → app/(shop)/api/revalidate/route.ts
diff --git a/app/error.tsx → app/(shop)/error.tsx b/app/error.tsx → app/(shop)/error.tsx
diff --git a/app/layout.tsx → app/(shop)/layout.tsx b/app/layout.tsx → app/(shop)/layout.tsx
@@ -2,7 +2,7 @@ import Navbar from 'components/layout/navbar';
 import { GeistSans } from 'geist/font';
 import { ensureStartsWith } from 'lib/utils';
 import { ReactNode, Suspense } from 'react';
-import './globals.css';
+import '../globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL

diff --git a/app/opengraph-image.tsx → app/(shop)/opengraph-image.tsx b/app/opengraph-image.tsx → app/(shop)/opengraph-image.tsx
diff --git a/app/page.tsx → app/(shop)/page.tsx b/app/page.tsx → app/(shop)/page.tsx
diff --git a/app/product/[handle]/page.tsx → app/(shop)/product/[handle]/page.tsx b/app/product/[handle]/page.tsx → app/(shop)/product/[handle]/page.tsx
diff --git a/app/search/[collection]/opengraph-image.tsx → ...)/search/[collection]/opengraph-image.tsx b/app/search/[collection]/opengraph-image.tsx → ...)/search/[collection]/opengraph-image.tsx
diff --git a/app/search/[collection]/page.tsx → app/(shop)/search/[collection]/page.tsx b/app/search/[collection]/page.tsx → app/(shop)/search/[collection]/page.tsx
diff --git a/app/search/layout.tsx → app/(shop)/search/layout.tsx b/app/search/layout.tsx → app/(shop)/search/layout.tsx
diff --git a/app/search/loading.tsx → app/(shop)/search/loading.tsx b/app/search/loading.tsx → app/(shop)/search/loading.tsx
diff --git a/app/search/page.tsx → app/(shop)/search/page.tsx b/app/search/page.tsx → app/(shop)/search/page.tsx
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
diff --git a/components/layout/navbar/index-without-cart-icon.tsx b/components/layout/navbar/index-without-cart-icon.tsx
@@ -0,0 +1,48 @@
+import LogoSquare from 'components/logo-square';
+import { getMenu } from 'lib/ecwid';
+import { Menu } from 'lib/ecwid/types';
+import Link from 'next/link';
+import MobileMenu from './mobile-menu';
+import Search from './search';
+const { SITE_NAME } = process.env;
+
+export default async function NavbarWithoutCartIcon() {
+    const menu = await getMenu('next-js-frontend-header-menu');
+
+    return (
+        <nav className="relative flex items-center justify-between p-4 lg:px-6">
+            <div className="block flex-none md:hidden">
+                <MobileMenu menu={menu} />
+            </div>
+            <div className="flex w-full items-center">
+                <div className="flex w-full md:w-1/3">
+                    <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">
+                            {menu.map((item: Menu) => (
+                                <li key={item.title}>
+                                    <Link
+                                        href={item.path}
+                                        className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
+                                    >
+                                        {item.title}
+                                    </Link>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : null}
+                </div>
+                <div className="hidden justify-center md:flex md:w-2/3">
+                    <Search />
+                </div>
+                <div className="flex justify-end md:w-1/3">
+                </div>
+            </div>
+        </nav>
+    );
+}