From b080326301c28005a1efa17ef2c5abe33156cd44 Mon Sep 17 00:00:00 2001 From: meteor Date: Fri, 19 Apr 2024 19:22:33 +0400 Subject: [PATCH] Improved using CartModal on checkout page --- app/{ => (checkout)}/checkout/layout.tsx | 0 app/{ => (checkout)}/checkout/page.tsx | 0 app/(checkout)/layout.tsx | 45 +++ app/{ => (shop)}/api/revalidate/route.ts | 0 app/{ => (shop)}/error.tsx | 0 app/{ => (shop)}/layout.tsx | 2 +- app/{ => (shop)}/opengraph-image.tsx | 0 app/{ => (shop)}/page.tsx | 0 app/{ => (shop)}/product/[handle]/page.tsx | 0 .../search/[collection]/opengraph-image.tsx | 0 app/{ => (shop)}/search/[collection]/page.tsx | 0 app/{ => (shop)}/search/layout.tsx | 0 app/{ => (shop)}/search/loading.tsx | 0 app/{ => (shop)}/search/page.tsx | 0 components/cart/modal.tsx | 330 +++++++++--------- .../layout/navbar/index-without-cart-icon.tsx | 48 +++ 16 files changed, 254 insertions(+), 171 deletions(-) rename app/{ => (checkout)}/checkout/layout.tsx (100%) rename app/{ => (checkout)}/checkout/page.tsx (100%) create mode 100644 app/(checkout)/layout.tsx rename app/{ => (shop)}/api/revalidate/route.ts (100%) rename app/{ => (shop)}/error.tsx (100%) rename app/{ => (shop)}/layout.tsx (98%) rename app/{ => (shop)}/opengraph-image.tsx (100%) rename app/{ => (shop)}/page.tsx (100%) rename app/{ => (shop)}/product/[handle]/page.tsx (100%) rename app/{ => (shop)}/search/[collection]/opengraph-image.tsx (100%) rename app/{ => (shop)}/search/[collection]/page.tsx (100%) rename app/{ => (shop)}/search/layout.tsx (100%) rename app/{ => (shop)}/search/loading.tsx (100%) rename app/{ => (shop)}/search/page.tsx (100%) create mode 100644 components/layout/navbar/index-without-cart-icon.tsx diff --git a/app/checkout/layout.tsx b/app/(checkout)/checkout/layout.tsx similarity index 100% rename from app/checkout/layout.tsx rename to app/(checkout)/checkout/layout.tsx diff --git a/app/checkout/page.tsx b/app/(checkout)/checkout/page.tsx similarity index 100% rename from app/checkout/page.tsx rename to app/(checkout)/checkout/page.tsx diff --git a/app/(checkout)/layout.tsx b/app/(checkout)/layout.tsx new file mode 100644 index 0000000000..87a4dd0ff4 --- /dev/null +++ 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 ( + + + + +
{children}
+ + + + ); +} diff --git a/app/api/revalidate/route.ts b/app/(shop)/api/revalidate/route.ts similarity index 100% rename from app/api/revalidate/route.ts rename to app/(shop)/api/revalidate/route.ts diff --git a/app/error.tsx b/app/(shop)/error.tsx similarity index 100% rename from app/error.tsx rename to app/(shop)/error.tsx diff --git a/app/layout.tsx b/app/(shop)/layout.tsx similarity index 98% rename from app/layout.tsx rename to app/(shop)/layout.tsx index 39bc70b99e..ffca2bf4ae 100644 --- a/app/layout.tsx +++ b/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 b/app/(shop)/opengraph-image.tsx similarity index 100% rename from app/opengraph-image.tsx rename to app/(shop)/opengraph-image.tsx diff --git a/app/page.tsx b/app/(shop)/page.tsx similarity index 100% rename from app/page.tsx rename to app/(shop)/page.tsx diff --git a/app/product/[handle]/page.tsx b/app/(shop)/product/[handle]/page.tsx similarity index 100% rename from app/product/[handle]/page.tsx rename to app/(shop)/product/[handle]/page.tsx diff --git a/app/search/[collection]/opengraph-image.tsx b/app/(shop)/search/[collection]/opengraph-image.tsx similarity index 100% rename from app/search/[collection]/opengraph-image.tsx rename to app/(shop)/search/[collection]/opengraph-image.tsx diff --git a/app/search/[collection]/page.tsx b/app/(shop)/search/[collection]/page.tsx similarity index 100% rename from app/search/[collection]/page.tsx rename to app/(shop)/search/[collection]/page.tsx diff --git a/app/search/layout.tsx b/app/(shop)/search/layout.tsx similarity index 100% rename from app/search/layout.tsx rename to app/(shop)/search/layout.tsx diff --git a/app/search/loading.tsx b/app/(shop)/search/loading.tsx similarity index 100% rename from app/search/loading.tsx rename to app/(shop)/search/loading.tsx diff --git a/app/search/page.tsx b/app/(shop)/search/page.tsx similarity index 100% rename from app/search/page.tsx rename to app/(shop)/search/page.tsx diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx index 7edd94274f..8a7b5e4b11 100644 --- a/components/cart/modal.tsx +++ b/components/cart/modal.tsx @@ -8,7 +8,6 @@ import type { Cart } from 'lib/ecwid/types'; import { createUrl } from 'lib/utils'; import Image from 'next/image'; import Link from 'next/link'; -import { usePathname } from 'next/navigation'; import { Fragment, useEffect, useRef, useState } from 'react'; import CloseCart from './close-cart'; import { DeleteItemButton } from './delete-item-button'; @@ -16,186 +15,177 @@ import { EditItemQuantityButton } from './edit-item-quantity-button'; import OpenCart from './open-cart'; type MerchandiseSearchParams = { - [key: string]: string; + [key: string]: string; }; export default function CartModal({ cart }: { cart: Cart | undefined }) { - const pathname = usePathname(); - const [isCheckout, setIsCheckout] = useState(false); + const [isOpen, setIsOpen] = useState(false); + const quantityRef = useRef(cart?.totalQuantity); + const openCart = () => setIsOpen(true); + const closeCart = () => setIsOpen(false); - const [isOpen, setIsOpen] = useState(false); - const quantityRef = useRef(cart?.totalQuantity); - const openCart = () => setIsOpen(true); - const closeCart = () => setIsOpen(false); + useEffect(() => { + // Open cart modal when quantity changes. + if (cart?.totalQuantity !== quantityRef.current) { + // But only if it's not already open (quantity also changes when editing items in cart). + if (!isOpen) { + setIsOpen(true); + } - useEffect(() => { - // Hide cart icon because embedding inline checkout - let isCheckout = pathname != '/' && cart?.checkoutUrl.indexOf(pathname, 0) === 0; - setIsCheckout(isCheckout); + // Always update the quantity reference + quantityRef.current = cart?.totalQuantity; + } + }, [isOpen, cart?.totalQuantity, quantityRef]); - // Open cart modal when quantity changes. - if (cart?.totalQuantity !== quantityRef.current) { - // But only if it's not already open (quantity also changes when editing items in cart). - if (!isOpen) { - setIsOpen(true); - } - - // Always update the quantity reference - quantityRef.current = cart?.totalQuantity; - } - }, [isOpen, cart?.totalQuantity, quantityRef, pathname, cart?.checkoutUrl]); - - return ( - !isCheckout && ( - <> - - - - - - )} - - - - - - ) - ); + )} + + + + + + ); } diff --git a/components/layout/navbar/index-without-cart-icon.tsx b/components/layout/navbar/index-without-cart-icon.tsx new file mode 100644 index 0000000000..b69c5b98cb --- /dev/null +++ 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 ( + + ); +}