Filter products by collection

feature

#1

My client and I use collections to tag products in a way to tag a product e.g. as “limited” or “new”. A feature on our roadmap for our shop is to be able to filter products on the products page by its tags. For example the customer could filter the products by all “new” ones.

My current solution to this is client-sided filtering. It works but I am not that happy with it. It might be nitpicking, though, I think a server-sided solution to this would be great.

My approaches to this are (client-sided):


  1. Get all products which shouldn’t be a problem since we probably fetched all of them already anyways because we are on the products page. Iterate through all of them and find all products which are in the desired collection:

    function getProductsForCollection(products, collectionID) { return products.filter((product) => product["relationships"].collections.data.find((collection) => collection.id === collectionID)); }

Usage:

const productsInCollection = getProductsForCollection(myFetchedProducts.data, "812a388c-0ac4-4e14-8191-0bc2db6fd615");


  1. Fetch the desired collection, include products and then iterate over all products and fetch them individually. I don’t have code for this since I prefer and use the first method. You can ask me though, if you need any help!

I hope I could help someone in the meanwhile there is no real server-sided solution! :grin:

— Oscar :+1: