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