Intro to Product listing page using Repeating Groups

Introduction to Repeating Groups in Bubble

This video will serve as a good introduction for how to use and make the most of repeating groups in your Bubble app. I'm also going to include some kind of handy tricks and shortcuts that I've picked up over the years building with Bubble. So this is a new beginnings of a marketplace website and I have my product page here to show a single product. But I want to be able to display a list of products too. So I'm going to create a new page called "listings" and let's just make it... In fact I'm going to copy my index page just so I get my header and footer, or just my header, and then delete the content of the page so I'm left with my header.

Setting Up the Repeating Group

Repeating groups are immensely powerful and a fantastic way for displaying a list of items from a data type. So I'm going to set my data type here of product and just so you can see what's going on behind the scenes, I've got three products in my database, just three different items of clothing, each with a price and a thumbnail image. And we're going to be putting that data into this repeating group.

Configuring the Repeating Group

First of all, let's get the repeating group to fill up our page and then we have to just adjust some of the settings here to really get the most of it. On appearance, columns, I think three columns is quite good for a product page. We want to get rid of fixed number of rows because we kind of want it to extend as it goes down. We are building this out the whole way through with the idea of making it as easy to make responsive in its design as possible. So we're just bearing that in mind as we build it.

Adding Fields to the Repeating Group

Right, so let's start adding in fields. So we have an image field. And in layout, I'm going to change my sales container layout to column. I then make my image for width. I'm going to put a standard photographic aspect ratio in there just so that my image doesn't appear squished in any way. And then we need to have a title. I'm just going to use the default ones that Bubble was providing here, just so I can do it quickly. So adding in dynamic data, we refer to the cell that it's in, so current cell's product title. And then let's make that for width. And get rid of that mean height.

Responsive Design Considerations

I want to be able to control again, building a responsive app is always the primary thought process in my head. So I don't want to like over exaggerate height with these fields. I want to use my margins and my padding, just a bit of best practice for you there.

Adding Price Information

So we've got title and then the last information to pull forward onto this page is going to be price. So current cell's product price. If we have a look at my database, price is a number field. So in order to display like currency, I could add currency up front. And that would be useful if I wanted to, like my store was handling multiple currencies, that would be the way to do it. So I put in a dynamic field for a symbol of a currency, probably use an option set for currencies. But because I want some really quick formatting and I'm only using one currency, I can go format as currency decimal places to and then set the currency. Because I'm British, I'm going to go to the pound.

Styling the Repeating Group

Then let's make this full width and move down to the bottom, get rid of that height value that's skewing the table. And then let's just make this, I've got to make it a little bit. I have to put a name in height now. I think. I chose light. It's not showing up there. We go. Cool. OK. Shall we see what that looks like? Let me close that preview in case it's out of date. OK. Nothing's loaded. Why is that? Well, I've not given it a data source.

Setting the Data Source

So in this instance, you can do a lot of really refined filtering down with Bubble. It's fantastic for doing that. But right now we just want to search the whole database for products without any constraints and then display them. OK. So there we go. We can see that is pulling through my data correctly.

Adding Dynamic Images and Alt Tags

I also forgot to make the image dynamic. So image thumbnail. And then for accessibility and for SEO, I probably want to add in an alt tag here. So current products title will put in the title like sun hat. I'm just going to put thumbnail as regular static text at the end.

Refining the Layout

OK. So let's just tie this up and make it look a little bit better. So first of all, I'm going to not have this full width. I'm going to say max width of a scope of a thousand and then align essentially and it's parent. To make that work, I've got to remove the 100% value there. Give that a refresh. Great. It's now sitting nicer in the middle of my screen.

Adjusting Cell Spacing

And what else can we do this? Well, let's look at the padding or rather the gap between each cell. So this is adjusted in the repeating group style. And something that I found myself doing over and over again is putting rather than padding out, like adding a margin to elements in the cell, I can so that it appears more uniform. That only appears between the cells. I can use width here and then just set the line to completely transparent. OK. So then I have a more uniformed gap. It's not quite uniform because that image is square, but you get the idea. You can see how it looked like, what it looked like on the editor.

Adding Navigation to Product Pages

Right. I think the last thing I need to do here is to link these items when they're clicked through to the product page. There's a number of ways of doing that. And I'm going to show you the quickest one that I know, which is just select every item in the cell, right click, group elements into a column. And that then means that I can apply one workflow, navigate to page, product, and then I need to tell page product what to show current cell's product.

Configuring Page Type of Content

And if you don't see that option, if I go into a product page, it's because you need to select product in your type of content here or whatever data type you're working with. So by combining them into a group and here's another little trick, it's hard to select that group now, but it's much more easy to do so from the element tree. So there we go. There's my group containing everything. And by applying a workflow to that group, it means that anything in that group when clicked will activate that workflow and will go through to the page.

Final Styling Touches

One final thing, because I like things to be neat and tidy, I'm going to just add a bit of uniform spacing using row gap. There we go. Let's just do one more thing to make it look even better on the front end. So I'm on my group that contains my image and my text fields, and I'm going to add a border to it, a light gray. Yeah, I'll go to square corners. And then because I've added a border, it would now only really look right with a little bit of padding. There we go.

Testing the Functionality

So the borders show how the gap between each element, each cell in the repeating group is nice and uniform. Let's click through on the page. It takes us through to baseball cap. The image isn't showing because on a previous video, I was demonstrating how to do a slideshow, but you see that this is the baseball cap page because it has the title and the price.

Conclusion

And so that's it for this video. If you have any questions, please leave a comment below. If you're interested in one to one Bubble coaching, head to our website. We have a number of really affordable offers going.