crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

update inlinking blocks

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-07-05 15:19:40 +07:00
parent 7e9a84aaae
commit 0a2e3d8e38
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
5 changed files with 23 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/search/[collection]/page.tsx
View File

@ -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
collectionHandle={collectionHandle}
make={props.searchParams?.[MAKE_FILTER_ID]}
/>
<TransmissionCode collectionHandle={collectionHandle} />
</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
collectionHandle={collectionHandle}
make={props.searchParams?.[MAKE_FILTER_ID]}
/>
<EngineSizes collectionHandle={collectionHandle} />
</Suspense>
)}

20
components/engine-sizes/index.tsx
View File

@ -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 ({
collectionHandle,
make
}: {
collectionHandle: string;
make?: string | string[];
}) => {
// eg: collectionHandle = transmission-bmw-x5
const makeFromCollectionHandle = collectionHandle.split('-')[1];
const EngineSizes = async ({ collectionHandle }: { collectionHandle: 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">

20
components/models/index.tsx
View File

@ -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 ({
collectionHandle,
make
}: {
collectionHandle: string;
make?: string | string[];
}) => {
// eg: collectionHandle = transmission-bmw-x5
const makeFromCollectionHandle = collectionHandle.split('-')[1];
const Models = async ({ collectionHandle }: { collectionHandle: 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>

14
components/transmission-codes/index.tsx
View File

@ -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 ({
collectionHandle,
make
}: {
collectionHandle: string;
make?: string | string[];
}) => {
const TransmissionCode = async ({ collectionHandle }: { collectionHandle: 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">

14
lib/shopify/index.ts
View File

@ -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,
...(_make
? {
filters: _make.map((make) => ({
productMetafield: { namespace, key: metafieldKey, value: make }
}))
}
: {})
handle: collection
}
});