Update for workers

opennextjs · Sep 30, 2024 · 8a6495f · 8a6495f
1 parent 560ee3b
commit 8a6495f
Show file tree

Hide file tree

Showing 12 changed files with 1,612 additions and 48 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,4 @@
+# vercel-commerce uses a different react version
+# and the build work break when symlinks are used
+# See https://stackoverflow.com/a/65638449
+node-linker=hoisted
diff --git a/examples/vercel-commerce/.gitignore b/examples/vercel-commerce/.gitignore
@@ -36,3 +36,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cf
+.dev.vars
+.wrangler
+.worker-next
diff --git a/examples/vercel-commerce/README.md b/examples/vercel-commerce/README.md
@@ -33,6 +33,7 @@ Vercel is happy to partner and work with any commerce provider to help them get
 Integrations enable upgraded or additional functionality for Next.js Commerce
 
 - [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
+
   - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
   - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
 

diff --git a/examples/vercel-commerce/app/layout.tsx b/examples/vercel-commerce/app/layout.tsx
@@ -1,12 +1,10 @@
 import { CartProvider } from 'components/cart/cart-context';
 import { Navbar } from 'components/layout/navbar';
-import { WelcomeToast } from 'components/welcome-toast';
 import { GeistSans } from 'geist/font/sans';
 import { getCart } from 'lib/shopify';
 import { ensureStartsWith } from 'lib/utils';
 import { cookies } from 'next/headers';
 import { ReactNode } from 'react';
-import { Toaster } from 'sonner';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -46,11 +44,7 @@ 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">
         <CartProvider cartPromise={cart}>
           <Navbar />
-          <main>
-            {children}
-            <Toaster closeButton />
-            <WelcomeToast />
-          </main>
+          <main>{children}</main>
         </CartProvider>
       </body>
     </html>

diff --git a/examples/vercel-commerce/components/carousel.tsx b/examples/vercel-commerce/components/carousel.tsx
@@ -4,7 +4,7 @@ import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
+  const products = await getCollectionProducts({ collection: 'latest-stuff' });
 
   if (!products?.length) return null;
 

diff --git a/examples/vercel-commerce/components/grid/three-items.tsx b/examples/vercel-commerce/components/grid/three-items.tsx
@@ -44,7 +44,7 @@ function ThreeItemGridItem({
 export async function ThreeItemGrid() {
   // Collections that start with `hidden-*` are hidden from the search page.
   const homepageItems = await getCollectionProducts({
-    collection: 'hidden-homepage-featured-items'
+    collection: 'summer-collection'
   });
 
   if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;

diff --git a/examples/vercel-commerce/components/welcome-toast.tsx b/examples/vercel-commerce/components/welcome-toast.tsx
@@ -1,35 +1,9 @@
 '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')) {
-      toast('🛍️ Welcome to Next.js Commerce!', {
-        id: 'welcome-toast',
-        duration: Infinity,
-        onDismiss: () => {
-          document.cookie = 'welcome-toast=2; max-age=31536000; path=/';
-        },
-        description: (
-          <>
-            This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '}
-            <a
-              href="https://vercel.com/templates/next.js/nextjs-commerce"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-            >
-              Deploy your own
-            </a>
-            .
-          </>
-        )
-      });
-    }
-  }, []);
+  useEffect(() => {}, []);
 
   return null;
 }
diff --git a/examples/vercel-commerce/lib/shopify/index.ts b/examples/vercel-commerce/lib/shopify/index.ts
@@ -181,7 +181,10 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
   return {
     ...rest,
     images: reshapeImages(images, product.title),
-    variants: removeEdgesAndNodes(variants)
+    variants: removeEdgesAndNodes(variants).map((v) =>
+      // We'll make at least one variant unavailable for sale to demonstrate the feature.
+      v.title === 'Vintage Black / L' ? { ...v, availableForSale: false } : v
+    )
   };
 };
 
@@ -333,14 +336,29 @@ export async function getCollections(): Promise<Collection[]> {
     // Filter out the `hidden` collections.
     // Collections that start with `hidden-*` need to be hidden on the search page.
     ...reshapeCollections(shopifyCollections).filter(
-      (collection) => !collection.handle.startsWith('hidden')
+      (collection) =>
+        !collection.handle.startsWith('hidden') &&
+        // These collections have no products
+        !['antiperistaltic-gold-socks', 'blistered-aluminum-boat', 'frontpage'].includes(
+          collection.handle
+        )
     )
   ];
 
   return collections;
 }
 
 export async function getMenu(handle: string): Promise<Menu[]> {
+  if (handle === 'next-js-frontend-header-menu') {
+    return [
+      { title: 'All', path: '/search' },
+      { title: 'Latest Stuff', path: '/search/latest-stuff' },
+      { title: 'Casual Things', path: '/search/casual-things' }
+    ];
+  } else if (handle === 'next-js-frontend-footer-menu') {
+    return [{ title: 'Home', path: '/' }];
+  }
+
   const res = await shopifyFetch<ShopifyMenuOperation>({
     query: getMenuQuery,
     tags: [TAGS.collections],

diff --git a/examples/vercel-commerce/package.json b/examples/vercel-commerce/package.json
@@ -1,4 +1,5 @@
 {
+  "name": "vercel-commerce",
   "private": true,
   "engines": {
     "node": ">=20",
@@ -20,7 +21,8 @@
     "next": "15.0.0-canary.113",
     "react": "19.0.0-rc-3208e73e-20240730",
     "react-dom": "19.0.0-rc-3208e73e-20240730",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "wrangler": "catalog:"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",