Create shop filter using Custom States & Option Sets

Introduction to Custom States and Option Sets

In this video tutorial, I'm going to demonstrate how to use custom states and option sets to add a filter to this shop catalog page. You can see I have a number of different products, there are different colors and there are different products. T-shirts and pants/trousers for our American viewers. I'm going to focus in this video on color by using an option set.

Why Use Option Sets for Color

An option set is a good choice for color because it is something that I can set on the back end. I know all the colors that are likely to be used, I can set them in as an option set. But I would say it's maybe not a good choice for a category like is it a t-shirt or is it pants or trousers. Because if I want to be able to add categories on the front end, I can't do that of option sets.

Data Structure Overview

So if we just have a look at my data structure so that we're all on the same page. Here's my option set for colors and if I go into my data types products I have got a label and an image and a color set and then if we have a look at the data here are all my data entries and then on the front end I've got a repeating group and a place ready to put my filter.

Setting Up the Filter

Let's get started and let's put in a repeating group into the filter and the repeating group is going to be a type color and I'm going to show all colors and number of columns can be fixed number of rows. Let's make that a bit more flexible and reduce that down to 20 and then I made that a little bit too small for myself. Let's set the cell layout to column and then insert the color so that's the colors label. Make this width and if we check that on the front end. There you go you've got a list of all my colors.

Adding Checkboxes for Color Selection

So I now want to be able to check or to click on one and it only show items in that color. So let's do this with option sets and so I'm going to put an icon into each of the cells and I'm going to change that to a row and let's add a little bit of margin to the side of it and then change it to a box or I think it's square in front. Awesome there we go now I've got a checkbox let's make them a little bit larger. Brilliant and cool looking good.

Implementing Custom States

So I need somewhere to store my custom state. Custom states are a brilliant way for temporarily storing data nothing's getting written to the database nothing's being stored in current user if the page is refreshed your custom states are lost. So I'm just going to store them in fact that'd be a little bit confusing. You can store them on any element just pick something logical for you. So let's call this filter container and let's create custom state here and we'll call it show color and it's going to be a type color okay.

Creating Workflows for Color Selection

Now we need to create a workflow for if a user clicks on the box or clicks on the text. So to cut down the number of workflows we do we're going to group them in a row set the row to 100% of the width of the cell and then now it's in a group we can create a workflow. So when this is clicked we set state of filter container show color to current cells color and then so we can see that in action we're going to add a conditional statement here which is going to change the text box so that's where my custom state is stored show color.

Testing the Filter Functionality

So when show color is current group's color that's referring to just the individual cell icon to check. Let's test that okay and there we go and because I haven't set as a list every time I action it it replaces because the custom state can only hold one value and it's overwritten by clicking another value.

Adding Clear Filter Functionality

Now there's one other thing to add in which is what happens if I want to remove the filtering. So what's quite common on some shops is you'd have a button up here that says clear filter but to demonstrate the process with the checkbox we're going to add some conditional statements here so only when filter container show color is not cells color so it's going to enter the color if it doesn't already contain that color but then I need to have the opposite and I find that color coding these really helps so green is when data is being added red is going to be when data is removed so then I invert this statement so when the filters custom state show color is current selves color I'm going to here's a little trick with custom states if you want to empty you just leave it empty. So I still get the same effect but then if I click again it clears it.

Applying the Filter to the Product Display

Now how do I get this to impact my repeating group? So obviously when the page loads I want everything to appear so I've just got search products with no constraints and then for the purpose of this demonstration let's do it this way so when filter container show color is not empty I'm going to change the data source and so the data source is going to be search for products where color equals filter container color let's see how well that works so black and then you get black white white red got no green think so there you have it in less than eight minutes that's how you can create the beginnings of a product page with filtering using custom states and option sets in a future video we'll explore how you might use different categories like different types of clothing and so watch out for that we'll be recording that soon.