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

feat: modify PLP layout

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-06 17:02:10 +07:00
parent e0cd6ac2bd
commit 913e7a1809
12 changed files with 333 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/globals.css
View File

@@ -2,12 +2,6 @@
@tailwind components;
@tailwind utilities;
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
img[loading='lazy'] {
clip-path: inset(0.6px);

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

@@ -2,9 +2,14 @@ import { getCollection, getCollectionProducts } from 'lib/shopify';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Breadcrumb from 'components/breadcrumb';
import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
import Grid from 'components/grid';
import ProductGridItems from 'components/layout/product-grid-items';
import Filters from 'components/layout/search/filters';
import SortingMenu from 'components/layout/search/sorting-menu';
import { defaultSort, sorting } from 'lib/constants';
import { Suspense } from 'react';
export const runtime = 'edge';
@@ -33,17 +38,43 @@ export default async function CategoryPage({
}) {
const { sort } = searchParams as { [key: string]: string };
const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
const productsData = getCollectionProducts({ collection: params.collection, sortKey, reverse });
const collectionData = getCollection(params.collection);
const [products, collection] = await Promise.all([productsData, collectionData]);
return (
<section>
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
)}
</section>
<>
<div className="mb-2">
<Suspense fallback={<BreadcrumbHome />}>
<Breadcrumb type="collection" handle={params.collection} />
</Suspense>
</div>
{collection ? (
<div className="mb-1 mt-3 max-w-5xl">
<h1 className="text-4xl font-bold tracking-tight text-gray-900">{collection.title}</h1>
<p className="mt-2 text-base text-gray-500">{collection.description}</p>
</div>
) : null}
<div className="flex w-full justify-end">
<SortingMenu />
</div>
<section className="mt-3 border-t pt-2">
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
<Grid className="pt-5 lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
<aside className="hidden lg:block">
<Filters collection={params.collection} />
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
</div>
</Grid>
)}
</section>
</>
);
}

13
app/search/layout.tsx
View File

@@ -1,21 +1,10 @@
import Footer from 'components/layout/footer';
import Collections from 'components/layout/search/collections';
import FilterList from 'components/layout/search/filter';
import { sorting } from 'lib/constants';
import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
<div className="order-first w-full flex-none md:max-w-[125px]">
<Collections />
</div>
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
<div className="order-none flex-none md:order-last md:w-[125px]">
<FilterList list={sorting} title="Sort by" />
</div>
</div>
<div className="mx-auto max-w-screen-2xl px-8 pb-4">{children}</div>
<Footer />
</Suspense>
);