update inlinking blocks

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

app/search/[collection]/page.tsx

@@ -22,7 +22,6 @@ import ProductsGridPlaceholder from 'components/layout/search/placeholder';
 import SortingMenu from 'components/layout/search/sorting-menu';
 import Models from 'components/models';
 import TransmissionCode from 'components/transmission-codes';
-import { MAKE_FILTER_ID } from 'lib/constants';
 import { Suspense } from 'react';
 
 export async function generateMetadata({
@@ -125,26 +124,20 @@ export default async function CategorySearchPage(props: {
       <FAQ handle="plp-faqs" />
       {collectionHandle.startsWith('transmissions') && (
         <Suspense>
-          <TransmissionCode
+          <TransmissionCode collectionHandle={collectionHandle} />
-            collectionHandle={collectionHandle}
-            make={props.searchParams?.[MAKE_FILTER_ID]}
-          />
         </Suspense>
       )}
       {['transmissions', 'engines', 'remanufactured-engines'].some((url) =>
         collectionHandle.startsWith(url)
       ) && (
         <Suspense>
-          <Models collectionHandle={collectionHandle} make={props.searchParams?.[MAKE_FILTER_ID]} />
+          <Models collectionHandle={collectionHandle} />
         </Suspense>
       )}
 
       {['engines', 'remanufactured-engines'].some((url) => collectionHandle.startsWith(url)) && (
         <Suspense>
-          <EngineSizes
+          <EngineSizes collectionHandle={collectionHandle} />
-            collectionHandle={collectionHandle}
-            make={props.searchParams?.[MAKE_FILTER_ID]}
-          />
         </Suspense>
       )}
 

components/engine-sizes/index.tsx

@@ -1,23 +1,17 @@
-import { ENGINE_SIZE_FILTER_ID, MAKE_FILTER_ID } from 'lib/constants';
+import { ENGINE_SIZE_FILTER_ID } from 'lib/constants';
 import { getProductFilters } from 'lib/shopify';
 import { getCollectionUrl } from 'lib/utils';
 import Link from 'next/link';
 
-const EngineSizes = async ({
+const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
-  collectionHandle,
+  // eg: collectionHandle = transmission_bmw_x5
-  make
+  const makeFromCollectionHandle = collectionHandle.split('_')[1];
-}: {
-  collectionHandle: string;
-  make?: string | string[];
-}) => {
-  // eg: collectionHandle = transmission-bmw-x5
-  const makeFromCollectionHandle = collectionHandle.split('-')[1];
 
-  if (!makeFromCollectionHandle && !make) {
+  if (!makeFromCollectionHandle) {
     return null;
   }
   const engineSizes = await getProductFilters(
-    { collection: collectionHandle, make },
+    { collection: collectionHandle },
     ENGINE_SIZE_FILTER_ID
   );
 
@@ -33,7 +27,7 @@ const EngineSizes = async ({
           <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}${make ? `&${MAKE_FILTER_ID}=${make}` : ''}`}
+                href={`${getCollectionUrl(collectionHandle)}?${ENGINE_SIZE_FILTER_ID}=${engineSize.value}`}
                 key={engineSize.id}
               >
                 <div className="rounded border border-primary px-2 py-1 text-sm">

components/models/index.tsx

@@ -1,24 +1,18 @@
 import { GlobeAltIcon } from '@heroicons/react/24/outline';
-import { MAKE_FILTER_ID, MODEL_FILTER_ID } from 'lib/constants';
+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 ({
+const Models = async ({ collectionHandle }: { collectionHandle: string }) => {
-  collectionHandle,
+  // eg: collectionHandle = transmission_bmw_x5
-  make
+  const makeFromCollectionHandle = collectionHandle.split('_')[1];
-}: {
-  collectionHandle: string;
-  make?: string | string[];
-}) => {
-  // eg: collectionHandle = transmission-bmw-x5
-  const makeFromCollectionHandle = collectionHandle.split('-')[1];
 
-  if (!makeFromCollectionHandle && !make) {
+  if (!makeFromCollectionHandle) {
     return null;
   }
   const transmissionModels = await getProductFilters(
-    { collection: collectionHandle, make },
+    { collection: collectionHandle },
     MODEL_FILTER_ID
   );
 
@@ -40,7 +34,7 @@ const Models = async ({
           <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}${make ? `&${MAKE_FILTER_ID}=${make}` : ''}`}
+                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>

components/transmission-codes/index.tsx

@@ -1,19 +1,13 @@
 import { StarIcon } from '@heroicons/react/24/outline';
 import Tag from 'components/tag';
-import { MAKE_FILTER_ID, TRANSMISSION_CODE_FILTER_ID } from 'lib/constants';
+import { TRANSMISSION_CODE_FILTER_ID } from 'lib/constants';
 import { getProductFilters } from 'lib/shopify';
 import { getCollectionUrl } from 'lib/utils';
 import Link from 'next/link';
 
-const TransmissionCode = async ({
+const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
-  collectionHandle,
-  make
-}: {
-  collectionHandle: string;
-  make?: string | string[];
-}) => {
   const transmissionCodes = await getProductFilters(
-    { collection: collectionHandle, make },
+    { collection: collectionHandle },
     TRANSMISSION_CODE_FILTER_ID
   );
 
@@ -34,7 +28,7 @@ const TransmissionCode = async ({
           <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)}?${TRANSMISSION_CODE_FILTER_ID}=${transmissionCode.value}${make ? `&${MAKE_FILTER_ID}=${make}` : ''}`}
+                href={`${getCollectionUrl(collectionHandle)}?${TRANSMISSION_CODE_FILTER_ID}=${transmissionCode.value}`}
                 key={transmissionCode.id}
               >
                 <div className="rounded border border-primary px-2 py-1 text-sm">

lib/shopify/index.ts

@@ -1181,24 +1181,14 @@ export const getFile = async (id: string) => {
 };
 
 export async function getProductFilters(
-  { collection, make }: { collection: string; make?: string | string[] },
+  { collection }: { collection: string },
   filterId: string
 ): Promise<Filter | null | undefined> {
-  const [namespace, metafieldKey] = MAKE_FILTER_ID.split('.').slice(-2);
-  const _make = Array.isArray(make) ? make : make ? [make] : undefined;
-
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getProductFiltersQuery,
     tags: [TAGS.collections, TAGS.products],
     variables: {
-      handle: collection,
+      handle: collection
-      ...(_make
-        ? {
-            filters: _make.map((make) => ({
-              productMetafield: { namespace, key: metafieldKey, value: make }
-            }))
-          }
-        : {})
     }
   });