crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-08 18:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add toast

Browse Source
This commit is contained in:
Lee Robinson 2024-07-28 11:31:43 -05:00
parent a1de163406
commit 0f38ca644e
7 changed files with 65 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/layout.tsx
View File

@ -1,10 +1,12 @@
import { CartProvider } from 'components/cart/cart-context'; import { CartProvider } from 'components/cart/cart-context';
import Navbar from 'components/layout/navbar'; import { Navbar } from 'components/layout/navbar';
import { WelcomeToast } from 'components/welcome-toast';
import { GeistSans } from 'geist/font/sans'; import { GeistSans } from 'geist/font/sans';
import { getCart } from 'lib/shopify'; import { getCart } from 'lib/shopify';
import { ensureStartsWith } from 'lib/utils'; import { ensureStartsWith } from 'lib/utils';
import { cookies } from 'next/headers'; import { cookies } from 'next/headers';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Toaster } from 'sonner';
import './globals.css'; import './globals.css';
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@ -44,7 +46,11 @@ export default async function RootLayout({ children }: { children: ReactNode })
<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"> <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">
<CartProvider cartPromise={cart}> <CartProvider cartPromise={cart}>
<Navbar /> <Navbar />
<main>{children}</main> <main>
{children}
<Toaster closeButton />
<WelcomeToast />
</main>
</CartProvider> </CartProvider>
</body> </body>
</html> </html>

2
app/product/[handle]/page.tsx
View File

@ -88,7 +88,7 @@ export default async function ProductPage({ params }: { params: { handle: string
} }
> >
<Gallery <Gallery
images={product.images.map((image: Image) => ({ images={product.images.slice(0, 5).map((image: Image) => ({
src: image.url, src: image.url,
altText: image.altText altText: image.altText
}))} }))}

4
components/layout/footer.tsx
View File

@ -56,7 +56,9 @@ export default async function Footer() {
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved. {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
</p> </p>
<hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" /> <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
<p>Designed in California</p> <p>
<a href="https://github.com/vercel/commerce">View the source</a>
</p>
<p className="md:ml-auto"> <p className="md:ml-auto">
<a href="https://vercel.com" className="text-black dark:text-white"> <a href="https://vercel.com" className="text-black dark:text-white">
Crafted by ▲ Vercel Crafted by ▲ Vercel

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

@ -9,7 +9,7 @@ import Search, { SearchSkeleton } from './search';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
export default async function Navbar() { export async function Navbar() {
const menu = await getMenu('next-js-frontend-header-menu'); const menu = await getMenu('next-js-frontend-header-menu');
return ( return (

36
components/welcome-toast.tsx Normal file
View File

@ -0,0 +1,36 @@
'use client';
import { useEffect } from 'react';
import { toast } from 'sonner';
export function WelcomeToast() {
useEffect(() => {
// ignore if screen height is too small
if (window.innerHeight < 650) return;
if (!document.cookie.includes('welcome-toast=2')) {
console.log('Welcome to Next.js Commerce!');
toast('🛍️ Welcome to Next.js Commerce!', {
id: 'welcome-toast',
duration: Infinity,
onDismiss: () => {
document.cookie += 'welcome-toast=2;max-age=31536000';
},
description: (
<>
This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '}
<a
href="https://github.com/vercel/commerce"
className="text-blue-600 hover:underline"
target="_blank"
>
Get the Source
</a>
.
</>
)
});
}
}, []);
return null;
}

3
package.json
View File

@ -19,7 +19,8 @@
"geist": "^1.3.1", "geist": "^1.3.1",
"next": "14.2.5", "next": "14.2.5",
"react": "18.3.1", "react": "18.3.1",
"react-dom": "18.3.1" "react-dom": "18.3.1",
"sonner": "^1.5.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",

14
pnpm-lock.yaml generated
View File

@ -29,6 +29,9 @@ importers:
react-dom: react-dom:
specifier: 18.3.1 specifier: 18.3.1
version: 18.3.1(react@18.3.1) version: 18.3.1(react@18.3.1)
sonner:
specifier: ^1.5.0
version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
devDependencies: devDependencies:
'@tailwindcss/container-queries': '@tailwindcss/container-queries':
specifier: ^0.1.1 specifier: ^0.1.1
@ -749,6 +752,12 @@ packages:
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
engines: {node: '>=14'} engines: {node: '>=14'}
sonner@1.5.0:
resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
peerDependencies:
react: ^18.0.0
react-dom: ^18.0.0
source-map-js@1.2.0: source-map-js@1.2.0:
resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
@ -1435,6 +1444,11 @@ snapshots:
signal-exit@4.1.0: {} signal-exit@4.1.0: {}
sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
source-map-js@1.2.0: {} source-map-js@1.2.0: {}
streamsearch@1.1.0: {} streamsearch@1.1.0: {}