Can I filter products based on an Integer Meta Field?

Highlighted
New Member
4 0 0

Hi,

I am looking for a solution to filter products based on a number Meta Field. The actual example is I am selling house plans each with a unique Square Footage. I want to provide users a filter with two text boxes for Min and Max Square Footage. When the user fills in Min and Max Square footage, I would like to show all house plans with in that range. Is this possible? I know this can be accomplished with tags with predefined ranges but that is not what the client wants.

Example: A user wants to see all house plans from 1520 to 2038 square foot. All house plans with in that range should show up. 

0 Likes
Highlighted
Shopify Expert
9933 106 1766

Hey Nick - how many plans are we talking about in a collection?

If 50 or less, you'd be able to show all plans on the one page. With that in mind, it would be simple enough to add the metafield value to each grid item (perhaps as a data attribute). Your JS could quickly toggle the appearance of each item depending on the rules on the footage filter.

Now if more than 50 things get more complex. You'll need to grab ALL item data in the collection (via AJAX). You would then add / remove plans to the DOM based on the filter data. Expect the "grabbing" process to take a bit of time if your collections are massive since each AJAX page call will burn time.

Max items you can loop over is 50 in a normal template layout. A layout-less collection template can loop over 1000 items at once - handy if you're looking to return a JSON string. If it was me, I'd be using the layout-less option. You'd add the smarts to cache that data locally to avoid having to grab it each time.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
4 0 0

Thanks Jason. We have about 150 plans. The biggest collection has 70 plans. I will try the layout-less collection template like you said. Could this work in conjunction with other filters like we have on the homepage of https://houseplanzone.myshopify.com? I assume I would have to submit the form to a page that makes an ajax call to the layout-less collection template with all the filters besided the min and max square footage? Then use javascript to hide those plans not within the range?

0 Likes
Highlighted
Shopify Partner
1365 24 239

Jason's repose is right on the money. This can work in conjunction with any other filter parameter if that data is assigned to product as a metafield.

This is a test example that uses something based on what Jason mentioned: https://filter-3.myshopify.com/collections/guitar. It is a multi level filter, its just a test. The metafield you set on the product can have a JSON encoded string with your product filter data:

{
  productId: 3621379783,
  bedrooms: 2,
  baths: 1,
  sqft: 250,
  ...
}

You create a layout-less alternate template that will hold all of this metafield information, mine looks like this: http://filter-3.myshopify.com/collections/guitar?view=filter-json

Fetch that via AJAX/XHR, parse it and match the products based on the filter options

Fetch the products from another layout-less alternate template: http://filter-3.myshopify.com/collections/guitar?view=filter

On that template I have on each product set an ID with the productID. this makes easy to find the matching products.

This is one way to do this type of advanced filtering. I think its a bit off Jason's method but the logic should be the same.

Hope it helps.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Expert
12 0 3

Hi all,

I'm working on live filtering blog posts so I can separate them for my client by year (they have a lot, from 2012 - 2018)

Following your example,

1) I returned all blog article results with this code (json output here):

{% layout none %}

{"articles":[
{% paginate blog.articles by 1000 %}
  {% for article in blog.articles %}
    {  
       "article":{ 
            "id" : {{ article.id | json }},
            "body_html" : {{ article.content | json }},
            "title" : {{ article.title | json }},
            "url" : {{ article.url | json }}
       }
    }
    {% unless forloop.last == true %},
    {% endunless %}

  {% endfor %}
{% endpaginate %}
]}

Next step is figuring out the filtering. I've posted some of the base code here:

https://codepen.io/stevenchu/pen/rvxJRx

 

See my final filtering here: http://marissa-webb.com/blogs/press

Stores I built: Flora1761.com (highly art-directed Nail Lacquer boutique) / Marissa-Webb.com (NYC SoHo Fashion Brand) / ViraniJewelers.com (high-volume product jewelry website) / Chuubie.com (my personal testing ground, using Shopify CMS as a stock photography sales platform)
0 Likes
Highlighted
Shopify Partner
1958 123 433

Hi @Nick_Defelice 

I hope you are doing well.

I think you are looking for a custom solution for your meta fields based filters. You should try Sparq product filters and search they have the option to build the filters based on meta fields and for your specific requirements they can build a custom solution as well.

Let me know if you need anything else. 

Sparq is a fast and beautiful product filter and search solution for Shopify store owners. It allows store owners to add a custom tag, metadata, or variant based filters on their collection page and upgrade their default search to an extremely fast, more user-friendly and feature-rich search.
0 Likes