diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index f0504c129..1a10b32ef 100644
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@@ -14,6 +14,7 @@ import FiltersContainer, {
import MobileFilters from 'components/layout/search/filters/mobile-filters';
import SubMenu from 'components/layout/search/filters/sub-menu';
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 { Suspense } from 'react';
@@ -92,6 +93,7 @@ export default async function CategorySearchPage(props: {
diff --git a/components/layout/search/helpful-links.tsx b/components/layout/search/helpful-links.tsx
new file mode 100644
index 000000000..546fa2d15
--- /dev/null
+++ b/components/layout/search/helpful-links.tsx
@@ -0,0 +1,44 @@
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import Link from 'next/link';
+
+const LinkItem = async ({
+ collectionLinkId,
+ anchorText
+}: {
+ collectionLinkId: string;
+ anchorText: string;
+}) => {
+ const collection = await getCollection({ id: collectionLinkId });
+
+ if (!collection) return null;
+
+ return (
+
+ {anchorText}
+
+ );
+};
+const HelpfulLinks = async ({ collection }: { collection: string }) => {
+ const collectionData = await getCollection({ handle: collection });
+ if (!collectionData || !collectionData.helpfulLinks) return null;
+
+ const helpfulLinks = await getMetaobjectsByIds(collectionData.helpfulLinks);
+
+ return (
+
+
Helpful links
+
+
+ {helpfulLinks.map((link) => (
+
+ ))}
+
+
+ );
+};
+
+export default HelpfulLinks;
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 1ffaae701..a44007ba9 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -173,6 +173,7 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
return {
...collection,
+ helpfulLinks: parseMetaFieldValue
(collection.helpfulLinks),
path: `/search/${collection.handle}`
};
};
@@ -495,7 +496,8 @@ export async function getCollections(): Promise {
description: 'All products'
},
path: '/search',
- updatedAt: new Date().toISOString()
+ updatedAt: new Date().toISOString(),
+ helpfulLinks: null
},
// Filter out the `hidden` collections.
// Collections that start with `hidden-*` need to be hidden on the search page.
diff --git a/lib/shopify/queries/collection.ts b/lib/shopify/queries/collection.ts
index 57596d005..f59aec8f1 100644
--- a/lib/shopify/queries/collection.ts
+++ b/lib/shopify/queries/collection.ts
@@ -9,6 +9,9 @@ const collectionFragment = /* GraphQL */ `
seo {
...seo
}
+ helpfulLinks: metafield(namespace: "custom", key: "helpful_links") {
+ value
+ }
updatedAt
}
${seoFragment}
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 7443823c4..e8b86f15e 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -31,8 +31,9 @@ export type CartItem = {
coreCharge?: CartItem;
};
-export type Collection = ShopifyCollection & {
+export type Collection = Omit & {
path: string;
+ helpfulLinks: string[] | null;
};
export type Image = {
@@ -186,6 +187,7 @@ export type ShopifyCollection = {
description: string;
seo: SEO;
updatedAt: string;
+ helpfulLinks: { value: string } | null;
};
export type ShopifyProduct = {