We were working on making changes in an e-commerce website where we needed to filter products based on the attributes they have, like colour, size, shape etc. In our case we were having products which have multiple attributes and values, so a product can be available in multiple colors in different sizes. Our major concern was how to identify the set of products to display by filtering them based on these multiple attributes. 

We would like to show an incremental solution we adopted to this problem. The jQuery filter method was very helpful in approaching to a solution to this problem.

Problem (level 1) Single Value Single Attribute: We have a grid of products which have a single attribute (say colour) and a section of filter checkboxes which would filter out the products based on colour as per the checkboxes selected. This means that every product can have only one color.

        

Whenever a filter checkbox is clicked

1. Hide all products
2. Find all the checkboxes with a checked state
3. Create a filter string matching the colors selected
4. Filter products
5. Show the products that fulfill the filteration criteria

Here is the working example:

Product Filter Level 1

Problem (level 2) Multiple Attributes Single Value:  We have grid of products which have more than one attribute (say colour , size , shape) with a single value and a section of filter checkboxes which would filter out the products based on these attributes as per the checkboxes selected. Every product in this case can have only one color, one shape and one size.

              

Suppose we want to filter by color ‘Red’ and size ‘Large’ When more than one checkbox is selected from each attribute then we would need all the possible combinations. Let’s take an example: Selected checkboxes from colours – Red , Blue. Selected checkboxes from size – Medium, Small. Now, the possible combinations would be

1. Red Medium
2. Red Small
3. Blue Medium
4. Blue Small

But what if the data set grows. Say we have 10 different colours and 15 different sizes. How can we find the combinations if say 4 colors and 3 sizes are selected? What if we add another attribute shape? The data set would keep growing and thus making it difficult to find the possible combinations. In order to tackle this problem, what we did was whenever any checkbox was selected we sorted the original set of products based on all the attributes present.

On each checkbox click:

1. Hide all products
2. Iterate over an attribute (say color)
3. Find the checkboxes selected for that attribute (say red and blue)
4. Create filter string ([data-color='red'], [data-color='blue'])
5. Filter the original set of products and store these
6. Continue the same process on the filtered set of products iteratively for the remaining attributes(size, shape)

Then show the final set of filtered products

Product Filter Level 2

Problem (level 3) Multiple Attributes Multiple Value Combinations: We have grid of products which have more than one attribute (say colour , size) with multiple value combinations and a section of filter checkboxes which would filter out the products based on these attributes as per the checkboxes selected. Here, the problem is a product can be available in more than one color-size combination. For example, Product 1 has the following combinations (or variants) available: Red and L, Red and M, Green and L.

In order to tackle this problem, we can consider a product as a large box with hidden small product boxes( or combinations) having the attributes (multiple attributes single value i.e. product level 2). We can filter the hidden small boxes but show and hide their parent large boxes.

Let’s do it with an example. Consider two products:

Product 1 and Product 2 (large boxes)

Variants/Small Boxes for Product 1- Red L, Red M, Green L, Blue S Variants/Small Boxes for Product 2- Red S, Yellow M, Green L, Blue XL

       

Here, whenever a filter is selected the small hidden boxes are filtered and their parent bigger product boxes are shown/hidden.

Selection	Product 1	Product 2
Red	Visible	Visible
Yellow	Hidden	Visible
S	Visible	Visible
Green L	Visible	Visible
Blue S	Hidden	Hidden
Red L	Visible	Hidden

Product Filter Level 3

This solved our problem.

Please share your suggestions to improve this implementation we would be happy to try it out.