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.

Repeating group a list of products

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

Create a page to show 1 database entry

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. 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 sale through to my product page? 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 needs to be search engine optimized. And so a 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 its indexing.

Using the link element for better Bubble SEO

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 sales product. And so if 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 Bubbles 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 the 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.

Using Go to page... workflow

Let's go back. But 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 it through 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, then 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 can click on the iPhone XS and go through to the iPhone XS.