link dynamic content to a collection

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/search/[collection]/page.tsx

@@ -96,8 +96,7 @@ export default async function CategorySearchPage(props: {
 }) {
   const collectionHandle = props.params.collection;
 
-  const manufacturerVariant =
-    Object.keys(manufactureVariantMap).find((key) => collectionHandle.startsWith(key)) || 'engines';
+  const [partType, make] = collectionHandle.split('_');
 
   return (
     <>
@@ -158,10 +157,11 @@ export default async function CategorySearchPage(props: {
           <EngineSizes collectionHandle={collectionHandle} />
         </Suspense>
       )}
-
-      <Suspense>
-        <Manufacturers variant={manufactureVariantMap[manufacturerVariant]} />
-      </Suspense>
+      {!make ? (
+        <Suspense>
+          <Manufacturers variant={manufactureVariantMap[partType || 'engines']} />
+        </Suspense>
+      ) : null}
     </>
   );
 }

components/plp/content.tsx

@@ -1,26 +1,19 @@
-import { getMetaobject } from 'lib/shopify';
+import { getCollection, getMetaobject } from 'lib/shopify';
 import DefaultContent from './default-content';
 import DynamicContent from './dynamic-content';
 
 const Content = async ({ collection }: { collection: string }) => {
-  const [lastSegment] = collection.split('_').slice(-1);
+  const collectionData = await getCollection({ handle: collection });
 
-  if (!lastSegment) {
+  if (!collectionData) {
+    return null;
+  }
+
+  if (!collectionData.dynamicContent) {
     return <DefaultContent />;
   }
 
-  let content = null;
-
-  if (collection.startsWith('transmissions')) {
-    content = await getMetaobject({
-      handle: { handle: `transmission_code_${lastSegment}`, type: 'plp_content' }
-    });
-  } else if (collection.startsWith('engines')) {
-    content = await getMetaobject({
-      handle: { handle: `engine_size_${lastSegment}`, type: 'plp_content' }
-    });
-  }
-
+  const content = await getMetaobject({ id: collectionData.dynamicContent });
   if (!content) {
     return <DefaultContent />;
   }

components/plp/tabs.tsx

@@ -7,7 +7,7 @@ const TabPanelContent = async ({ ids }: { ids: string[] }) => {
   const content = await getMetaobjectsByIds(ids);
 
   return (
-    <TabPanel className="flex min-w-full space-y-5">
+    <TabPanel className="flex min-w-full flex-col space-y-5">
       {content.map((block) => (
         <PageContent key={block.id} block={block} />
       ))}

lib/shopify/index.ts

@@ -358,6 +358,7 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
     ...collection,
     helpfulLinks: parseMetaFieldValue<string[]>(collection.helpfulLinks),
     helpfulLinksTop: parseMetaFieldValue<string[]>(collection.helpfulLinksTop),
+    dynamicContent: collection.dynamicContent?.value || null,
     path: getCollectionUrl(collection.handle)
   };
 };

lib/shopify/queries/collection.ts

@@ -15,6 +15,9 @@ const collectionFragment = /* GraphQL */ `
     helpfulLinksTop: metafield(namespace: "custom", key: "helpful_links_top") {
       value
     }
+    dynamicContent: metafield(namespace: "custom", key: "plp_content") {
+      value
+    }
     updatedAt
   }
   ${seoFragment}

lib/shopify/types.ts

@@ -42,10 +42,14 @@ export type CartItem = {
   addOnProduct?: CartItem & { quantity: number };
 };
 
-export type Collection = Omit<ShopifyCollection, 'helpfulLinks' | 'helpfulLinksTop'> & {
+export type Collection = Omit<
+  ShopifyCollection,
+  'helpfulLinks' | 'helpfulLinksTop' | 'dynamicContent'
+> & {
   path: string;
   helpfulLinks: string[] | null;
   helpfulLinksTop: string[] | null;
+  dynamicContent: string | null;
 };
 
 export type Customer = {
@@ -513,6 +517,7 @@ export type ShopifyCollection = {
   updatedAt: string;
   helpfulLinks: { value: string } | null;
   helpfulLinksTop: { value: string } | null;
+  dynamicContent: { value: string } | null;
 };
 
 export type ShopifyProduct = {