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

feat: add manufacturer section

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-06-14 17:31:30 +07:00
parent c5af5b3069
commit 3ac4b140c9
6 changed files with 109 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/search/[collection]/page.tsx
View File

@@ -4,8 +4,10 @@ import { notFound } from 'next/navigation';
import Breadcrumb from 'components/breadcrumb';
import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
import FAQ from 'components/faq';
import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
import Grid from 'components/grid';
import Manufacturers from 'components/home-page/manufacturers';
import ProductsList from 'components/layout/products-list';
import { getProductsInCollection } from 'components/layout/products-list/actions';
import FiltersContainer, {
@@ -82,42 +84,52 @@ export default async function CategorySearchPage(props: {
}) {
return (
<>
<div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
<aside className="hidden lg:block">
<div className="mb-5">
<Suspense fallback={<YMMFiltersPlaceholder />}>
<YMMFilters />
<div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
<div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
<aside className="hidden lg:block">
<div className="mb-5">
<Suspense fallback={<YMMFiltersPlaceholder />}>
<YMMFilters />
</Suspense>
</div>
<SubMenu collection={props.params.collection} />
<h3 className="sr-only">Filters</h3>
<Suspense
fallback={<FiltersListPlaceholder />}
key={`filters-${props.params.collection}`}
>
<FiltersContainer searchParams={props.searchParams} />
<HelpfulLinks collection={props.params.collection} />
</Suspense>
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
<Breadcrumb type="collection" handle={props.params.collection} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
</Suspense>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<CategoryPage {...props} />
</Suspense>
</div>
<SubMenu collection={props.params.collection} />
<h3 className="sr-only">Filters</h3>
<Suspense
fallback={<FiltersListPlaceholder />}
key={`filters-${props.params.collection}`}
>
<FiltersContainer searchParams={props.searchParams} />
<HelpfulLinks collection={props.params.collection} />
</Suspense>
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
<Breadcrumb type="collection" handle={props.params.collection} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
</Suspense>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<CategoryPage {...props} />
</Suspense>
</div>
</div>
<FAQ handle="plp-faqs" />
<Suspense>
<Manufacturers
variant={
(props.params.collection as string).includes('engines') ? 'engines' : 'transmissions'
}
/>
</Suspense>
</>
);
}

7
app/search/layout.tsx
View File

@@ -1,14 +1,9 @@
import FAQ from 'components/faq';
import Footer from 'components/layout/footer';
import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-10 lg:min-h-[800px]">
<Suspense>{children}</Suspense>
</div>
<FAQ handle="plp-faqs" />
<div className="min-h-[500px] lg:min-h-[800px]">{children}</div>
<Footer />
</>