Skip to content

Commit 80edb44

Browse files
vicbvicb
committed
Update for workers
1 parent 53f5bb9 commit 80edb44

File tree

12 files changed

+1612
-48
lines changed

12 files changed

+1612
-48
lines changed

‎.npmrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# vercel-commerce uses a different react version
2+
# and the build work break when symlinks are used
3+
# See https://stackoverflow.com/a/65638449
4+
node-linker=hoisted

‎examples/vercel-commerce/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,8 @@ yarn-error.log*
3636
# typescript
3737
*.tsbuildinfo
3838
next-env.d.ts
39+
40+
# cf
41+
.dev.vars
42+
.wrangler
43+
.worker-next

‎examples/vercel-commerce/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ Vercel is happy to partner and work with any commerce provider to help them get
3333
Integrations enable upgraded or additional functionality for Next.js Commerce
3434

3535
- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
36+
3637
- Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
3738
- Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
3839

‎examples/vercel-commerce/app/layout.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { CartProvider } from 'components/cart/cart-context';
22
import { Navbar } from 'components/layout/navbar';
3-
import { WelcomeToast } from 'components/welcome-toast';
43
import { GeistSans } from 'geist/font/sans';
54
import { getCart } from 'lib/shopify';
65
import { ensureStartsWith } from 'lib/utils';
76
import { cookies } from 'next/headers';
87
import { ReactNode } from 'react';
9-
import { Toaster } from 'sonner';
108
import './globals.css';
119

1210
const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -46,11 +44,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
4644
<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">
4745
<CartProvider cartPromise={cart}>
4846
<Navbar />
49-
<main>
50-
{children}
51-
<Toaster closeButton />
52-
<WelcomeToast />
53-
</main>
47+
<main>{children}</main>
5448
</CartProvider>
5549
</body>
5650
</html>

‎examples/vercel-commerce/components/carousel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { GridTileImage } from './grid/tile';
44

55
export async function Carousel() {
66
// Collections that start with `hidden-*` are hidden from the search page.
7-
const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
7+
const products = await getCollectionProducts({ collection: 'latest-stuff' });
88

99
if (!products?.length) return null;
1010

‎examples/vercel-commerce/components/grid/three-items.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function ThreeItemGridItem({
4444
export async function ThreeItemGrid() {
4545
// Collections that start with `hidden-*` are hidden from the search page.
4646
const homepageItems = await getCollectionProducts({
47-
collection: 'hidden-homepage-featured-items'
47+
collection: 'summer-collection'
4848
});
4949

5050
if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;

‎examples/vercel-commerce/components/welcome-toast.tsx‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
11
'use client';
22

33
import { useEffect } from 'react';
4-
import { toast } from 'sonner';
54

65
export function WelcomeToast() {
7-
useEffect(() => {
8-
// ignore if screen height is too small
9-
if (window.innerHeight < 650) return;
10-
if (!document.cookie.includes('welcome-toast=2')) {
11-
toast('🛍️ Welcome to Next.js Commerce!', {
12-
id: 'welcome-toast',
13-
duration: Infinity,
14-
onDismiss: () => {
15-
document.cookie = 'welcome-toast=2; max-age=31536000; path=/';
16-
},
17-
description: (
18-
<>
19-
This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '}
20-
<a
21-
href="https://vercel.com/templates/next.js/nextjs-commerce"
22-
className="text-blue-600 hover:underline"
23-
target="_blank"
24-
>
25-
Deploy your own
26-
</a>
27-
.
28-
</>
29-
)
30-
});
31-
}
32-
}, []);
6+
useEffect(() => {}, []);
337

348
return null;
359
}

‎examples/vercel-commerce/lib/shopify/index.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,10 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
181181
return {
182182
...rest,
183183
images: reshapeImages(images, product.title),
184-
variants: removeEdgesAndNodes(variants)
184+
variants: removeEdgesAndNodes(variants).map((v) =>
185+
// We'll make at least one variant unavailable for sale to demonstrate the feature.
186+
v.title === 'Vintage Black / L' ? { ...v, availableForSale: false } : v
187+
)
185188
};
186189
};
187190

@@ -333,14 +336,29 @@ export async function getCollections(): Promise<Collection[]> {
333336
// Filter out the `hidden` collections.
334337
// Collections that start with `hidden-*` need to be hidden on the search page.
335338
...reshapeCollections(shopifyCollections).filter(
336-
(collection) => !collection.handle.startsWith('hidden')
339+
(collection) =>
340+
!collection.handle.startsWith('hidden') &&
341+
// These collections have no products
342+
!['antiperistaltic-gold-socks', 'blistered-aluminum-boat', 'frontpage'].includes(
343+
collection.handle
344+
)
337345
)
338346
];
339347

340348
return collections;
341349
}
342350

343351
export async function getMenu(handle: string): Promise<Menu[]> {
352+
if (handle === 'next-js-frontend-header-menu') {
353+
return [
354+
{ title: 'All', path: '/search' },
355+
{ title: 'Latest Stuff', path: '/search/latest-stuff' },
356+
{ title: 'Casual Things', path: '/search/casual-things' }
357+
];
358+
} else if (handle === 'next-js-frontend-footer-menu') {
359+
return [{ title: 'Home', path: '/' }];
360+
}
361+
344362
const res = await shopifyFetch<ShopifyMenuOperation>({
345363
query: getMenuQuery,
346364
tags: [TAGS.collections],

‎examples/vercel-commerce/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"name": "vercel-commerce",
23
"private": true,
34
"engines": {
45
"node": ">=20",
@@ -20,7 +21,8 @@
2021
"next": "15.0.0-canary.113",
2122
"react": "19.0.0-rc-3208e73e-20240730",
2223
"react-dom": "19.0.0-rc-3208e73e-20240730",
23-
"sonner": "^1.5.0"
24+
"sonner": "^1.5.0",
25+
"wrangler": "catalog:"
2426
},
2527
"devDependencies": {
2628
"@tailwindcss/container-queries": "^0.1.1",

0 commit comments

Comments
 (0)