How to build a comparison table for an ecommerce app

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

In this Bubble tutorial we demonstrate how to create a comparison table in Bubble. This nocode tutorial will show you how to add checkboxes to a repeating group list of products and send 2 selected products to a new page.

. Let me show it to you. And I want to send through the iPhone 14 and the iPhone XS through to another page and then be able to retrieve that data that I've sent through to it.

How to create a list with a Custom State


So to do that, I need to use a
is a great way of temporarily storing data, and so I need to be able to temporarily store which of the products in my repeating group I've selected to link through to the new page. So I'm going to create a custom state on my page. It doesn't matter where you create a custom state, just do it somewhere logical. You're not going to forget about it.

I tend to create them on the page level because then I know where they are. So I call this Selected Products, and it's going to be of type product. And then I'm going to say when this icon, which I'm using as a type checkbox is clicked, I'm going to
.

And then last thing to create this temporary list is I want to give some visual feedback that it's indeed the case. So I could say when product list, selected products contains current sales product, then I'm going to change the icon to check. Let's preview that. So you can see we are updating our custom state. And now, how do I send the contents of the custom state across to another page? Well, here is just one way you could do it, which would be to say, let's add in our compare
. Yeah. So I'm going to say link through or navigate to go to page. And I've got a page called compare. And now, date of the send would be appropriate if I was sending one element, or if there was a main element and then there were secondary and tertiary ones. But there aren't in this case. I just want to send multiple ones.

Using Send more parameters to the page


So I could say product 1, and then I'm going to refer to my custom state and say selected products item 1, unique ID. And I'm going to say product two. I'm going to copy and paste this because it's all the same apart from item two.

So let me just demo what that does. So iPhone 14, iPhone XS. And then if I click Compare, you can see that bubble puts the unique ID for the iPhone 14 and then the iPhone 6S in the URL. And so now that it's in the URL, I can retrieve it. So I can go to my Compare page, and I'm going to add in a group. And I'm going to say this group contains product. And then I'm going to say get data from URL. And I'm going to say product one, and then tell it to expect product. This is just by all being really helpful. It's going to convert the unique ID, recognize it, and convert it back into a product. And so then I can add in an image and say current groups product image. And I'll add in a text label, current groups product label. And then I'm going to copy and paste this. And instead of product one, we'll say product one, product too.

So if I go back to my product list page, and then click preview, let's this time do the iPhone XS and the iphone 3GS. And I'll just hold it.

So I'm going to click compare, and you can see that it knows which products to display because it's retrieving data from the URL. So there you have it. That's just one way of sending multiple data entries through to a page. In this case, I'm demonstrating a simple e-commerce comparison, compare product table. You can see where I could easily go from here. I could start listing the price and the description of other items. I'd put a back button in. But that's just to get you started with one way of sending two bits of data across.