How to build a comparison table for an ecommerce app

Introduction to Custom States in Bubble

Here's how to send more than one item in your database through to a new page. Before we get started, are you a Planet No Code member? Have you checked out our website? We have even more exclusive Bubble tutorial videos on our website planetnocode.com. And if you're a friend of this channel, have you liked and subscribed to this video? That really helps us with the old YouTube algorithm. But let's dive into this.

Setting Up the Repeating Group

I have a repeating group of products. 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. So to do that, I need to use a custom state. A custom state 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.

Creating a Custom State

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 a type product. And then I'm going to say when this icon, which I'm using as a checkbox, is clicked, I'm going to set state of my page, selected products.

Setting Up the Workflow

And with custom states, you have to refer to the existing group and then plus or minus to add or subtract an item from it. So I need to refer to my page again. Product list, selected products, plus... Ah! I need to make my custom state a list. There. So then if I go back into workflow, I can say selected products plus an item, current cell's product.

Adding Conditions to the Workflow

I like color coding here because there are two workflows I need to really run this well, which is to add a checkmark in, add a product and remove a product. And so on the add workflow, I need to add a condition to only run when product list, selected products does not contain current cell's product. I'm going to copy and paste it, change this one to red and say when it does contain minus item.

Adding Visual Feedback

And then last thing to create this temporary list is I want to give some visual feedback that is indeed the case. So I can say when product list, selected products contains current cell's 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.

Sending Data to Another Page

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 button. So I'm going to say link through or navigate to go to page and I've got a page called compare. Now, data to send would be appropriate if I was sending one element or if there was a main element and then there were like secondary and tertiary ones, but there aren't in this case. I just want to send multiple ones.

Setting Up URL Parameters

So I can say product one and then I'm going to refer to my custom state and say selected products item one, unique ID. And I'm going to say product two and 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.

Retrieving Data on the New Page

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 a 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.

Displaying the Retrieved Data

And so then I can add in an image and say current group's product image and I'll add in a text label, current group's product label. And then I'm going to copy and paste this and instead of product one, say product two. So if I go back to my product list page and then click preview, let's just do the iPhone XS and the iPhone 3GS and oldie. 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.

Conclusion and Next Steps

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. And that's just to get you started with one way of sending two bits of data across.