diff --git a/.env.example b/.env.example index 98a9ea045..c612a4b7c 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,6 @@ TWITTER_CREATOR="@medusajs" TWITTER_SITE="https://medusajs.com/" SITE_NAME="Next.js Commerce by Medusa" -NEXT_PUBLIC_MEDUSA_BACKEND_API="http://localhost:9000/store" +NEXT_PUBLIC_MEDUSA_BACKEND_API="http://localhost:9000" NEXT_PUBLIC_VERCEL_URL="http://localhost:3000" MEDUSA_API_KEY="" \ No newline at end of file diff --git a/README.md b/README.md index 04cd77a0d..819651367 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmedusajs%2Fcommerce&env=MEDUSA_API_KEY,SITE_NAME,NEXT_PUBLIC_MEDUSA_BACKEND_API,NEXT_PUBLIC_VERCEL_URL,TWITTER_SITE,TWITTER_CREATOR&project-name=medusa-nextjs-commerce&repository-name=medusa-nextjs-commerce&redirect-url=https%3A%2F%2Fdocs.medusajs.com%2F%3Futm_source%3Dvercel%26utm_medium%3Ddeploy%2Bbutton%26utm_campaign%3Dcommerce&demo-title=Next.js%20Commerce%20by%20Medusa&demo-description=A%20Next.js%2013%20and%20ecommerce%20template%2C%20built%20with%20Medusa.&demo-url=https%3A%2F%2Fmedusa-nextjs-commerce.vercel.app%2F&demo-image=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62591822%3Fs%3D200%26v%3D4) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmedusajs%2Fvercel-commerce&env=MEDUSA_API_KEY,SITE_NAME,NEXT_PUBLIC_MEDUSA_BACKEND_API,NEXT_PUBLIC_VERCEL_URL,TWITTER_SITE,TWITTER_CREATOR&project-name=medusa-nextjs-commerce&repository-name=medusa-nextjs-commerce&redirect-url=https%3A%2F%2Fdocs.medusajs.com%2F%3Futm_source%3Dvercel%26utm_medium%3Ddeploy%2Bbutton%26utm_campaign%3Dcommerce&demo-title=Next.js%20Commerce%20by%20Medusa&demo-description=A%20Next.js%2013%20and%20ecommerce%20template%2C%20built%20with%20Medusa.&demo-url=https%3A%2F%2Fmedusa-nextjs-commerce.vercel.app%2F&demo-image=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F62591822%3Fs%3D200%26v%3D4) # Next.js Commerce x Medusa @@ -93,6 +93,8 @@ Medusa comes with a few demo products, but they won't show up in the template by 1. Install the [Medusa Admin plugin](https://docs.medusajs.com/admin/quickstart) 2. Enable the [Product Categories feature flag](https://docs.medusajs.com/modules/products/categories) 3. Log in to the admin dashboard and create the following product categories: -- hidden-homepage-carousel -- hidden-homepage-featured-items + + - hidden-homepage-carousel + - hidden-homepage-featured-items + 4. Assign a few products to both categories and they should now show up on the homepage! diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx index d2faf9760..aa29e26ab 100644 --- a/app/[page]/page.tsx +++ b/app/[page]/page.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import Prose from 'components/prose'; +import { CHECKOUT_PAGE_PROPS } from 'lib/constants'; import { notFound } from 'next/navigation'; export const runtime = 'edge'; @@ -12,13 +13,15 @@ export async function generateMetadata({ }: { params: { page: string }; }): Promise { - const page: any = null; + let page; + + params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS); if (!page) return notFound(); return { - title: page.seo?.title || page.title, - description: page.seo?.description || page.bodySummary, + title: page.title, + description: '', openGraph: { images: [ { @@ -35,7 +38,9 @@ export async function generateMetadata({ } export default async function Page({ params }: { params: { page: string } }) { - const page: any = null; + let page; + + params.page === 'checkout' && (page = CHECKOUT_PAGE_PROPS); if (!page) return notFound(); diff --git a/app/page.tsx b/app/page.tsx index 7b400c45a..ecc845f11 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,6 +5,8 @@ import { Suspense } from 'react'; export const runtime = 'edge'; +export const revalidate = parseInt(process.env.REVALIDATE_WINDOW ?? `${60 * 60 * 12}`); // 12 hours + export const metadata = { description: 'High-performance ecommerce store built with Next.js, Vercel, and Medusa.', openGraph: { diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index 9cbf8ea58..ce924f09e 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -14,7 +14,6 @@ import { getProduct } from 'lib/medusa'; import { Image } from 'lib/medusa/types'; export const runtime = 'edge'; -export const revalidate = 30; export async function generateMetadata({ params diff --git a/components/icons/medusa.tsx b/components/icons/medusa.tsx new file mode 100644 index 000000000..28ba368d8 --- /dev/null +++ b/components/icons/medusa.tsx @@ -0,0 +1,41 @@ +export default function MedusaIcon({ className }: { className?: string }) { + return ( + + + + + + + + + + ); +} diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index e6a68febd..c97593ead 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import GitHubIcon from 'components/icons/github'; import LogoIcon from 'components/icons/logo'; -import VercelIcon from 'components/icons/vercel'; +import MedusaIcon from 'components/icons/medusa'; import { getMenu } from 'lib/medusa'; import { Menu } from 'lib/medusa/types'; @@ -42,7 +42,7 @@ export default async function Footer() { ) : null}
- +
@@ -55,12 +55,12 @@ export default async function Footer() { Created by - + diff --git a/lib/constants.tsx b/lib/constants.tsx index 49e059002..f3924e232 100644 --- a/lib/constants.tsx +++ b/lib/constants.tsx @@ -22,3 +22,12 @@ export const sorting: SortFilterItem[] = [ export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'; export const DEFAULT_OPTION = 'Default Title'; + +export const CHECKOUT_PAGE_PROPS = { + title: 'Checkout', + body: `Checkout is not implemented yet in this template. Check out + our guide on implementing a checkout flow to learn more.`, + description: 'Checkout is not implemented yet in this template', + updatedAt: new Date().toISOString(), + createdAt: new Date().toISOString() +}; diff --git a/lib/medusa/index.ts b/lib/medusa/index.ts index 3c1c54347..f68e95017 100644 --- a/lib/medusa/index.ts +++ b/lib/medusa/index.ts @@ -19,7 +19,7 @@ import { SelectedOption } from './types'; -const ENDPOINT = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_API; +const ENDPOINT = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_API ?? 'http://localhost:9000'; const MEDUSA_API_KEY = process.env.MEDUSA_API_KEY ?? ''; const REVALIDATE_WINDOW = parseInt(process.env.REVALIDATE_WINDOW ?? `${60 * 15}`); // 15 minutes @@ -45,7 +45,7 @@ export default async function medusaRequest( } try { - const result = await fetch(`${ENDPOINT}${path}`, options); + const result = await fetch(`${ENDPOINT}/store${path}`, options); const body = await result.json(); @@ -74,7 +74,7 @@ export default async function medusaRequest( const reshapeCart = (cart: MedusaCart): Cart => { const lines = cart?.items?.map((item) => reshapeLineItem(item)) || []; const totalQuantity = lines.reduce((a, b) => a + b.quantity, 0); - const checkoutUrl = '/'; + const checkoutUrl = '/checkout'; // todo: implement medusa checkout flow const currencyCode = cart.region?.currency_code.toUpperCase() || 'USD'; let subtotalAmount = '0'; @@ -145,7 +145,7 @@ const reshapeLineItem = (lineItem: MedusaLineItem): CartItem => { id: lineItem.variant_id || lineItem.id, selectedOptions, product, - title: lineItem.title + title: lineItem.description ?? '' }; const cost = {