Filter products in a repeating group by data type with Custom States

Introduction to Custom States and Option Sets

This video is a continuation on from a previous video where we looked at how to use custom states and option sets to filter products. So I've got option sets as my colors and by clicking I can toggle between and filter down my products and my product page here.

Using Data Types for Categories

This video is going to concentrate on how we can do a similar thing but without using option sets. This time we're going to use a data type and that data type is category and that's how we're going to group together whether it's a t-shirt or whether they're trousers or pants.

Understanding the Data Structure

So if we just have a look at my data so that we're all on the same page, quick reminder in option sets I've got my colors and colors make a good option set because I want to dictate that from the back end. I'm unlikely to need to add a color on the front end whereas categories I might want to add in the future for people to add different categories different types of clothes on the front end so I'm using it as a data type and then within products has got a field of type category labeled category and color with the option set colors.

Setting Up the Repeating Group

Let's go on to our front end here and to make this really quick we're just going to duplicate the repeating group we used for colors and let's add a bit of margin onto the top and then set up our data sources. So this is going to be a data source category and then I want it to list all the categories that I've got in my database.

Updating Data Types

Oh and because I've changed the data type I need to update it here. There you go, easy mistake to make it still thinks that they're colors and category label. Okay there we go and now let's set up our custom state.

Setting Up Custom States for Categories

So we're going to be using the same location keeps it simple as our custom state for colors so this time it's going to be category. It's going to be a type category and then we do a very similar custom state flow to add in a custom state. I like using the colors if it's going to add data I use green if it's going to remove it I use red say category to current selves category and then we need to add the condition.

Conditional Statements for Custom States

You go you add the data in or you remove the data but we're using the same group as a button to do that so that's why we add in this conditional statement so when category is not to count selves category then we set it and let's duplicate that and this is going to be removing the data so that we can clear it out and make that blank.

Testing the Setup

Let's just see if that works in practice. I need to update my conditional statement on my icons so when is category is parent groups category fine right that should work now you just viewed these a couple of instances where when you copy and paste stuff and change some parts it doesn't always translate across well and can you remove it yeah you can remove the check.

Applying Filters to the Repeating Group

Okay how do we apply that to our repeating group so at the moment I have it set up that the repeating group shows all products no constraints but then when a filter of color is applied so this custom state isn't empty I update the data source now that works but it's not going to work well if I'm trying to filter it by two different like parameters so instead of using conditional statement I'm going to move that over to here and say filter by color color equals and then find my custom state show color and let me just show you what that does right now.

Handling Empty Constraints

So my custom state is empty and so my repeating group is empty because there is no color but if I check this box here ignore empty constraints color is going to be empty until I check a box but that's ignored and so I can do a similar thing with category category equals filter container and then yeah ignore constraints let's see how this works.

Final Results and Conclusion

So color is back to how I expect and now so is my categories so that works but it wants to go red doesn't work because there are no red trousers so there you have it there is a quick overview of how we've used option sets in the past for colors how we've used a new data type category for categories and how we've used custom states to filter a repeating group and in fact how we've been able to merge two filters together so that we can filter by both color and by clothing category.