feat: add helpful links

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

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: {
         <h3 className="sr-only">Filters</h3>
         <Suspense fallback={<FiltersListPlaceholder />} key={`filters-${props.params.collection}`}>
           <FiltersContainer searchParams={props.searchParams} />
+          <HelpfulLinks collection={props.params.collection} />
         </Suspense>
       </aside>
       <div className="lg:col-span-2 xl:col-span-3">

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 (
+    <Link href={collection.path} className="border p-2 text-sm text-gray-600">
+      {anchorText}
+    </Link>
+  );
+};
+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 (
+    <div className="py-4">
+      <div className="mb-4 text-sm font-medium text-gray-900">Helpful links</div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {helpfulLinks.map((link) => (
+          <LinkItem
+            key={link.id}
+            collectionLinkId={link.collection_link!}
+            anchorText={link.anchor_text!}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HelpfulLinks;

lib/shopify/index.ts

@@ -173,6 +173,7 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
 
   return {
     ...collection,
+    helpfulLinks: parseMetaFieldValue<string[]>(collection.helpfulLinks),
     path: `/search/${collection.handle}`
   };
 };
@@ -495,7 +496,8 @@ export async function getCollections(): Promise<Collection[]> {
         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.

lib/shopify/queries/collection.ts

@@ -9,6 +9,9 @@ const collectionFragment = /* GraphQL */ `
     seo {
       ...seo
     }
+    helpfulLinks: metafield(namespace: "custom", key: "helpful_links") {
+      value
+    }
     updatedAt
   }
   ${seoFragment}

lib/shopify/types.ts

@@ -31,8 +31,9 @@ export type CartItem = {
   coreCharge?: CartItem;
 };
 
-export type Collection = ShopifyCollection & {
+export type Collection = Omit<ShopifyCollection, 'helpfulLinks'> & {
   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 = {