crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-25 11:11:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Iterations and TS error fixes

Browse Source
This commit is contained in:
Henrik Larsson
2023-05-05 10:12:15 +02:00
parent c68f95e454
commit 4bf59a61f6
26 changed files with 111 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/[locale]/[[...slug]]/category-page.tsx
View File

@@ -7,7 +7,6 @@ interface CategoryPageProps {
// has access to state and effects just like Page components
// in the `pages` directory.
export default function ProductPage({data }: CategoryPageProps) {
console.log(data);
return (
<>Category page</>

4
app/[locale]/[[...slug]]/page.tsx
View File

@@ -14,8 +14,6 @@ export async function generateStaticParams() {
next: { revalidate: 10 },
})
// console.log(paths)
return paths.map((path: {
slug: string,
locale: string
@@ -52,7 +50,7 @@ export default async function Page({
}) {
const { slug, locale } = params;
const { query, queryParams, docType } = getQueryFromSlug(slug, locale)
const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale)
const pageData = await client.fetch(query, queryParams)

5
app/[locale]/[[...slug]]/product-page.tsx
View File

@@ -1,4 +1,5 @@
import ProductView from "components/product/product-view";
import { notFound } from "next/navigation";
interface ProductPageProps {
data: object | any
@@ -8,6 +9,10 @@ interface ProductPageProps {
// has access to state and effects just like Page components
// in the `pages` directory.
export default function ProductPage({data }: ProductPageProps) {
if (!data) {
return notFound();
}
const { product } = data;
return (

9
app/[locale]/globals.css
View File

@@ -39,6 +39,15 @@ body {
}
/* COMPONENTS */
.glider {
scrollbar-width: none;
-ms-overflow-style: none;
}
.glider::-webkit-scrollbar {
display: none;
}
.glider-dots {
@apply flex !space-x-[2px] !mt-8;
}

4
app/[locale]/layout.tsx
View File

@@ -57,7 +57,9 @@ export default async function LocaleLayout({children, params: {locale}}: LocaleL
<body className="flex flex-col min-h-screen">
<NextIntlClientProvider locale={locale} messages={messages}>
<Header />
<main className="flex-1">{children}</main>
<main className="flex-1">
{children}
</main>
<Footer />
</NextIntlClientProvider>
</body>

112
app/[locale]/product/[handle]/page.tsx
View File

@@ -1,112 +0,0 @@
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { Suspense } from 'react';
import Grid from 'components/grid';
import Footer from 'components/layout/footer';
import ProductGridItems from 'components/layout/product-grid-items';
import { AddToCart } from 'components/product/add-to-cart';
import { Gallery } from 'components/product/gallery';
import { VariantSelector } from 'components/product/variant-selector';
import Prose from 'components/prose';
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
import { getProduct, getProductRecommendations } from 'lib/shopify';
import { Image } from 'lib/shopify/types';
export const runtime = 'edge';
export async function generateMetadata({
params
}: {
params: { handle: string };
}): Promise<Metadata> {
const product = await getProduct(params.handle);
if (!product) return notFound();
const { url, width, height, altText: alt } = product.featuredImage || {};
const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
return {
title: product.seo.title || product.title,
description: product.seo.description || product.description,
robots: {
index: hide,
follow: hide,
googleBot: {
index: hide,
follow: hide
}
},
openGraph: url
? {
images: [
{
url,
width,
height,
alt
}
]
}
: null
};
}
export default async function ProductPage({ params }: { params: { handle: string } }) {
const product = await getProduct(params.handle);
if (!product) return notFound();
return (
<div>
<div className="lg:grid lg:grid-cols-6">
<div className="lg:col-span-4">
<Gallery
title={product.title}
amount={product.priceRange.maxVariantPrice.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
images={product.images.map((image: Image) => ({
src: image.url,
altText: image.altText
}))}
/>
</div>
<div className="p-6 lg:col-span-2">
{/* @ts-expect-error Server Component */}
<VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? (
<Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
</div>
</div>
<Suspense>
{/* @ts-expect-error Server Component */}
<RelatedProducts id={product.id} />
<Suspense>
{/* @ts-expect-error Server Component */}
<Footer />
</Suspense>
</Suspense>
</div>
);
}
async function RelatedProducts({ id }: { id: string }) {
const relatedProducts = await getProductRecommendations(id);
if (!relatedProducts.length) return null;
return (
<div className="px-4 py-8">
<div className="mb-4 text-3xl font-bold">Related Products</div>
<Grid className="grid-cols-2 lg:grid-cols-5">
<ProductGridItems products={relatedProducts} />
</Grid>
</div>
);
}

21
app/sitemap.ts
View File

@@ -1,4 +1,3 @@
import { getCollections, getPages, getProducts } from 'lib/shopify';
import { MetadataRoute } from 'next';
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
@@ -11,23 +10,5 @@ export default async function sitemap(): Promise<Promise<Promise<MetadataRoute.S
lastModified: new Date().toISOString()
}));
const collections = await getCollections();
const collectionsMap = collections.map((collection) => ({
url: `${baseUrl}${collection.path}`,
lastModified: collection.updatedAt
}));
const products = await getProducts({});
const productsMap = products.map((product) => ({
url: `${baseUrl}/product/${product.handle}`,
lastModified: product.updatedAt
}));
const pages = await getPages();
const pagesMap = pages.map((page) => ({
url: `${baseUrl}/${page.handle}`,
lastModified: page.updatedAt
}));
return [...routesMap, ...collectionsMap, ...productsMap, ...pagesMap];
return [...routesMap];
}