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

add product route, separate layouts between home & pages

Browse Source
This commit is contained in:
andr-ew 2023-06-21 18:53:04 -05:00
parent c174b6ad79
commit f0187e9f7a
7 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/(home)/layout.js Normal file
View File

@ -0,0 +1,14 @@
import { TypesNav } from '/components/home.js';
export default function HomeLayout({ children }) {
return (
<>
<header>
<nav>
<TypesNav />
</nav>
</header>
<main>{children}</main>
</>
);
}

0
app/page.js → app/(home)/page.js
View File

0
app/search/[collection]/page.js → app/(home)/search/[collection]/page.js
View File

12
app/(page)/layout.js Normal file
View File

@ -0,0 +1,12 @@
export default function ProductLayout({ children }) {
return (
<>
{/* <header> */}
{/* <nav> */}
{/* <a>back</a> */}
{/* </nav> */}
{/* </header> */}
<main>{children}</main>
</>
);
}

17
app/(page)/product/[handle]/page.js Normal file
View File

@ -0,0 +1,17 @@
import { getProducts } from 'lib/shopify';
export async function generateStaticParams() {
const products = await getProducts({
sortKey: 'UPDATED_AT',
reverse: false,
query: '',
});
console.log({ products });
return products.map(product => ({ product: product.handle }));
}
export default async function ProductPage({ params: { handle } }) {
return <h1>{handle}</h1>;
}

9
app/layout.js
View File

@ -1,14 +1,7 @@
import { TypesNav } from '/components/home.js';
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang='en'> <html lang='en'>
<body> <body>{children}</body>
<nav>
<TypesNav />
</nav>
<main>{children}</main>
</body>
</html> </html>
); );
} }

2
components/home.js
View File

@ -61,7 +61,7 @@ export async function HomeProduct({ product }) {
const collections = product?.collections?.nodes; const collections = product?.collections?.nodes;
return ( return (
<Link href={`/${product?.handle}`}> <Link href={`/product/${product?.handle}`}>
<Image <Image
src={featuredImage?.url} src={featuredImage?.url}
alt={featuredImage?.altText} alt={featuredImage?.altText}