Merge remote-tracking branch 'origin' into core-return

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>
-
+            <Suspense fallback={<SubMenuPlaceholder />}>
-            <SubMenu collection={collectionHandle} />
+              <SubMenu collection={collectionHandle} />
-            <Suspense>
-              <MakeModelFilters 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>
-        <Suspense>
+        <TransmissionCode collectionHandle={collectionHandle} />
-          <TransmissionCode collectionHandle={collectionHandle} />
+      </Suspense>
-        </Suspense>
+      <Suspense>
-      )}
+        <EngineSizes collectionHandle={collectionHandle} />
-      {['transmissions', 'engines', 'remanufactured-engines'].some((url) =>
+      </Suspense>
-        collectionHandle.startsWith(url)
-      ) && (
-        <Suspense>
-          <Models collectionHandle={collectionHandle} />
-        </Suspense>
-      )}
-
-      {['engines', 'remanufactured-engines'].some((url) => collectionHandle.startsWith(url)) && (
-        <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 { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import { getProductFilters } from 'lib/shopify';
+import { Metaobject } from 'lib/shopify/types';
-import { getCollectionUrl } from 'lib/utils';
 import Link from 'next/link';
 
-const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
+const { STORE_PREFIX } = process.env;
-  // eg: collectionHandle = transmission_bmw_x5
-  const makeFromCollectionHandle = collectionHandle.split('_')[1];
 
-  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) => (
+            {engineSizes.map((engineSize) => (
-              <Link
+              <LinkBlock
-                href={`${getCollectionUrl(collectionHandle)}?${ENGINE_SIZE_FILTER_ID}=${engineSize.value}`}
+                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/filters/actions.ts

@@ -1,12 +1,47 @@
 'use server';
 
 import { getAllMetaobjects } from 'lib/shopify';
+import get from 'lodash.get';
+import { cache } from 'react';
 
-export const fetMetaobjects = async (type: string) => {
+export const fetchModels = cache(async () => {
   try {
-    const data = await getAllMetaobjects(type);
+    const data = await getAllMetaobjects('make_model_composite');
-    return data;
+
+    return data.toSorted((a, b) => {
+      const modelA = get(a, 'name').toLowerCase();
+      const modelB = get(b, 'name').toLowerCase();
+      return modelA.localeCompare(modelB);
+    });
   } catch (error) {
-    console.log('fetMetaobjects action', error);
+    console.log('fetchModels action', error);
   }
-};
+});
+
+export const fetchYears = cache(async () => {
+  try {
+    const data = await getAllMetaobjects('make_model_year_composite');
+
+    return data.toSorted((a, b) => {
+      const yearA = parseInt(get(a, 'name'), 10);
+      const yearB = parseInt(get(b, 'name'), 10);
+      return yearB - yearA; // Descending order for years
+    });
+  } catch (error) {
+    console.log('fetchYears action', error);
+  }
+});
+
+export const fetchMakes = cache(async () => {
+  try {
+    const data = await getAllMetaobjects('make');
+
+    return data.toSorted((a, b) => {
+      const makeA = get(a, 'display_name').toLowerCase();
+      const makeB = get(b, 'display_name').toLowerCase();
+      return makeA.localeCompare(makeB);
+    });
+  } catch (error) {
+    console.log('fetchMakes action', error);
+  }
+});

components/filters/filters-list.tsx

@@ -6,17 +6,17 @@ import { Menu, Metaobject } from 'lib/shopify/types';
 import { createUrl, findParentCollection } from 'lib/utils';
 import get from 'lodash.get';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
-import { fetMetaobjects } from './actions';
+import { fetchModels, fetchYears } from './actions';
 import FilterField from './field';
 
 type FiltersListProps = {
-  makes: Metaobject[];
+  makes?: Metaobject[];
   menu: Menu[];
   autoFocusField?: string;
 };
 
-const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
+const FiltersList = ({ makes = [], menu, autoFocusField }: FiltersListProps) => {
   const params = useParams<{ collection?: string }>();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -69,9 +69,9 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
   }, [makeIdFromSearchParams, makes, params.collection, partType]);
 
   useEffect(() => {
-    const fetchModels = async () => {
+    const getModels = async () => {
       setLoadingAttribute('models');
-      const modelsResponse = await fetMetaobjects('make_model_composite');
+      const modelsResponse = await fetchModels();
       if (modelIdFromSearchParams) {
         setModel(
           (currentModel) =>
@@ -83,14 +83,14 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
     };
 
     if (make?.id && models.length === 0) {
-      fetchModels();
+      getModels();
     }
   }, [make?.id, modelIdFromSearchParams, models.length]);
 
   useEffect(() => {
-    const fetchYears = async () => {
+    const getYears = async () => {
       setLoadingAttribute('years');
-      const yearsResponse = await fetMetaobjects('make_model_year_composite');
+      const yearsResponse = await fetchYears();
       if (yearIdFromSearchParams) {
         setYear(
           (currentYear) =>
@@ -102,7 +102,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
     };
 
     if (model?.id && years.length === 0) {
-      fetchYears();
+      getYears();
     }
   }, [model?.id, yearIdFromSearchParams, years.length]);
 
@@ -136,31 +136,6 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
     router.push(createUrl(`/search/${partType?.value}`, newSearchParams), { scroll: false });
   };
 
-  // Sorting logic
-  const sortedMakes = useMemo(() => {
-    return [...makes].sort((a, b) => {
-      const makeA = get(a, 'display_name').toLowerCase();
-      const makeB = get(b, 'display_name').toLowerCase();
-      return makeA.localeCompare(makeB);
-    });
-  }, [makes]);
-
-  const sortedModelOptions = useMemo(() => {
-    return [...modelOptions].sort((a, b) => {
-      const modelA = get(a, 'name').toLowerCase();
-      const modelB = get(b, 'name').toLowerCase();
-      return modelA.localeCompare(modelB);
-    });
-  }, [modelOptions]);
-
-  const sortedYearOptions = useMemo(() => {
-    return [...yearOptions].sort((a, b) => {
-      const yearA = parseInt(get(a, 'name'), 10);
-      const yearB = parseInt(get(b, 'name'), 10);
-      return yearB - yearA; // Descending order for years
-    });
-  }, [yearOptions]);
-
   return (
     <>
       <FilterField
@@ -176,7 +151,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Make"
         onChange={onChangeMake}
         selectedValue={make}
-        options={sortedMakes}
+        options={makes}
         getId={(option) => option.id}
         disabled={!partType}
         autoFocus={autoFocusField === 'make'}
@@ -186,7 +161,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Model"
         onChange={onChangeModel}
         selectedValue={model}
-        options={sortedModelOptions}
+        options={modelOptions}
         getId={(option) => option.id}
         disabled={!make}
         autoFocus={autoFocusField === 'model'}
@@ -196,7 +171,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Year"
         onChange={onChangeYear}
         selectedValue={year}
-        options={sortedYearOptions}
+        options={yearOptions}
         getId={(option) => option.id}
         disabled={!model || !make}
         autoFocus={autoFocusField === 'year'}

components/filters/hompage-filters.tsx

@@ -1,4 +1,5 @@
-import { getAllMetaobjects, getMenu } from 'lib/shopify';
+import { getMenu } from 'lib/shopify';
+import { fetchMakes, fetchModels, fetchYears } from './actions';
 import FiltersList from './filters-list';
 
 const title: Record<string, string> = {
@@ -12,8 +13,11 @@ const title: Record<string, string> = {
 const { STORE_PREFIX } = process.env;
 
 const HomePageFilters = async () => {
-  const makes = await getAllMetaobjects('make');
+  const makes = await fetchMakes();
   const menu = await getMenu('main-menu');
+  // preload models and years
+  fetchModels();
+  fetchYears();
 
   return (
     <>

components/filters/index.tsx

@@ -1,5 +1,6 @@
-import { getAllMetaobjects, getMenu } from 'lib/shopify';
+import { getMenu } from 'lib/shopify';
 import { ReactNode } from 'react';
+import { fetchMakes, fetchModels, fetchYears } from './actions';
 import FiltersList from './filters-list';
 
 const YMMFiltersContainer = ({ children }: { children: ReactNode }) => {
@@ -14,8 +15,11 @@ const YMMFiltersContainer = ({ children }: { children: ReactNode }) => {
 };
 
 const YMMFilters = async () => {
-  const makes = await getAllMetaobjects('make');
+  const makes = await fetchMakes();
   const menu = await getMenu('main-menu');
+  // preload models and years
+  fetchModels();
+  fetchYears();
 
   return (
     <YMMFiltersContainer>

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 { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import { getCollectionUrl } from 'lib/utils';
+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 collectionData = await getCollection({ handle: collection });
-  const subMenu = menu.find((item) => item.path === getCollectionUrl(collection))?.items || [];
+
+  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}>
+          <MenuItem
-            <Link href={subMenuItem.path} className="hover:underline">
+            key={subMenuItem.id}
-              {subMenuItem.title}
+            collectionId={subMenuItem.collection_link}
-            </Link>
+            title={get(subMenuItem, displayField)}
-          </li>
+          />
         ))}
       </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 { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import { getProductFilters } from 'lib/shopify';
+import { Metaobject } from 'lib/shopify/types';
-import { getCollectionUrl } from 'lib/utils';
 import Link from 'next/link';
 
-const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
+const { STORE_PREFIX } = process.env;
-  const transmissionCodes = await getProductFilters(
-    { collection: collectionHandle },
-    TRANSMISSION_CODE_FILTER_ID
-  );
 
-  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) => (
+            {transmissionCodes.map((transmissionCode) => (
-              <Link
+              <LinkBlock
-                href={`${getCollectionUrl(collectionHandle)}/${transmissionCode.label.toLowerCase()}`}
+                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>

components/ui/index.ts

@@ -1,18 +1,16 @@
-export { default as Badge } from './badge';
 export * from './badge';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
-export * from './button';
-export { default as Card } from './card';
 export * from './card';
-export { default as Heading } from './heading';
+export { default as Card } from './card';
 export * from './heading';
+export { default as Heading } from './heading';
 export { default as Input } from './input';
-export * from './input';
-export { default as Label } from './label';
 export * from './label';
-export { default as Skeleton } from './skeleton';
+export { default as Label } from './label';
 export * from './skeleton';
-export { default as Text } from './text';
+export { default as Skeleton } from './skeleton';
 export * from './text';
+export { default as Text } from './text';
 export { default as Chip } from './chip';
 export * from './chip';

lib/shopify/index.ts

@@ -362,6 +362,10 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
     helpfulLinks: parseMetaFieldValue<string[]>(collection.helpfulLinks),
     helpfulLinksTop: parseMetaFieldValue<string[]>(collection.helpfulLinksTop),
     dynamicContent: collection.dynamicContent?.value || null,
+    plpType: collection.plpType?.value || null,
+    lhnLinks: parseMetaFieldValue<string[]>(collection.lhnLinks),
+    engineSizeLinks: parseMetaFieldValue<string[]>(collection.engineSizeLinks),
+    transmissionCodeLinks: parseMetaFieldValue<string[]>(collection.transmissionCodeLinks),
     path: getCollectionUrl(collection.handle)
   };
 };
@@ -906,7 +910,6 @@ export async function getAllMetaobjects(type: string) {
   while (hasNextPage) {
     const res = await shopifyFetch<ShopifyMetaobjectsOperation>({
       query: getMetaobjectsQuery,
-      tags: [TAGS.collections, TAGS.products],
       variables: { type, after }
     });
 

lib/shopify/queries/collection.ts

@@ -18,6 +18,18 @@ const collectionFragment = /* GraphQL */ `
     dynamicContent: metafield(namespace: "custom", key: "plp_content") {
       value
     }
+    plpType: metafield(namespace: "custom", key: "plp_type") {
+      value
+    }
+    lhnLinks: metafield(namespace: "custom", key: "lhn_links") {
+      value
+    }
+    engineSizeLinks: metafield(namespace: "custom", key: "engine_size_links") {
+      value
+    }
+    transmissionCodeLinks: metafield(namespace: "custom", key: "transmission_code_links") {
+      value
+    }
     updatedAt
   }
   ${seoFragment}

lib/shopify/types.ts

@@ -44,12 +44,22 @@ export type CartItem = {
 
 export type Collection = Omit<
   ShopifyCollection,
-  'helpfulLinks' | 'helpfulLinksTop' | 'dynamicContent'
+  | 'helpfulLinks'
+  | 'helpfulLinksTop'
+  | 'dynamicContent'
+  | 'plpType'
+  | 'lhnLinks'
+  | 'engineSizeLinks'
+  | 'transmissionCodeLinks'
 > & {
   path: string;
   helpfulLinks: string[] | null;
   helpfulLinksTop: string[] | null;
   dynamicContent: string | null;
+  plpType: PLPType | null;
+  lhnLinks: string[] | null;
+  engineSizeLinks: string[] | null;
+  transmissionCodeLinks: string[] | null;
 };
 
 export type Customer = {
@@ -509,6 +519,14 @@ export type ShopifyCart = {
   totalQuantity: number;
 };
 
+export type PLPType =
+  | 'Product Type'
+  | 'Make'
+  | 'Model'
+  | 'Year'
+  | 'Transmission Code'
+  | 'Engine Size';
+
 export type ShopifyCollection = {
   handle: string;
   title: string;
@@ -518,6 +536,10 @@ export type ShopifyCollection = {
   helpfulLinks: { value: string } | null;
   helpfulLinksTop: { value: string } | null;
   dynamicContent: { value: string } | null;
+  plpType: { value: PLPType } | null;
+  lhnLinks: { value: string } | null;
+  engineSizeLinks: { value: string } | null;
+  transmissionCodeLinks: { value: string } | null;
 };
 
 export type ShopifyProduct = {