How to Mix Product Filter and Search with Metafields Manager in Shopify

When you are developing a Shopify store and you run out of content buckets in Core Shopify, you will need to enlist some sort of Metafield “app”. There was a front runner for a long time that my clients found clunky to use, even though the interface was nice and appeared to be core. The app I am talking about relies on a Chrome browser extension to inject some HTML into the Shopify admin so you can read and write to those nice little Shopify meta data fields. This app was problematic due to the environmental concerns I just touched on and because it only would appear AFTER a product or page or some other Shopify object was created. The runner up that I am using for meta management still requires that an object be defined before meta stuff is tooled with, but there is no issue with differing consumption environments. A user simply selects “More Actions” from the editor and they can add and modify meta data all they like.

This lovely app is THE BEST AGENCY’s Metafields Manager

I’m not going to sit here and suck the big old digital dick of THE BEST AGENCY too much, but I am going to go into using this very handy app along with another Shopify enhancement, Product Filter & Search. That being said, I will send a slimy lipped shout to Tony Ng from Boost Commerce (creator of PF&S) for the incredible customer service and support.

Now, I didn’t start development on this project and I probably would not have recruited Product Filter & Search, but the client got purchase happy and feature lusty, so I inherited these requirements the minute I became involved with this job.

Aside from styling, some app config, and some namespaced metafield calls, these apps both worked exactly as stated the minute they were installed. Where the issues cropped up was with their combined usage and the well thought out limitations of Shopify.

Where I ran into problems was on the asynchronous load for paginated items on the COLLECTIONS/ALL page. When you render your collections index and have these puppies running, you can do anything you normally would do with Liquid. For example, this collections index had 24 product blocks on initial load out of a total collection of 56 products. The product listing consisted of:

  • product.title
  • product.price
  • product.metafields["somenamespace"]["key"]
  • product.images[0]
  • product.url

OK, that is all fine and dandy, but do you see that product.metafields entry?  That sucker was not available to me through the normally exposed bits of the product object.  The JavaScript that PF&S uses to inject subsequent products into asynch pagination uses only the publicly available properties of the product.  I was not going to write some inside app for this to gain exposure into metafields.  I was also trying to access the metafields through $.getJSON at THE BEST AGENCY, but the speed with which these items was coming down and their index within the object was unreliable.

I had to get dirty.

My circa 1997 solution to this problem was to return all product IDs and the metafields I wanted from product 50 and beyond in a hidden table (yes… DISGUSTING) and hide it at the bottom of the page.  The 51 and beyond is due to Shopify’s limit on product data return to a page with a layout in place being 50.  I think it is like 1,000 on a page with no layout declared.

Anyhow, in the bc-sf-filter.js I simply accessed the table by product by product ID (which is of course available in any view) and I populated the metafield in the markup on pagination-click.

Talk to me if you have a better way or I am making NO SENSE on this.


Leave A Comment