feat: homepage and integrate with shopify page

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-27 16:48:22 +07:00
parent e0da620ac9
commit 8f0801689c
26 changed files with 369 additions and 107 deletions

View File

@@ -4,7 +4,7 @@ import { getCollection } from 'lib/shopify';
export const runtime = 'edge';
export default async function Image({ params }: { params: { collection: string } }) {
const collection = await getCollection(params.collection);
const collection = await getCollection({ handle: params.collection });
const title = collection?.seo?.title || collection?.title;
return await OpengraphImage({ title });

View File

@@ -23,7 +23,7 @@ export async function generateMetadata({
}: {
params: { collection: string };
}): Promise<Metadata> {
const collection = await getCollection(params.collection);
const collection = await getCollection({ handle: params.collection });
if (!collection) return notFound();
@@ -86,11 +86,11 @@ export default function CategorySearchPage(props: {
return (
<>
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />} key={props.params.collection}>
<Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
<Breadcrumb type="collection" handle={props.params.collection} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={props.params.collection}>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
</Suspense>
<div className="my-3">
@@ -98,7 +98,7 @@ export default function CategorySearchPage(props: {
<YMMFilters />
</Suspense>
</div>
<Suspense fallback={<ProductsGridPlaceholder />} key={props.params.collection}>
<Suspense fallback={<ProductsGridPlaceholder />} key={`products-${props.params.collection}`}>
<CategoryPage {...props} />
</Suspense>
</>

View File

@@ -3,7 +3,7 @@ import Footer from 'components/layout/footer';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className="mx-auto min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
<div className="mx-auto mt-4 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
{children}
</div>
<Footer />