Create product catalog with filters and search field using Bubble.io

 

In this article we will continue to tell you how to create a small online marketplace without writing a code. Our demo marketplace is intended for software publishers, who can promote and sell their software products. For this purpose we are using – Bubble.io Current article is fourth part of our full guide. You can read our first part where we explained how to set up different user roles of online marketplace. In the second article where we explained how to configure the product database for our project. In the third part we described how to create a seller’s dashboard.

In the current article we are going to create a catalog page of our small marketplace. Product catalog page should consist of 3 parts:

1. Product list . We display all our products in it.
2. Categories filter. Each software product belongs to at least one category. This is why we want to add categories to the filter.
3. Text search field. We want to create flexible search input. It will allow you to search products by any text attribute of products: title, description, free options and others.

Before we start, let’s remember some important points, described in detail in our previous articles. For software products which will be sold in our marketplace we created new content types in our database. Each software product will have such attributes:

As you can see, when a user tries to search by input text in the search field then our application will search products by such attributes: deployment, description, free options, price type, recurrent payment period, title, url of product page, Slug. Not all attributes are useful in search but we use them just for demo purposes and to give you an idea how Bubble.io search works.

For detailed information about create application database you can follow this article .

How a product catalog works.

We are going to create a pretty simple catalog page. It will consist of :

• product list We display all products inside this list with following columns: title, price, Date creation and description.
• search field We can search products by all text attributes of products in our database. Not only those of them which are displayed in columns of the product list.
• Drop-down filter element. It allows us to filter products by categories.

Create Product List

First of all, let’s add a new page, where we will create our catalog with search input and filter dropdown. Bubble.io provides a ‘Repeating group’ element. It is used for displaying data in list form. We need to use it for our goals. Put this element to our page. Also, put to our page two other elements: Input and Drop-down. After that we give the title ‘Input Search phrase’ to Input element and ‘Dropdown Choose deployment’ for dropdown. Select the ‘Dropdown Choose deployment’ element and double click on it. ‘Element Inspector’ opens. You need to fill its fields:

• Choose deployment in placeholder field
• Dynamic choices in ‘Choices style’ field
• Software product in in Type of choices field
• Search of software products’ in Choices source field
• ’Current options deployment’ in Option caption field

After double clicking on Repeating group element. In ‘Element Inspector’ we need to select ‘Software product’ in Type of content field. After, in the Data source we need to select Search for software products. When we do this selection Bubble.io opens another additional window. If not then just click on ‘Search of software products’ blue text.

In new window you need:

1. select ‘Software product’ in Type field (mark 3 on picture)
2. click ‘Add new constraint’ button (mark 4)
3. select ‘Any field contains’ → Input search phrase’s value. Do not forget that ‘Input search phrase’ is our search element. (mark 5)
4. click ‘Add new constraint’ button again (mark 4)
5. select deployment = Dropdown Choose deployment’s value’s deployment
6. select checkbox in ‘Ignore empty constraints’ field (mark 7)

In other words we told Bubble.io to do such : display those products which:

• one of their text attributes equal text, entered in ‘Input Search phrase’ AND
• deployment attribute equal to value selected in our Dropdown

Also we selected the ‘Ignore empty constraints’ field. This allows us to show all products even if we do not fill neither search field nor dropdown. Without this Bubble.io does not display any product until we select some value inside the filter or input relevant text within the search field.

Last thing we need to do is to configure the cells of the list where we want to display the product’s attributes. For this we need to drop a text element into the first cell. Notice that it repeats in every other cell in the repeating group. Whatever we design in the first cell will repeat for every entry that we search for.

Click ‘edit me..’, then click to “Insert dynamic data” in its Text Property Editor.

Because the element is inside a cell of a repeating group, we can choose a new expression called “Current cell.” This is why Bubble lets us choose “Current cell’s Software product” because that’s the type of content of our repeating group.

Then select the title. So in the first column we will display the title of the product.

After, we need to replicate the same for rest columns: price, Creation Date and Description.

Finally we need to align text elements in the cell. Also we can add icons to search and Dropdown elements. To see the result we need to click the Preview button in the top-right part of the page. If everything has been done correctly and if we populated the products database then we can notice that all products are displayed in the list. We can try to select different values in the dropdown. It should display only those products that correspond to selected deployment. Also list changes when we try to enter some text in the search field. You also can notice that both: search input and dropdown affects simultaneously on displayed results. For example let’s imagine that we have such list of products in our database:

If we select ‘windows’ in the dropdown and enter the word ‘Test’ in the search field then only the first product ‘Test software1’ will be displayed.

Conclusion

In this article we have learned how to create simple catalog page for our small online marketplace using Bubble platform. In particular you learned how to: combine search field with dropdown filter. If you have an interest in this you can subscribe to our blog updates. Also if you have some questions regarding the subject of this article then you can ask us using our consultation page