How to build a comparison table for an ecommerce app
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.
Unlock the power of custom states: Learn how to send multiple products to a new page in Bubble's no-code platform!
Master e-commerce comparison tables: Discover the secret to creating dynamic product comparisons using repeating groups and custom states.
Transform your Bubble skills: From custom states to URL data retrieval, learn essential techniques for building advanced no-code applications.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.