integrate inlinking blocks to Shopify

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

app/search/[collection]/page.tsx

@@ -13,14 +13,12 @@ import { getProductsInCollection } from 'components/layout/products-list/actions
 import FiltersContainer, {
   FiltersListPlaceholder
 } from 'components/layout/search/filters/filters-container';
-import MakeModelFilters from 'components/layout/search/filters/make-model-filters';
 import MobileFilters from 'components/layout/search/filters/mobile-filters';
-import SubMenu from 'components/layout/search/filters/sub-menu';
+import SubMenu, { SubMenuPlaceholder } 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 Models from 'components/models';
 import Content from 'components/plp/content';
 import TransmissionCode from 'components/transmission-codes';
 import { Suspense } from 'react';
@@ -61,7 +59,14 @@ async function CategoryPage({
         </Suspense>
       </div>
       <div className="mb-5 flex w-full items-center justify-between gap-2 lg:justify-end">
-        <MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
+        <MobileFilters
+          filters={filters}
+          menu={
+            <Suspense fallback={<SubMenuPlaceholder />}>
+              <SubMenu collection={params.collection} />
+            </Suspense>
+          }
+        />
         <SortingMenu />
       </div>
 
@@ -108,10 +113,8 @@ export default async function CategorySearchPage(props: {
                 <YMMFilters />
               </Suspense>
             </div>
-
-            <SubMenu collection={collectionHandle} />
-            <Suspense>
-              <MakeModelFilters collection={collectionHandle} />
+            <Suspense fallback={<SubMenuPlaceholder />}>
+              <SubMenu collection={collectionHandle} />
             </Suspense>
             <h3 className="sr-only">Filters</h3>
             <Suspense fallback={<FiltersListPlaceholder />} key={`filters-${collectionHandle}`}>
@@ -139,24 +142,12 @@ export default async function CategorySearchPage(props: {
         <Content collection={collectionHandle} />
       </Suspense>
       <FAQ handle="plp-faqs" />
-      {collectionHandle.startsWith('transmissions') && (
-        <Suspense>
-          <TransmissionCode collectionHandle={collectionHandle} />
-        </Suspense>
-      )}
-      {['transmissions', 'engines', 'remanufactured-engines'].some((url) =>
-        collectionHandle.startsWith(url)
-      ) && (
-        <Suspense>
-          <Models collectionHandle={collectionHandle} />
-        </Suspense>
-      )}
-
-      {['engines', 'remanufactured-engines'].some((url) => collectionHandle.startsWith(url)) && (
-        <Suspense>
-          <EngineSizes collectionHandle={collectionHandle} />
-        </Suspense>
-      )}
+      <Suspense>
+        <TransmissionCode collectionHandle={collectionHandle} />
+      </Suspense>
+      <Suspense>
+        <EngineSizes collectionHandle={collectionHandle} />
+      </Suspense>
       {!make ? (
         <Suspense>
           <Manufacturers variant={manufactureVariantMap[partType || 'engines']} />

components/engine-sizes/index.tsx

@@ -1,39 +1,53 @@
-import { ENGINE_SIZE_FILTER_ID } from 'lib/constants';
-import { getProductFilters } from 'lib/shopify';
-import { getCollectionUrl } from 'lib/utils';
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import { Metaobject } from 'lib/shopify/types';
 import Link from 'next/link';
 
-const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
-  // eg: collectionHandle = transmission_bmw_x5
-  const makeFromCollectionHandle = collectionHandle.split('_')[1];
+const { STORE_PREFIX } = process.env;
 
-  if (!makeFromCollectionHandle) {
+const validStores = ['car-part-planet', 'reman-engine', 'engine-locator'];
+
+const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title?: string }) => {
+  if (!collectionId || !title) return null;
+
+  const collection = await getCollection({ id: collectionId });
+
+  if (!collection) return null;
+
+  return (
+    <Link href={collection.path}>
+      <div className="rounded border border-primary px-2 py-1 text-sm">{title}</div>
+    </Link>
+  );
+};
+
+const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
+  const collection = await getCollection({ handle: collectionHandle });
+  if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
     return null;
   }
-  const engineSizes = await getProductFilters(
-    { collection: collectionHandle },
-    ENGINE_SIZE_FILTER_ID
-  );
 
-  if (!engineSizes || engineSizes.values.length === 0) {
+  let engineSizes = [] as Metaobject[];
+
+  if (collection.plpType === 'Product Type' && collection.engineSizeLinks) {
+    engineSizes = await getMetaobjectsByIds(collection.engineSizeLinks);
+  }
+
+  if (!engineSizes.length) {
     return null;
   }
 
   return (
-    <div className="px-6 pt-10">
+    <div className="px-6 py-10">
       <div className="mx-auto max-w-7xl">
         <h3 className="mb-6 text-3xl font-semibold lg:text-4xl">Browse Engines By Engine Sizes</h3>
         <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
           <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {engineSizes.values.map((engineSize) => (
-              <Link
-                href={`${getCollectionUrl(collectionHandle)}?${ENGINE_SIZE_FILTER_ID}=${engineSize.value}`}
+            {engineSizes.map((engineSize) => (
+              <LinkBlock
+                collectionId={engineSize.collection_link}
+                title={engineSize.engine_size}
                 key={engineSize.id}
-              >
-                <div className="rounded border border-primary px-2 py-1 text-sm">
-                  {engineSize.label}
-                </div>
-              </Link>
+              />
             ))}
           </div>
         </div>

components/layout/search/filters/make-model-filters.tsx

@@ -1,53 +0,0 @@
-import { MODEL_FILTER_ID, YEAR_FILTER_ID } from 'lib/constants';
-import { getProductFilters } from 'lib/shopify';
-import { Filter } from 'lib/shopify/types';
-import { getCollectionUrl } from 'lib/utils';
-import kebabCase from 'lodash.kebabcase';
-import Link from 'next/link';
-
-type MakeModelFiltersProps = {
-  collection: string;
-};
-
-const MakeModelFilters = async ({ collection }: MakeModelFiltersProps) => {
-  if (!collection) return null;
-
-  const [, make, model] = collection.split('_');
-  if (!make && !model) return null;
-
-  let data = null as Filter | null | undefined;
-  let title = '';
-
-  if (model) {
-    data = await getProductFilters({ collection }, YEAR_FILTER_ID);
-    title = 'Years';
-  } else if (make) {
-    data = await getProductFilters({ collection }, MODEL_FILTER_ID);
-    title = 'Models';
-  }
-
-  if (!data?.values || !data?.values.length) return null;
-
-  return (
-    <div className="border-t pt-4">
-      <div className="text-sm font-medium text-gray-900">{title}</div>
-      <ul
-        role="list"
-        className="ml-1 mt-2 max-h-[300px] space-y-3 overflow-y-auto border-b border-gray-200 pb-6 text-sm text-gray-600"
-      >
-        {data.values.map((item) => (
-          <li key={item.id}>
-            <Link
-              href={`${getCollectionUrl(`${collection}_${kebabCase(item.label)}`)}`}
-              className="hover:underline"
-            >
-              {item.label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default MakeModelFilters;

components/layout/search/filters/sub-menu.tsx

@@ -1,28 +1,79 @@
-import { getMenu } from 'lib/shopify';
-import { getCollectionUrl } from 'lib/utils';
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import { Metaobject } from 'lib/shopify/types';
+import get from 'lodash.get';
 import Link from 'next/link';
 
+const MenuItem = async ({ collectionId, title }: { collectionId?: string; title: string }) => {
+  if (!collectionId || !title) return null;
+
+  const collection = await getCollection({ id: collectionId });
+
+  if (!collection) return null;
+
+  return (
+    <li>
+      <Link href={collection.path} className="hover:underline">
+        {title}
+      </Link>
+    </li>
+  );
+};
 const SubMenu = async ({ collection }: { collection: string }) => {
-  const menu = await getMenu('main-menu');
-  const subMenu = menu.find((item) => item.path === getCollectionUrl(collection))?.items || [];
+  const collectionData = await getCollection({ handle: collection });
+
+  if (!collectionData || !collectionData.plpType) return null;
+  let subMenu = [] as Metaobject[];
+  let displayField = '';
+  let title = '';
+
+  if (collectionData.plpType === 'Product Type' && collectionData.lhnLinks) {
+    displayField = 'make';
+    title = 'Make';
+    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+  }
+
+  if (collectionData.plpType === 'Make' && collectionData.lhnLinks) {
+    displayField = 'model';
+    title = 'Model';
+    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+  }
+
+  if (collectionData.plpType === 'Model' && collectionData.lhnLinks) {
+    displayField = 'year';
+    title = 'Year';
+    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+  }
 
   return subMenu.length ? (
     <div className="border-t pt-4">
-      <div className="text-sm font-medium text-gray-900">Manufacturers</div>
+      <div className="text-sm font-medium text-gray-900">{title}</div>
       <ul
         role="list"
         className="ml-1 mt-2 max-h-[300px] space-y-3 overflow-y-auto border-b border-gray-200 pb-6 text-sm text-gray-600"
       >
         {subMenu.map((subMenuItem) => (
-          <li key={subMenuItem.title}>
-            <Link href={subMenuItem.path} className="hover:underline">
-              {subMenuItem.title}
-            </Link>
-          </li>
+          <MenuItem
+            key={subMenuItem.id}
+            collectionId={subMenuItem.collection_link}
+            title={get(subMenuItem, displayField)}
+          />
         ))}
       </ul>
     </div>
   ) : null;
 };
 
+export const SubMenuPlaceholder = () => {
+  return (
+    <div className="border-t pt-4">
+      <ul role="list" className="ml-1 mt-2 animate-pulse space-y-3 border-b border-gray-200 pb-6">
+        <li className="h-3 w-1/2 rounded bg-gray-200" />
+        <li className="h-3 w-1/2 rounded bg-gray-200" />
+        <li className="h-3 w-1/2 rounded bg-gray-200" />
+        <li className="h-3 w-1/2 rounded bg-gray-200" />
+        <li className="h-3 w-1/2 rounded bg-gray-200" />
+      </ul>
+    </div>
+  );
+};
 export default SubMenu;

components/models/index.tsx

@@ -1,50 +0,0 @@
-import { GlobeAltIcon } from '@heroicons/react/24/outline';
-import { MODEL_FILTER_ID } from 'lib/constants';
-import { getProductFilters } from 'lib/shopify';
-import { getCollectionUrl } from 'lib/utils';
-import Link from 'next/link';
-
-const Models = async ({ collectionHandle }: { collectionHandle: string }) => {
-  // eg: collectionHandle = transmission_bmw_x5
-  const makeFromCollectionHandle = collectionHandle.split('_')[1];
-
-  if (!makeFromCollectionHandle) {
-    return null;
-  }
-  const transmissionModels = await getProductFilters(
-    { collection: collectionHandle },
-    MODEL_FILTER_ID
-  );
-
-  if (!transmissionModels || transmissionModels.values.length === 0) {
-    return null;
-  }
-
-  const prefix = collectionHandle.startsWith('transmissions') ? 'Transmissions' : 'Engines';
-
-  return (
-    <div className="px-6 pt-20">
-      <div className="mx-auto max-w-7xl">
-        <h3 className="mb-6 text-3xl font-semibold lg:text-4xl">{`Browse ${prefix} By Model`}</h3>
-        <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
-          <p className="flex items-center gap-2">
-            <GlobeAltIcon className="size-4" />
-            <span className="font-medium text-blue-800">Models</span>
-          </p>
-          <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {transmissionModels.values.map((model) => (
-              <Link
-                href={`${getCollectionUrl(collectionHandle)}?${MODEL_FILTER_ID}=${model.value}`}
-                key={model.id}
-              >
-                <div className="rounded border border-primary px-2 py-1 text-sm">{model.label}</div>
-              </Link>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Models;

components/transmission-codes/index.tsx

@@ -1,22 +1,47 @@
 import { StarIcon } from '@heroicons/react/24/outline';
 import Tag from 'components/tag';
-import { TRANSMISSION_CODE_FILTER_ID } from 'lib/constants';
-import { getProductFilters } from 'lib/shopify';
-import { getCollectionUrl } from 'lib/utils';
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import { Metaobject } from 'lib/shopify/types';
 import Link from 'next/link';
 
-const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
-  const transmissionCodes = await getProductFilters(
-    { collection: collectionHandle },
-    TRANSMISSION_CODE_FILTER_ID
-  );
+const { STORE_PREFIX } = process.env;
 
-  if (!transmissionCodes || transmissionCodes.values.length === 0) {
+const validStores = ['car-part-planet', 'reman-transmission', 'transmission-locator'];
+
+const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title?: string }) => {
+  if (!collectionId || !title) return null;
+
+  const collection = await getCollection({ id: collectionId });
+
+  if (!collection) return null;
+
+  return (
+    <Link href={collection.path}>
+      <div className="rounded border border-primary px-2 py-1 text-sm">{title}</div>
+    </Link>
+  );
+};
+const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
+  const collection = await getCollection({ handle: collectionHandle });
+  if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
+    return null;
+  }
+
+  let transmissionCodes = [] as Metaobject[];
+
+  if (
+    (collection.plpType === 'Product Type' || collection.plpType === 'Make') &&
+    collection.transmissionCodeLinks
+  ) {
+    transmissionCodes = await getMetaobjectsByIds(collection.transmissionCodeLinks);
+  }
+
+  if (!transmissionCodes.length) {
     return null;
   }
 
   return (
-    <div className="px-6 pt-20">
+    <div className="px-6 py-10">
       <div className="mx-auto flex max-w-7xl flex-col gap-3">
         <Tag text="Get Started" />
         <h3 className="mb-3 text-3xl font-semibold lg:text-4xl">{`Browse By Transmission Code`}</h3>
@@ -26,15 +51,12 @@ const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string
             <span className="font-medium text-blue-800">Popular Transmission Codes</span>
           </p>
           <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {transmissionCodes.values.map((transmissionCode) => (
-              <Link
-                href={`${getCollectionUrl(collectionHandle)}/${transmissionCode.label.toLowerCase()}`}
+            {transmissionCodes.map((transmissionCode) => (
+              <LinkBlock
+                collectionId={transmissionCode.collection_link}
+                title={transmissionCode.transmission_code}
                 key={transmissionCode.id}
-              >
-                <div className="rounded border border-primary px-2 py-1 text-sm">
-                  {transmissionCode.label}
-                </div>
-              </Link>
+              />
             ))}
           </div>
         </div>