Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Create shop filter using Custom States & Option Sets

In this Bubble.io tutorial video we demonstrate how you can filter your products on a shop product page in Bubble.io. We'll be using Custom States and Option Sets to create this essential feature if you're building an ecommerce store with the Bubble app builder.

In this video tutorial, I'm going to demonstrate how to use Custom States and Options Sets to add a filter to this shop catalogue page.

So you can see I have a number of different products. There are different colours and there are different products. T shirts and pants / trousers for our American viewers.

Option Sets

I'm going to focus in this video on colour by using an Option Set. Option Set is a good choice for colour because it is something that I can set on the backend. I know all the colours that I like 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 frontend, I can't do that of Option Sets. So I would see categories in this example as being a little bit more fluid. I want to give myself the possibility of creating more of those data types in the front end, whereas colour, I'm confident I can lock that in in the backend as an Option Set.

Data structure

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 colours. If I go into my data types products, I have got a label and an image and a colour set. Then if we have a look at the data, here are all my data entries. Then on the front end, I've got a repeating group and a place ready to put my filter.

Repeating group

Let's get started and put in a repeating group into the filter. The repeating group is going to be a type colour and I'm going to show all colours and number of columns can be fixed, number of rows. Let's make that a bit more flexible and reduce that down to 20. Then I made that a little bit too small for myself.

Let's set the cell layout to column and then insert the colour so that's the colours label. Make this width. If we check that on the front end. There you go. You've got a list of all my colours. So I now want to be able to check or to click on one for it only show items in that colour.

Icon checkbox

So let's do this with Option Sets. I'm going to put an icon into each of the cells. Now I need to change that to a row. Let's add a little bit of margin to the side of it and then change it to a 'box', no I think it's 'square' in Font Awesome. There we go. Now. I've got a checkbox. Let's make them a little bit larger. Brilliant and cool. Looking good.

Custom States

So I need someone to store my Custom State. Custom State is a brilliant way for temporarily storing data. Nothing is getting written to the database nothing is 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 a Custom State in here and we'll call it 'Show Colour'. It's going to be a type colour.

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 the group, we can create a workflow. So when this is clicked, we set state of filter container Show Colour to current sales colour.

Conditional statement

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 my Custom State stored show colour.

So when Show Colour is current groups colour, that's referring to just the individual cell icon.

Let's test that.

There we go. Because I haven't set it 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. 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 of the checkbox, we're going to add some conditional statements here.

So only when filter container Show Colour is not colour, so it's going to enter the colour if it doesn't really contain that colour. But then I need to have the opposite and I find that colour coding is 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 Custom State Show Colour is current sales colour, I'm going to here's a little trick with Custom State.

How to clear filter

If you want it empty, you just leave it empty.

So I still get the same effect, but then if I click on it again, it clears it. Now, how do I get this to impact my repeating group? Obviously, when the page loads, I want everything to appear. So I've just got search products with no constraints. Then for the purpose of this demonstration, let's do it this way.

So when filter container Show Colour is not empty, I'm going to change the data source. So the data source is going to be search for products where colour equals filter container colour.

Let's see how well that works. So black and then you get black, white, red got no green, I think. So there you have it.

Wrap up

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.

So watch out for that. We'll be recording that soon.

 

Latest videos

menu