From d8e75539184cfd119cb52f78061bc23c3dba3c38 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Mon, 8 Jul 2024 08:52:10 +0700
Subject: [PATCH] link dynamic content to a collection
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
app/search/[collection]/page.tsx | 12 ++++++------
components/plp/content.tsx | 23 ++++++++---------------
components/plp/tabs.tsx | 2 +-
lib/shopify/index.ts | 1 +
lib/shopify/queries/collection.ts | 3 +++
lib/shopify/types.ts | 7 ++++++-
6 files changed, 25 insertions(+), 23 deletions(-)
diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index 67c668ea6..cfbcdb31a 100644
--- a/app/search/[collection]/page.tsx
+++ b/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}
</>
);
}
diff --git a/components/plp/content.tsx b/components/plp/content.tsx
index 75af208ce..ed2aaa6ab 100644
--- a/components/plp/content.tsx
+++ b/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 />;
}
diff --git a/components/plp/tabs.tsx b/components/plp/tabs.tsx
index 5be0546ed..bd2025a41 100644
--- a/components/plp/tabs.tsx
+++ b/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} />
))}
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index df922c2a5..3e200ecac 100644
--- a/lib/shopify/index.ts
+++ b/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)
};
};
diff --git a/lib/shopify/queries/collection.ts b/lib/shopify/queries/collection.ts
index 014fd7dce..4e50f8d03 100644
--- a/lib/shopify/queries/collection.ts
+++ b/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}
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 194952b1e..2c09088ff 100644
--- a/lib/shopify/types.ts
+++ b/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 = {