Documentation for Colour Filtering

[simonhrogers]

Hey Rylan,

Firstly thank you so much, the work in this repo is really incredible and it has made working with Shopify and Sanity in a Nuxt context such a breeze. I’ve done multiple small shops in various iterations of Nuxt / Sanity / Shopify since about 2020 and this is by far the easiest time I’ve had with it.

I wanted to share some small learnings having worked through the process of setting up color filtering.

1. I don’t think it is documented currently that you need to add "Filter Color" as an option referencing the product metafield to Search & Discovery, I could only see instructions to do this for "Color" referencing the product option.
2. I was trying for a long time to get my head around why all of the color filtering was setup in this way. Unless you are familiar with the limitations of the Shopify Storefront API, specifically that you can only filter on the following, limited range of metafield types: https://shopify.dev/docs/api/storefront/latest/input-objects/MetafieldFilter – prior to understanding this I was wondering ‘why on earth does this feel so brittle and how am I going to explain that all of this is necessary to my client and help them remember it? Now I understand: Shopify requires it. You can’t just directly filter on the Filter Color metafield as it’s a metaobject not one of the supported primitives. Honestly thank you again for figuring all of this out. It’s the kind of thing Sanity makes trivial but its so nice to have everything in Shopify like this if it can be. A short note explaining this challenge would be very helpful for the uninitiated I think, although I appreciare your desire to keep things simple. If it hadn’t been for the confusion caused by point 1, I wouldn’t have dwelled on it for as long as I did tbh.

I hope these thoughts are useful, and thanks again for all the wizardry and hard work !!!

[rylanharper]

Hey @simonhrogers!

Thanks for the kind words on the project. Sorry to get back to you late - I had a busy week last week and was gone all weekend.

Hmm yes, you are correct. After looking at docs I did indeed forget to add the part where you need to add the filter color to the Search & Discovery options. I'll be sure to add that in. Also, you're right.. The API is indeed very limited regarding metafields and metaobjects, which is unfortunate.

A couple of things to be aware of regarding the future of this project.. The first is that I am working on an update to simplify everything in this template. Like moving all the repeated scripts and data fetching queries into their own composables and also will be simplifying the collection filter params to take in the default filter IDs, which will hopefully solve the issue of having to add organize colors into groups that match the metafield filter color option. Yes the url will look "messier" when params are selected, but this is whats seen on almost all other Shopify stores and shouldn't be too much of an issue.

I also will be migrating this project to be using the Nuxt Shopify module, now that caching support has been added. I keep in contact with the author via Discord and we chat about ecom every so often. He is a phenomenal engineer and the module is built extremely well. The only reason I didn't migrate sooner was that the cache support just wasn't there. I will keep the current version of this project on a separate branch though (after I make the first update, which I mentioned above).

Just some things to be aware of! Glad you are enjoying this template:)

[simonhrogers]

Pleasure!

And thank you so much for sharing all of these developments, makes total sense :-) The query params for filtering displaying human-readable names is a very nice touch, but I am constantly surprised by the number of normal a.k.a. ‘real-world users’ that are totally oblivious to details like this (and Safari users don’t really see the path section of URLs at all, which I’ve always found peculiar). I think your thinking to simplify it is probably positive for most developers using of the repo. Fussy people like me can build some logic for making them human-readable again if we feel inclined to do so.

[rylanharper]

@simonhrogers The filters have been updated with the recent PR and this is no longer an issue. I have add a handy filters.ts composable and updated the getFilterValues helper, which takes each active filter ID from the URL, looks up the corresponding Shopify filter data, and parses its input field to be pushed it into the filters array. This also means the filter can now easily take in Metafields and Metaobjects!