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 faqs section

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-06-14 16:50:46 +07:00
parent a27b02f953
commit c5af5b3069
8 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,7 @@ async function CategoryPage({
<MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
<SortingMenu />
</div>
<Grid className="grid-cols-1 sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
<Grid className="hide-scrollbar max-h-[1000px] grid-cols-1 overflow-y-auto sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
@@ -81,38 +81,43 @@ export default async function CategorySearchPage(props: {
searchParams?: { [key: string]: string | string[] | undefined };
}) {
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="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>
</>
);
}

5
app/search/layout.tsx
View File

@@ -1,12 +1,15 @@
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-4 lg:min-h-[800px]">
<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" />
<Footer />
</>
);