From 4738600b4d8ec1b340be729daf9f3d3473047be7 Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 10 Jul 2024 00:04:06 +0700 Subject: [PATCH] add transmission codes block to homepage Signed-off-by: Chloe --- app/page.tsx | 19 ++------ components/home-page/inlink-block.tsx | 48 +++++++++++++++++++ components/layout/search/bottom-content.tsx | 2 +- .../{index.tsx => grid.tsx} | 0 .../manufacturers.tsx | 2 +- components/plp/tabs.tsx | 8 +++- components/transmission-codes/index.tsx | 2 +- lib/shopify/types.ts | 3 +- 8 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 components/home-page/inlink-block.tsx rename components/manufacturers-grid/{index.tsx => grid.tsx} (100%) rename components/{home-page => manufacturers-grid}/manufacturers.tsx (92%) diff --git a/app/page.tsx b/app/page.tsx index 3700e23c1..92a7b6b9b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,14 +1,14 @@ import FAQ from 'components/faq'; import Hero from 'components/hero'; import About from 'components/home-page/about'; -import Manufacturers from 'components/home-page/manufacturers'; +import InlinkBlock from 'components/home-page/inlink-block'; import WhyChoose from 'components/home-page/why-choose'; import Footer from 'components/layout/footer'; import { Metadata } from 'next'; import { Suspense } from 'react'; export const runtime = 'edge'; -const { SITE_NAME, STORE_PREFIX } = process.env; +const { SITE_NAME } = process.env; export async function generateMetadata(): Promise { return { @@ -20,17 +20,6 @@ export async function generateMetadata(): Promise { }; } -const manufactureVariant: Record< - string, - 'home' | 'engines' | 'transmissions' | 'remanufactured-engines' -> = { - 'reman-transmission': 'transmissions', - 'car-part-planet': 'home', - 'reman-engine': 'remanufactured-engines', - 'transmission-locator': 'transmissions', - 'engine-locator': 'engines' -}; - export default async function HomePage() { return ( <> @@ -46,9 +35,7 @@ export default async function HomePage() {
- - - +
diff --git a/components/home-page/inlink-block.tsx b/components/home-page/inlink-block.tsx new file mode 100644 index 000000000..08f035cf6 --- /dev/null +++ b/components/home-page/inlink-block.tsx @@ -0,0 +1,48 @@ +import Manufacturers from 'components/manufacturers-grid/manufacturers'; +import Tag from 'components/tag'; +import TransmissionCode from 'components/transmission-codes'; +import { getCollection } from 'lib/shopify'; +import { Suspense } from 'react'; + +const { STORE_PREFIX } = process.env; + +const manufactureVariant: Record< + string, + 'home' | 'engines' | 'transmissions' | 'remanufactured-engines' +> = { + 'reman-transmission': 'transmissions', + 'car-part-planet': 'home', + 'reman-engine': 'remanufactured-engines', + 'transmission-locator': 'transmissions', + 'engine-locator': 'engines' +}; + +const TransmissionCodesBlock = async () => { + const collection = await getCollection({ handle: 'transmissions' }); + + if (!collection) { + return null; + } + + return ; +}; + +const InlinkBlock = () => { + return ( +
+ +
+ {STORE_PREFIX === 'reman-transmission' || STORE_PREFIX === 'transmission-locator' ? ( + + + + ) : null} + + + +
+
+ ); +}; + +export default InlinkBlock; diff --git a/components/layout/search/bottom-content.tsx b/components/layout/search/bottom-content.tsx index 9be58a5e3..9dd76ff61 100644 --- a/components/layout/search/bottom-content.tsx +++ b/components/layout/search/bottom-content.tsx @@ -1,5 +1,5 @@ import EngineSizes from 'components/engine-sizes'; -import Manufacturers from 'components/home-page/manufacturers'; +import Manufacturers from 'components/manufacturers-grid/manufacturers'; import Content from 'components/plp/content'; import Tag from 'components/tag'; import TransmissionCode from 'components/transmission-codes'; diff --git a/components/manufacturers-grid/index.tsx b/components/manufacturers-grid/grid.tsx similarity index 100% rename from components/manufacturers-grid/index.tsx rename to components/manufacturers-grid/grid.tsx diff --git a/components/home-page/manufacturers.tsx b/components/manufacturers-grid/manufacturers.tsx similarity index 92% rename from components/home-page/manufacturers.tsx rename to components/manufacturers-grid/manufacturers.tsx index b42ce5b79..3b8069eaf 100644 --- a/components/home-page/manufacturers.tsx +++ b/components/manufacturers-grid/manufacturers.tsx @@ -1,5 +1,5 @@ -import ManufacturersGrid from 'components/manufacturers-grid'; import { getMetaobjects } from 'lib/shopify'; +import ManufacturersGrid from './grid'; const Manufacturers = async ({ variant = 'home' diff --git a/components/plp/tabs.tsx b/components/plp/tabs.tsx index f641a94a5..1f4cd62a0 100644 --- a/components/plp/tabs.tsx +++ b/components/plp/tabs.tsx @@ -6,6 +6,10 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components'; const Tabs = ({ fields }: { fields: { [key: string]: string } }) => { const keys = Object.keys(fields); + if (!keys.length) { + return null; + } + return (
@@ -22,8 +26,8 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => { {keys.map((key) => ( - - + + ))} diff --git a/components/transmission-codes/index.tsx b/components/transmission-codes/index.tsx index 74ec4deee..de4e56812 100644 --- a/components/transmission-codes/index.tsx +++ b/components/transmission-codes/index.tsx @@ -28,7 +28,7 @@ const TransmissionCode = async ({ collection }: { collection: Collection }) => { let transmissionCodes = [] as Metaobject[]; if ( - (collection.plpType === 'Product Type' || collection.plpType === 'Make') && + ['Product Type', 'Make', 'Home'].includes(collection.plpType) && collection.transmissionCodeLinks ) { transmissionCodes = await getMetaobjectsByIds(collection.transmissionCodeLinks); diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts index c259cd462..370fa9d59 100644 --- a/lib/shopify/types.ts +++ b/lib/shopify/types.ts @@ -526,7 +526,8 @@ export type PLPType = | 'Model' | 'Year' | 'Transmission Code' - | 'Engine Size'; + | 'Engine Size' + | 'Home'; export type ShopifyCollection = { handle: string;