mirror of
https://github.com/vercel/commerce.git
synced 2025-05-11 12:17:51 +00:00
address Hanna reviews
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
parent
7e7b7a83c3
commit
f8ef1b6350
@ -45,9 +45,11 @@ export default async function HomePage() {
|
||||
<Suspense>
|
||||
<FAQ handle="home-page-faqs" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
|
||||
</Suspense>
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-20">
|
||||
<Suspense>
|
||||
<Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
<Suspense>
|
||||
<Footer />
|
||||
|
@ -4,12 +4,10 @@ import { notFound } from 'next/navigation';
|
||||
|
||||
import Breadcrumb from 'components/breadcrumb';
|
||||
import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
|
||||
import EngineSizes from 'components/engine-sizes';
|
||||
import FAQ from 'components/faq';
|
||||
import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
|
||||
import Manufacturers from 'components/home-page/manufacturers';
|
||||
import ProductsList from 'components/layout/products-list';
|
||||
import { getProductsInCollection } from 'components/layout/products-list/actions';
|
||||
import BottomContent from 'components/layout/search/bottom-content';
|
||||
import FiltersContainer, {
|
||||
FiltersListPlaceholder
|
||||
} from 'components/layout/search/filters/filters-container';
|
||||
@ -19,8 +17,6 @@ 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 Content from 'components/plp/content';
|
||||
import TransmissionCode from 'components/transmission-codes';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
export async function generateMetadata({
|
||||
@ -85,24 +81,12 @@ async function CategoryPage({
|
||||
);
|
||||
}
|
||||
|
||||
const manufactureVariantMap: Record<
|
||||
string,
|
||||
'engines' | 'transmissions' | 'remanufactured-engines' | 'transfer-cases'
|
||||
> = {
|
||||
transmissions: 'transmissions',
|
||||
engines: 'engines',
|
||||
'remanufactured-engines': 'remanufactured-engines',
|
||||
'transfer-cases': 'transfer-cases'
|
||||
};
|
||||
|
||||
export default async function CategorySearchPage(props: {
|
||||
params: { collection: string };
|
||||
searchParams?: { [key: string]: string | string[] | undefined };
|
||||
}) {
|
||||
const collectionHandle = props.params.collection;
|
||||
|
||||
const [partType, make] = collectionHandle.split('_');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
|
||||
@ -139,20 +123,8 @@ export default async function CategorySearchPage(props: {
|
||||
</div>
|
||||
</div>
|
||||
<Suspense>
|
||||
<Content collection={collectionHandle} />
|
||||
<BottomContent collectionHandle={collectionHandle} />
|
||||
</Suspense>
|
||||
<FAQ handle="plp-faqs" />
|
||||
<Suspense>
|
||||
<TransmissionCode collectionHandle={collectionHandle} />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<EngineSizes collectionHandle={collectionHandle} />
|
||||
</Suspense>
|
||||
{!make ? (
|
||||
<Suspense>
|
||||
<Manufacturers variant={manufactureVariantMap[partType || 'engines']} />
|
||||
</Suspense>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { StarIcon } from '@heroicons/react/24/outline';
|
||||
import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
|
||||
import { Metaobject } from 'lib/shopify/types';
|
||||
import { Collection, Metaobject } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
const { STORE_PREFIX } = process.env;
|
||||
@ -20,9 +21,8 @@ const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title
|
||||
);
|
||||
};
|
||||
|
||||
const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
|
||||
const collection = await getCollection({ handle: collectionHandle });
|
||||
if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
|
||||
const EngineSizes = async ({ collection }: { collection: Collection }) => {
|
||||
if (!collection.plpType || !validStores.includes(STORE_PREFIX!)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -37,19 +37,23 @@ const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) =
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 py-10">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<h3 className="mb-6 text-3xl font-semibold lg:text-4xl">Browse Engines By Engine Sizes</h3>
|
||||
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
|
||||
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
|
||||
{engineSizes.map((engineSize) => (
|
||||
<LinkBlock
|
||||
collectionId={engineSize.collection_link}
|
||||
title={engineSize.engine_size}
|
||||
key={engineSize.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
|
||||
Browse Engines By Engine Sizes
|
||||
</h3>
|
||||
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
|
||||
<p className="flex items-center gap-2">
|
||||
<StarIcon className="size-4" />
|
||||
<span className="font-medium text-blue-800">Popular Engine Sizes</span>
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
|
||||
{engineSizes.map((engineSize) => (
|
||||
<LinkBlock
|
||||
collectionId={engineSize.collection_link}
|
||||
title={engineSize.engine_size}
|
||||
key={engineSize.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,4 @@
|
||||
import ManufacturersGrid from 'components/manufacturers-grid';
|
||||
import Tag from 'components/tag';
|
||||
import { getMetaobjects } from 'lib/shopify';
|
||||
|
||||
const Manufacturers = async ({
|
||||
@ -17,12 +16,9 @@ const Manufacturers = async ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-6 py-20">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-3">
|
||||
<Tag text="Get Started" />
|
||||
<h3 className="mb-3 text-3xl font-semibold lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
|
||||
<ManufacturersGrid manufacturers={manufacturers} variant={variant} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
|
||||
<ManufacturersGrid manufacturers={manufacturers} variant={variant} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
56
components/layout/search/bottom-content.tsx
Normal file
56
components/layout/search/bottom-content.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import EngineSizes from 'components/engine-sizes';
|
||||
import Manufacturers from 'components/home-page/manufacturers';
|
||||
import Content from 'components/plp/content';
|
||||
import Tag from 'components/tag';
|
||||
import TransmissionCode from 'components/transmission-codes';
|
||||
import { getCollection } from 'lib/shopify';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
const manufactureVariantMap: Record<
|
||||
string,
|
||||
'engines' | 'transmissions' | 'remanufactured-engines' | 'transfer-cases'
|
||||
> = {
|
||||
transmissions: 'transmissions',
|
||||
engines: 'engines',
|
||||
'remanufactured-engines': 'remanufactured-engines',
|
||||
'transfer-cases': 'transfer-cases'
|
||||
};
|
||||
|
||||
const BottomContent = async ({ collectionHandle }: { collectionHandle: string }) => {
|
||||
const collection = await getCollection({ handle: collectionHandle });
|
||||
|
||||
if (
|
||||
!collection ||
|
||||
(!collection.dynamicContent && !collection.transmissionCodeLinks && !collection.engineSizeLinks)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [partType] = collectionHandle.split('_');
|
||||
|
||||
return (
|
||||
<div className="mx-auto my-10 flex max-w-7xl flex-col gap-3 px-6">
|
||||
<Suspense>
|
||||
<Content collection={collection} />
|
||||
</Suspense>
|
||||
<div className="mt-10 space-y-3">
|
||||
<Tag text="Get Started" />
|
||||
<div className="space-y-16">
|
||||
<Suspense>
|
||||
<TransmissionCode collection={collection} />
|
||||
</Suspense>
|
||||
{!collection.plpType || collection.plpType === 'Product Type' ? (
|
||||
<Suspense>
|
||||
<Manufacturers variant={manufactureVariantMap[partType || 'engines']} />
|
||||
</Suspense>
|
||||
) : null}
|
||||
<Suspense>
|
||||
<EngineSizes collection={collection} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomContent;
|
@ -18,6 +18,17 @@ const MenuItem = async ({ collectionId, title }: { collectionId?: string; title:
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const sortOptions = (options: Metaobject[], displayField: string) => {
|
||||
return options.toSorted((a, b) =>
|
||||
get(a, displayField).toLowerCase().localeCompare(get(b, displayField).toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
const sortYearOptions = (options: Metaobject[]) => {
|
||||
return options.toSorted((a, b) => parseInt(get(b, 'year'), 10) - parseInt(get(a, 'year'), 10));
|
||||
};
|
||||
|
||||
const SubMenu = async ({ collection }: { collection: string }) => {
|
||||
const collectionData = await getCollection({ handle: collection });
|
||||
|
||||
@ -29,19 +40,22 @@ const SubMenu = async ({ collection }: { collection: string }) => {
|
||||
if (collectionData.plpType === 'Product Type' && collectionData.lhnLinks) {
|
||||
displayField = 'make';
|
||||
title = 'Make';
|
||||
subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
const response = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
subMenu = sortOptions(response, displayField);
|
||||
}
|
||||
|
||||
if (collectionData.plpType === 'Make' && collectionData.lhnLinks) {
|
||||
displayField = 'model';
|
||||
title = 'Model';
|
||||
subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
const response = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
subMenu = sortOptions(response, displayField);
|
||||
}
|
||||
|
||||
if (collectionData.plpType === 'Model' && collectionData.lhnLinks) {
|
||||
displayField = 'year';
|
||||
title = 'Year';
|
||||
subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
const response = await getMetaobjectsByIds(collectionData.lhnLinks);
|
||||
subMenu = sortYearOptions(response);
|
||||
}
|
||||
|
||||
return subMenu.length ? (
|
||||
|
@ -17,7 +17,7 @@ const ButtonGroup = ({ manufacturer }: { manufacturer: Metaobject }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center md:gap-0">
|
||||
<div className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center md:gap-x-2">
|
||||
<button
|
||||
className="flex items-center gap-1 rounded border border-primary px-1 py-0.5 text-xs text-primary"
|
||||
onClick={() => handleClick('engines')}
|
||||
|
@ -1,19 +1,14 @@
|
||||
import { getCollection, getMetaobject } from 'lib/shopify';
|
||||
import { getMetaobject } from 'lib/shopify';
|
||||
import { Collection } from 'lib/shopify/types';
|
||||
import DefaultContent from './default-content';
|
||||
import DynamicContent from './dynamic-content';
|
||||
|
||||
const Content = async ({ collection }: { collection: string }) => {
|
||||
const collectionData = await getCollection({ handle: collection });
|
||||
|
||||
if (!collectionData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!collectionData.dynamicContent) {
|
||||
const Content = async ({ collection }: { collection: Collection }) => {
|
||||
if (!collection.dynamicContent) {
|
||||
return <DefaultContent />;
|
||||
}
|
||||
|
||||
const content = await getMetaobject({ id: collectionData.dynamicContent });
|
||||
const content = await getMetaobject({ id: collection.dynamicContent });
|
||||
if (!content) {
|
||||
return <DefaultContent />;
|
||||
}
|
||||
|
@ -13,9 +13,9 @@ const DefaultContent = async () => {
|
||||
const sectionIds = defaultPLPContent.sections ? JSON.parse(defaultPLPContent.sections) : [];
|
||||
|
||||
return (
|
||||
<div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
|
||||
<div className="spacy-y-3">
|
||||
<Tag text="Learn More" />
|
||||
<h3 className="mb-5 text-3xl font-bold leading-loose text-black-700">
|
||||
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
|
||||
{defaultPLPContent.title}
|
||||
</h3>
|
||||
<Suspense fallback={<TabsPlaceholder />}>
|
||||
|
@ -7,9 +7,9 @@ const DynamicContent = async ({ content }: { content: Metaobject }) => {
|
||||
const sectionIds = content.sections ? JSON.parse(content.sections) : [];
|
||||
|
||||
return (
|
||||
<div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
|
||||
<div className="space-y-3">
|
||||
<Tag text="Learn More" />
|
||||
<h3 className="mb-5 text-3xl font-bold leading-loose text-black-700">{content.title}</h3>
|
||||
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{content.title}</h3>
|
||||
<Suspense fallback={<TabsPlaceholder />}>
|
||||
<Tabs tabItemIds={sectionIds} />
|
||||
</Suspense>
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { StarIcon } from '@heroicons/react/24/outline';
|
||||
import Tag from 'components/tag';
|
||||
import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
|
||||
import { Metaobject } from 'lib/shopify/types';
|
||||
import { Collection, Metaobject } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
const { STORE_PREFIX } = process.env;
|
||||
@ -21,9 +20,8 @@ const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
|
||||
const collection = await getCollection({ handle: collectionHandle });
|
||||
if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
|
||||
const TransmissionCode = async ({ collection }: { collection: Collection }) => {
|
||||
if (!collection.plpType || !validStores.includes(STORE_PREFIX!)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -41,24 +39,23 @@ const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 py-10">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-3">
|
||||
<Tag text="Get Started" />
|
||||
<h3 className="mb-3 text-3xl font-semibold lg:text-4xl">{`Browse By Transmission Code`}</h3>
|
||||
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
|
||||
<p className="flex items-center gap-2">
|
||||
<StarIcon className="size-4" />
|
||||
<span className="font-medium text-blue-800">Popular Transmission Codes</span>
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
|
||||
{transmissionCodes.map((transmissionCode) => (
|
||||
<LinkBlock
|
||||
collectionId={transmissionCode.collection_link}
|
||||
title={transmissionCode.transmission_code}
|
||||
key={transmissionCode.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
|
||||
Browse By Transmission Code
|
||||
</h3>
|
||||
<div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
|
||||
<p className="flex items-center gap-2">
|
||||
<StarIcon className="size-4" />
|
||||
<span className="font-medium text-blue-800">Popular Transmission Codes</span>
|
||||
</p>
|
||||
<div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
|
||||
{transmissionCodes.map((transmissionCode) => (
|
||||
<LinkBlock
|
||||
collectionId={transmissionCode.collection_link}
|
||||
title={transmissionCode.transmission_code}
|
||||
key={transmissionCode.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user