Intro to Product listing page using Repeating Groups

In this Bubble tutorial we build a simple product listing page using the Repeating Groups element. We explore how to add data to a Repeating Group element, how to style a Repeating Group and how to link the whole cell in a Repeating Group to a page displaying a single entry in our Bubble database.

Paid Members Only Video

Join any paid membership program for exclusive benefits include access to all our videos & 1 to 1 Bubble coaching.
Watch Video

Still stuck?

Join an expert Bubble coach on Zoom.
Learn more
Bubble coaching learn no-code

This video will serve as a good introduction to 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 have picked up over the years building with Bubble.

This is the beginnings of 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.

Create a new page

So I'm going to create a new page called Listings and let's just make it... 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.

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

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

Dynamic image field

So we're just bearing that in mind as we build it. Right, so let's start adding in fields. So we have an image field, in layout, I'm going to change my sales container layout to column. I then make my image full 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. Then we need to have a title. Just going to use the default ones that Bubble's provided in here just so I can get quickly.

So adding in dynamic data, we refer to the cell that since the current cell's product title and then let's make that full width. Let's get rid of that min-height.

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 over exaggerate heights with these fields. I want to use my margins and my padding. Just a bit of best practise for you there. So we got title and then the last information to pull forward onto this page is going to be price.

Format a number as currency

So current cell's product price. If we have a look in my database, price is a number field. So in order to display currency. I could add currency up front and that would be useful if 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 using options 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, two, and then select the currency. Because I'm British, I'm going to go the pound.

Then let's make this full width and move down that to bottom. Get rid of that height value that's skewing the table and then let's just make this get a little bit oh, I have to put a min-height now.

I think I chose Light. It's not showing up. There we go.

Remember to set the data source

Cool. Okay. Shall we see what that looks like? Let me close that prove in case it's out of date. Okay. Nothing's loaded. Why's that? Well, I've not given it a 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 to display them.

Okay. So there we go. We can see that it's pulling through my data correctly. I also forgot to make the image dynamic image thumbnail.

SEO Tip: Alt tags

Then for accessibility and for SEO, I probably want to add in an alt tag here. So current products title, we'll put in the title like Sun Hat. I'm just going to put thumbnail as regular static text at the end.

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 1000 and then align essentially and its parent. To make that work, I've got to remove the 100% value there. Give that a refresh. Great. It's now sitting nicely in the middle of my screen.

And what else can we do with this?

Repeating Groups: Padding & Gap between cells

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 find myself doing over and over again is rather than padding out or adding a margin to elements in the cell (so it appears more uniform that only appears between the cells) I can use width here and then just set the line to completely transparent.

Okay. So then I have a more uniformed gap. It's not quite uniform because that images square, but you get the idea. You can see how it looked like on the editor, right?

Making the Repeating Group cell a link

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

Styling: Border & Padding

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 we'll go through to the page.

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

Yeah, I go to square corners and then because I've had the border, it would now only really look right with a little bit padding.

There we go. 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. Takes us through to baseball cap. The image isn't showing because on a previous video I was demonstrating how to do a slide show. But you see that this is the Baseball Cap page because it has the title and the price.

Wrap up

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.

In fact, right now we're just trying some free coaching and you can read how we can offer that's and how to sign up on our website www.planetnocode.com

 

camera-videouserscodelinkcrossmenu