Introduction to Bubble.io and Product Listing Pages
In this Bubble tutorial video, I'm going to show you how you can take a list of items like this, a list of iPhones, and link through to one page about one item in your database. In this case, I'm thinking this is an e-commerce site. I've got a list of products and I'm going to link through to a page just about one product. Before I get started, make sure you like and subscribe if you've been watching our videos for ages or you've just started. We are PlantNoCode. We've got over 100 Bubble tutorial videos. We've got even more videos on our website, planetnocode.com, where there are member exclusive videos. So do go out and check our membership if you are wanting to learn more about Bubble.
Creating a Product Page in Bubble.io
But let's launch right into this. I have a page here and I've got a list of products and I'm just showing a repeating group of search for products. To link through to another page, I'm going to first of all create that page. So I'm going to create a page called product. And this is not going to be a lesson in UI design. I'm just doing this really quickly to demonstrate how to link through to the page. So I'm going to put in... First of all, let's make the type of content for this page product. Because that means that when I link through to this page, Bubble knows that I have to pass a single product to this page because this page is all about displaying one product.
Displaying Product Information on the Page
So now that the page is set as a product, I can go current page product image. And I can go current page product label. And I'll just put one more in because there's a description. And I can go current page product description. Going back to the product list, how do I link from my repeating group from one cell through to my product page?
Two Methods for Linking to Product Pages
So there are two ways to do it. I'm going to show you both. One is if you have SEO in mind. Does your app need to be search engine optimized? And so, you know, front end e-commerce site, you want Google to be able to easily index and follow your links. And so if you need that, we need to use the link element. Because on the page HTML, this actually puts in an HTML link for Google to follow this indexing.
Using the Link Element for SEO-Friendly Navigation
So I'm going to say view more. And I'm going to link through to the product page. And I'm going to send current cell's product. Let's say I preview that. And I click view more on the iPhone 14. You'll see that I go through to the iPhone 14 page. Now one thing to note here is this is Bubble's way of just helping you along. The fact is that the product URL, now there are ways of changing this. You can update the slug. That's a topic for another video. But just to point out, this is the unique ID of the iPhone 14 in my Bubble database. And yeah, Bubble just populates the URL field automatically for us. So it takes us through to the iPhone 14. Let's go back.
Creating a Clickable Cell for Product Navigation
So what if I wanted to make this whole cell effectively a link or a button to go through to the product page? So let me show you how to do that. We'll delete our link. I'll put all of the content in my repeating group cell into a group. And I'll add a workflow to that group. So this is a navigate go to page product. And you see here Bubble insists that I send the product across to this page. And then if I go preview. So now if you look at the mouse cursor, it knows that all of this is a button effectively. All of it is a link. And so I can click on the iPhone 14, go through to the iPhone 14. I can click on the iPhone XS and go through to the iPhone XS.
Conclusion and Additional Resources
So remember check out our website planetno-code.com where we've got even more videos showing basically anything you can imagine how to do with Bubble. Head over to our website planetno-code.com.