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

Merge remote-tracking branch 'origin' into CPP-153

Browse Source
This commit is contained in:
tedraykov
2024-06-20 14:52:30 +03:00
parent c141a3f56a cc3982288a
commit f90da11e31
39 changed files with 1035 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/globals.css
View File

@@ -13,3 +13,16 @@ input,
button {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
}
@layer utilities {
/* Hide scrollbar for WebKit browsers */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
}

2
app/layout.tsx
View File

@@ -35,7 +35,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<body className="bg-white text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<header>
<Banner />
<Navbar />

2
app/page.tsx
View File

@@ -34,7 +34,7 @@ export default async function HomePage() {
<WhyChoose />
</Suspense>
<Suspense>
<FAQ />
<FAQ handle="home-page-faqs" />
</Suspense>
<Suspense>
<Manufacturers />

16
app/product/[handle]/page.tsx
View File

@@ -81,12 +81,16 @@ export default async function ProductPage({ params }: { params: { handle: string
__html: JSON.stringify(productJsonLd)
}}
/>
<div className="mx-auto mt-4 max-w-screen-2xl px-4">
<div className="mx-auto mt-4 max-w-screen-2xl px-8 xl:px-4">
<div className="hidden lg:block">
<BreadcrumbComponent type="product" handle={product.handle} />
</div>
<div className="my-3 flex flex-col space-x-0 rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-black md:p-10 lg:flex-row lg:gap-8 lg:space-x-3">
<div className="my-3 flex flex-col space-x-0 lg:flex-row lg:gap-8 lg:space-x-3">
<div className="h-full w-full basis-full lg:basis-7/12">
<ProductDescription product={product} />
</div>
<div className="hidden lg:block lg:basis-5/12">
<Suspense
fallback={
<div className="aspect-square relative h-full max-h-[550px] w-full overflow-hidden" />
@@ -100,18 +104,12 @@ export default async function ProductPage({ params }: { params: { handle: string
/>
</Suspense>
</div>
<div className="basis-full lg:basis-5/12">
<ProductDescription product={product} />
</div>
</div>
<Suspense>
<RelatedProducts id={product.id} />
</Suspense>
</div>
<Suspense>
<Footer />
</Suspense>
<Footer />
</>
);
}

79
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, {
@@ -14,6 +16,7 @@ import FiltersContainer, {
import MobileFilters from 'components/layout/search/filters/mobile-filters';
import SubMenu from 'components/layout/search/filters/sub-menu';
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 { Suspense } from 'react';
@@ -58,7 +61,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>
) : (
@@ -80,37 +83,53 @@ 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 />
</Suspense>
</div>
<>
<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} />
</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>
<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>
<Suspense
fallback={<ProductsGridPlaceholder />}
key={`products-${props.params.collection}`}
>
<CategoryPage {...props} />
</Suspense>
</div>
</div>
</div>
</div>
<FAQ handle="plp-faqs" />
<Suspense>
<Manufacturers
variant={
(props.params.collection as string).includes('engines') ? 'engines' : 'transmissions'
}
/>
</Suspense>
</>
);
}

6
app/search/layout.tsx
View File

@@ -1,12 +1,10 @@
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]">
<Suspense>{children}</Suspense>
</div>
<div className="min-h-[500px] lg:min-h-[800px]">{children}</div>
<Footer />
</>
);