From 7e7b7a83c38df46e3a45b17405514c47a670de4a Mon Sep 17 00:00:00 2001 From: Chloe Date: Mon, 8 Jul 2024 17:18:11 +0700 Subject: [PATCH] integrate inlinking blocks to Shopify Signed-off-by: Chloe --- app/search/[collection]/page.tsx | 43 +++++------ components/engine-sizes/index.tsx | 56 +++++++++------ .../search/filters/make-model-filters.tsx | 53 -------------- components/layout/search/filters/sub-menu.tsx | 71 ++++++++++++++++--- components/models/index.tsx | 50 ------------- components/transmission-codes/index.tsx | 58 ++++++++++----- 6 files changed, 153 insertions(+), 178 deletions(-) delete mode 100644 components/layout/search/filters/make-model-filters.tsx delete mode 100644 components/models/index.tsx diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx index cfbcdb31a..dbb3a43e8 100644 --- a/app/search/[collection]/page.tsx +++ b/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({
- } /> + }> + + + } + />
@@ -108,10 +113,8 @@ export default async function CategorySearchPage(props: { - - - - + }> +

Filters

} key={`filters-${collectionHandle}`}> @@ -139,24 +142,12 @@ export default async function CategorySearchPage(props: { - {collectionHandle.startsWith('transmissions') && ( - - - - )} - {['transmissions', 'engines', 'remanufactured-engines'].some((url) => - collectionHandle.startsWith(url) - ) && ( - - - - )} - - {['engines', 'remanufactured-engines'].some((url) => collectionHandle.startsWith(url)) && ( - - - - )} + + + + + + {!make ? ( diff --git a/components/engine-sizes/index.tsx b/components/engine-sizes/index.tsx index 1215265b2..1ba2cc92b 100644 --- a/components/engine-sizes/index.tsx +++ b/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 ( + +
{title}
+ + ); +}; + +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 ( -
+

Browse Engines By Engine Sizes

- {engineSizes.values.map((engineSize) => ( - ( + -
- {engineSize.label} -
- + /> ))}
diff --git a/components/layout/search/filters/make-model-filters.tsx b/components/layout/search/filters/make-model-filters.tsx deleted file mode 100644 index 2e1636f52..000000000 --- a/components/layout/search/filters/make-model-filters.tsx +++ /dev/null @@ -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 ( -
-
{title}
-
    - {data.values.map((item) => ( -
  • - - {item.label} - -
    • - ))} -
-
- ); -}; - -export default MakeModelFilters; diff --git a/components/layout/search/filters/sub-menu.tsx b/components/layout/search/filters/sub-menu.tsx index e88cbca8c..490d5368f 100644 --- a/components/layout/search/filters/sub-menu.tsx +++ b/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 ( +
  • + + {title} + +
    • + ); +}; 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 ? (
    -
    Manufacturers
    +
    {title}
      {subMenu.map((subMenuItem) => ( -
    • - - {subMenuItem.title} - -
      • + ))}
    ) : null; }; +export const SubMenuPlaceholder = () => { + return ( +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    + ); +}; export default SubMenu; diff --git a/components/models/index.tsx b/components/models/index.tsx deleted file mode 100644 index 937e2b3f1..000000000 --- a/components/models/index.tsx +++ /dev/null @@ -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 ( -
    -
    -

    {`Browse ${prefix} By Model`}

    -
    -

    - - Models -

    -
    - {transmissionModels.values.map((model) => ( - -
    {model.label}
    - - ))} -
    -
    -
    -
    - ); -}; - -export default Models; diff --git a/components/transmission-codes/index.tsx b/components/transmission-codes/index.tsx index 2a5289bb8..62f70b6fe 100644 --- a/components/transmission-codes/index.tsx +++ b/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 ( + +
    {title}
    + + ); +}; +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 ( -
    +

    {`Browse By Transmission Code`}

    @@ -26,15 +51,12 @@ const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string Popular Transmission Codes

    - {transmissionCodes.values.map((transmissionCode) => ( - ( + -
    - {transmissionCode.label} -
    - + /> ))}