Product filter based on metafields

[Pankajmehta1998]

I want to filter products based on metafields: I have used as instructed in hydrogen docs:
Hydrogen query: query tumbleDryProducts {
collection(handle: "filterable-collection") {
handle
products(first: 1,
filters: {
productMetafield:{
namespace:"product_care",
key:"drying_instructions",
value:"tumble dry"
}
}) {
edges {
node {
id
title
}
}
}
}
}
my query:
export const COLLECTION_FILTER_METAFIELD = #graphql ${PRODUCT_ITEM_FRAGMENT} query Collection( $handle: String! $country: CountryCode $language: LanguageCode $first: Int $last: Int $startCursor: String $endCursor: String $sortKey: ProductCollectionSortKeys $reverse: Boolean $brandFilterValue: String! ) @inContext(country: $country, language: $language) { collection(handle: $handle) { id handle title description image{ url id } products( first: $first, last: $last, before: $startCursor, after: $endCursor, sortKey: $sortKey reverse: $reverse, filters: [ { productMetafield: { namespace: "custom" key: $brandFilterValue value: "abc" } } ], ) { nodes { ...ProductItem } pageInfo { hasPreviousPage hasNextPage endCursor startCursor } } } } ;
And this is my loader function:
export async function loader({request, params, context}: LoaderFunctionArgs) {
const {handle} = params;
const {storefront} = context;
const url = new URL(request.url);
const searchParams = new URLSearchParams(url.search);
const brandFilterValue = "brand";
const paginationVariables = getPaginationVariables(request, {
pageBy: 32,
});

if (!handle) {
return redirect('/collections');
}

if(searchParams.has('brandsFilter') && brandFilterValue !== null && brandFilterValue !== '')
{
const {collection} = await storefront.query(COLLECTION_FILTER_METAFIELD, {
variables: {
handle,
...paginationVariables,
sortKey,
reverse,
brandFilterValue: brandFilterValue || '',
},
});
if (!collection) {
throw new Response(Collection ${handle} not found, {
status: 404,
});
}
return defer({
collection,
});
}
}

i am still not getting desired result its returning all the products instead of products which has same metafield in backend. PLease avoid any semicolons issue if there.

[jamalsoueidan]

Please use code tag when you paste code, it's hard to figure out what is what :(

1. Install Search & Discovery app
2. Goto filters and add the metafield.
3. Then try to search again based on your metafield.

[Pankajmehta1998]

Thanks for sharing the details, but i want to apply filter in hydrogen for hydrogen we dont have any package to integrate for filter.
`Hydrogen query: query tumbleDryProducts {
collection(handle: "filterable-collection") {
handle
products(first: 1,
filters: {
productMetafield:{
namespace:"product_care",
key:"drying_instructions",
value:"tumble dry"
}
}) {
edges {
node {
id
title
}
}
}
}
}
my query:
export const COLLECTION_FILTER_METAFIELD = #graphql ${PRODUCT_ITEM_FRAGMENT} query Collection( $handle: String! $country: CountryCode $language: LanguageCode $first: Int $last: Int $startCursor: String $endCursor: String $sortKey: ProductCollectionSortKeys $reverse: Boolean $brandFilterValue: String! ) @incontext(country: $country, language: $language) { collection(handle: $handle) { id handle title description image{ url id } products( first: $first, last: $last, before: $startCursor, after: $endCursor, sortKey: $sortKey reverse: $reverse, filters: [ { productMetafield: { namespace: "custom" key: $brandFilterValue value: "abc" } } ], ) { nodes { ...ProductItem } pageInfo { hasPreviousPage hasNextPage endCursor startCursor } } } } ;
And this is my loader function:
export async function loader({request, params, context}: LoaderFunctionArgs) {
const {handle} = params;
const {storefront} = context;
const url = new URL(request.url);
const searchParams = new URLSearchParams(url.search);
const brandFilterValue = "brand";
const paginationVariables = getPaginationVariables(request, {
pageBy: 32,
});

if (!handle) {
return redirect('/collections');
}

if(searchParams.has('brandsFilter') && brandFilterValue !== null && brandFilterValue !== '')
{
const {collection} = await storefront.query(COLLECTION_FILTER_METAFIELD, {
variables: {
handle,
...paginationVariables,
sortKey,
reverse,
brandFilterValue: brandFilterValue || '',
},
});
if (!collection) {
throw new Response(Collection ${handle} not found, {
status: 404,
});
}
return defer({
collection,
});
}
}`

[jamalsoueidan]

The Search and Discovery is shopify application to allow you to use metafield in your filters in hydrogen :)

https://apps.shopify.com/search-and-discovery?show_store_picker=1

[Pankajmehta1998]

Hi, but its for shopify, i want to apply it in hydrogen/ remix app. I have created custom filters that doesnot work using metafields.

[jamalsoueidan]

Yes, after you apply those filters, you can use hydrogen/remix app to filter on those metafields.
Shopify needs to know which metafields you want to use as filters.

[Pankajmehta1998]

Thank you so much, it worked.

[jamalsoueidan]

Great, mark an answer 👍🏻

[Pankajmehta1998]

sure