address Hanna reviews

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-07-08 22:17:38 +07:00
parent 7e7b7a83c3
commit f8ef1b6350
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
11 changed files with 134 additions and 98 deletions

View File

@ -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 />

View File

@ -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}
</>
);
}

View File

@ -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>

View File

@ -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>
);
};

View 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;

View File

@ -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 ? (

View File

@ -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')}

View File

@ -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 />;
}

View File

@ -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 />}>

View File

@ -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>

View File

@ -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>