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 inlinking transmission code block

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-07-03 12:56:50 +07:00
parent 020b21892d
commit 87a6fe188c
9 changed files with 225 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/search/[collection]/loading.tsx Normal file
View File

@@ -0,0 +1,31 @@
import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
import { YMMFiltersPlaceholder } from 'components/filters';
import { FiltersListPlaceholder } from 'components/layout/search/filters/filters-container';
import { HeaderPlaceholder } from 'components/layout/search/header';
import ProductsGridPlaceholder from 'components/layout/search/placeholder';
const Loading = () => {
return (
<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">
<YMMFiltersPlaceholder />
</div>
<h3 className="sr-only">Filters</h3>
<FiltersListPlaceholder />
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<div className="mb-2">
<BreadcrumbHome />
</div>
<HeaderPlaceholder />
<ProductsGridPlaceholder />
</div>
</div>
</div>
);
};
export default Loading;

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

@@ -18,6 +18,9 @@ import Header, { HeaderPlaceholder } from 'components/layout/search/header';
import HelpfulLinks from 'components/layout/search/helpful-links';
import ProductsGridPlaceholder from 'components/layout/search/placeholder';
import SortingMenu from 'components/layout/search/sorting-menu';
import TransmissionCode from 'components/transmission-codes';
import TransmissionModels from 'components/transmission-model';
import { MAKE_FILTER_ID } from 'lib/constants';
import { Suspense } from 'react';
export async function generateMetadata({
@@ -79,6 +82,7 @@ export default async function CategorySearchPage(props: {
params: { collection: string };
searchParams?: { [key: string]: string | string[] | undefined };
}) {
const collectionHandle = props.params.collection;
return (
<>
<div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
@@ -90,44 +94,49 @@ export default async function CategorySearchPage(props: {
</Suspense>
</div>
<SubMenu collection={props.params.collection} />
<SubMenu collection={collectionHandle} />
<h3 className="sr-only">Filters</h3>
<Suspense
fallback={<FiltersListPlaceholder />}
key={`filters-${props.params.collection}`}
>
<FiltersContainer
searchParams={props.searchParams}
collection={props.params.collection}
/>
<HelpfulLinks collection={props.params.collection} />
<Suspense fallback={<FiltersListPlaceholder />} key={`filters-${collectionHandle}`}>
<FiltersContainer searchParams={props.searchParams} collection={collectionHandle} />
<HelpfulLinks collection={collectionHandle} />
</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 fallback={<BreadcrumbHome />} key={`breadcrumb-${collectionHandle}`}>
<Breadcrumb type="collection" handle={collectionHandle} />
</Suspense>
</div>
<Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
<Header collection={props.params.collection} />
<Suspense fallback={<HeaderPlaceholder />} key={`header-${collectionHandle}`}>
<Header collection={collectionHandle} />
</Suspense>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<Suspense fallback={<ProductsGridPlaceholder />} key={`products-${collectionHandle}`}>
<CategoryPage {...props} />
</Suspense>
</div>
</div>
</div>
<FAQ handle="plp-faqs" />
{collectionHandle.startsWith('transmissions') && (
<>
<Suspense>
<TransmissionCode
collectionHandle={collectionHandle}
make={props.searchParams?.[MAKE_FILTER_ID] as string | undefined}
/>
</Suspense>
<Suspense>
<TransmissionModels
collectionHandle={collectionHandle}
make={props.searchParams?.[MAKE_FILTER_ID] as string | undefined}
/>
</Suspense>
</>
)}
<Suspense>
<Manufacturers
variant={
(props.params.collection as string).includes('engines') ? 'engines' : 'transmissions'
}
variant={(collectionHandle as string).includes('engines') ? 'engines' : 'transmissions'}
/>
</Suspense>
</>