I have successfully created an Index List Page for Metaobject by following Liam Griffin’s tutorial here. But I’d like to have a filter to filter the Metaobject entries as well, otherwise the index list page is meaningless. For example, filter the chefs by location in Liam’s example.
Following the example, you could add a location to each chef and loop through them to grab the locations and then list those separately and filter via CSS or JS.
CSS would utilize radio buttons and you could use :has() to show/hide based on which button is selected. Effectively 1:1 match of location name on the elements & radio buttons.
(Looping through the locations to set up the CSS with the location data…)
Or just use some JS instead to show/hide.
Hopefully that suggestion helps you get to the result you are wanting!
thank you, so there’s no way to utilize the Search & Discovery’s filter? Since I’d like to have several filters like “City”, “Country”, “Cuisine Style (multiple values)” etc.
or maybe the worst case is, just create and treat each chef as a ‘product’ and create product metafields for chefs…
You could set it up with multiple filters, though as far as I am aware it would be client-side filtering, which is not necessarily a bad approach.
You would need to use blog posts for tag-based filtering or you could utilize metafields or tags on products for the filtering using the Search & Discovery app.
This dilemma sounds a bit similar to something @taylor shared recently when talking about metaobjects.
Yeah, at least at the moment there’s no way to loop in content for metaobject pages, or metaobjects in general, to Search and Discovery. The only way to surface anything akin to this is going to be writing your own JS and/or combining with a bit of CSS to conditionally display results.
Search and Discovery the most accessible content you can get is some filters and even then, storefront filtering is only supported on collection and search pages. So you can’t get Search and Discovery supported filtering on metaobject pages or standard pages.
We have done some very basic metaobject filtering recently just using some JS/CSS on the ShopDev Alliance members page. Clicking on the “Open for Work” button just applies a class to the body and there’s a CSS rule that hides all members without a open-for-work class. It’s the fast/simple option for the moment before we spend proper time to build out some robust search/filtering. But you could easily do the same with data-attributes or something of the like as well to make multiple filters easier.
@RobDukarski is spot on with current most accessible approaches that don’t involve you writing your own search unfortunately.
Thank you so much for the info and the example! We will just try this approach at the moment, hopefully Shopify will include Metaobject filtering in Search and Discovery in the future!