Ladies and gentlemen, today we are talking about repeaters on Wix code. So before we hop into actually how to utilize our repeaters, let's first discuss what repeaters are.
So repeaters best way to explain it is if you have a database you can have data repeat based off of the role that's entered in the database. So this may be a bit confusing to understand without the visuals here. But pretty much we can have a piece of data that looks the same. So design-wise, it looks the exact same. But it'll change according to certain data that is inputted in the database. That's the best way to explain it, visuals will help me explain that further.
Before we hop into the visuals though, head over to weeklywixwednesday.com very simple. If you like Wix and you like learning more about Wix and how to properly maximize the Wix platform hit on my email list weeklywixwednesday.com every Wednesday, I’ll send you an exclusive Wix tip, trick or tutorial. I'm dropping value bombs all the time. People love it, I love helping you. So head on over there!
How To Create and Use Repeaters in Wix Code
Next repeaters, we're back to repeaters guy. So first off, when we're dealing with repeaters, we need to first activate the Wix code tools. So we're going to head over here to the "Code" tool, our tab, and we're going to click on "Turn on Developer Tools''. Then we'll have all of our Wix code tools pop up or 'Properties' panel, our panel, our site structure here, and then our page code down here.
So for right now we're just going ahead and close our “Properties”, our “Site Structure” tab. And what we're going to do is now that the code tools are activated, we're actually going ahead and add our repeater. So I'm going to close the “Properties” panel for right now. So to actually add our repeaters, what we're going to do is we're going to come in here to the “Add” button. And then once we get in here, we're going to see “User Input” that you guys are pretty familiar with database. You guys are pretty familiar with, but we're not going to be in those two sections today. Now, we are not, instead, we are going to be in “Lists & Grids”.
So you see right here, “Repeaters” right at the top. And then you see a couple different options here for repeaters, which is pretty awesome. We've got a pretty long list here of different repeaters we can use. And they're all pretty well designed and very good looking and all 100% customizable under that. You see tables, we're not going to be working with tables today. Although they've got great tables as well, like I said, we're going to be working with strictly repeaters today.
So what we're going to do is we're going to go through and we have to choose whatever one is going to work best for what we're trying to achieve. Again, all of these are 100% customizable in the design. It's strictly picking one that you think is a good starting ground or starting place for you to actually get that design going and get it ready. Now, once you scroll through here, what do we want to pick today? What one do I want to show you really doesn't matter, but alright. I'm just going to show you this one right here.
So we're going to go ahead and we're going to add our repeater. So you see that this is the same exact design here, right? You have the same design repeated. You've got the big title, the little description, the “View more” button, and then a picture right here. Well, it's very simple and that's what a repeater is. That's strictly what it is. It's the same design. Although what happens is it's dynamic.
So when new information is updated in the database, these elements will change according to what is updated. So what we have to do is we have to add a database. So what we're going to do is we're going to open our site “Site Structure” back up, and we're going to go ahead and click “Add new collection”. So now we have our repeater on the page. We know what we want the repeater to look like. We know the information we have to capture. We have to capture a title, a description, and an image, and then we can move forward.
So we're going to click “Add new collection” and in this case “Start Creating” database collections. We're going to name it a we'll just call it “BlogPosts” because it kind of looks like a blog post for repeaters. “What is this database collection used for?” We're just going to call it, anyone can view. So we're just going to call it “Site Content”, and then we it “Create Collection”. Now it's going to work its magic and bring us into the sandbox database editor. This is not live, this is where you make all your changes and edit information and tabs and fields and all that good stuff.
So now that we're in here, you see a preloaded title, a field, this is locked in. It is a preloaded locked field in the Wix database editor. You can't move it, you can't change it so you can either decide to use it or you just leave it over there and you don't have to use it at all. I usually never use it, I usually go ahead and create all my own fields. But if you did want to use this title field, you can use it. It's not locked for no use. It's just a locked field, placeholder which uses as a placeholder field in their sandbox stayed and while in their whole database.
So what we're going to do is we know we need to “BlogTitle”, we want the field type to be text. We know we need to collect a “BlogDescription”, want it to also be text. And then we know we need a “PostImage”, we want it to be an image. We want the field type to be an image. So we'll click “Add”.
Now guys, I'm going off of the assumption that you guys have kind of already watched some of my tutorials based on databases. So these next few parts, I'm going to move a little bit quicker but just follow along. And if you do have questions, feel free to just comment down below. I'd be more than happy to answer them.
So now we have our title, our description, and our image, which were the three main things we had to capture for our repeaters to work. So what we now have to do is we have to go back. So what we're going to do is we're just going to simply close our “Site's Structure” here and go to the “REPEATERS” page.
Well, now that we're on here, just like creating a user input form in displaying that information, we need to add a dataset. This is the connection. I like to say, it's the glue between the database and your page or your information being collected in the case of a user input form, the dataset is what connects that information in the database to the page. So we're going to click “Add”, go up to “Database” and we're going to click “Dataset”.
Now, what we want is we want this dataset to be our blog posts database. That's the database we co-created to connect to this page for this information. We want it to be “Read-only”, no users are changing any information, and nothing is being collected as far as form fields or anything like that. So it has to be “Read-only” pretty simple to understand in that part.
But another important fact you'll notice something, this is technically a dynamic page because it's going to be displaying dynamic information. So what we're going to want to do is we want to go up here to our page manager, click “Manage pages” and on here, we click those three little buttons and we click “Set as a dynamic page” and “Start Creating” and it's actually going to be a category page because it's going to show multiple different blog posts.
So then we're going to click “Next” and we're going to set the URL to blog posts. You could change it and add it to a field if you want it, but we're just going to keep it as blog posts. We're going to “Create Page”. So now this is a dynamic page because we have to collect information and display it on this page. So original data set, you can technically delete, or you can keep it. But I'm going to delete it, you should really only have one dataset on the page.
When you create a dynamic page, it creates it based off of the database you connect to. So in this case, there's one database. So it automatically connected to the blog posts database, which added a preloaded dataset, which is this glue on the page. So when you create a dynamic page, if you do that first step, which I would highly recommend, but I was just showing you different elements and how to add certain things. It will already add this dataset to your page.
Now, what we need to do is we need to connect our information in our repeaters to our database fields. So you'll see right here, this is going to be our title field, to connect it to the database and this is where my older tutorials come into play. You simply click this little “Connect to data” button, and then you're going to come here. You're going to click “Blog Post” because you're connecting to a field in blog posts in that field. You're connecting to his blog title, bam! You'll see it turns green.
When you've connected to the data successfully, we come in here, we do the same thing for our blog description. And then we have our blog image. Then we come into image here and we click image connects to “Image Source”. We don't want link, image shores connects to post image, bam! Just like that!
So now we have our image connected to our database, our blog title, connected to our database field, and then our actual blog description connected to our database field. Most importantly, click “Save”. Once we do that, what we're going to do is if we click “Preview”, nothing comes up, right? The reason for this is because there's no dynamic information in the database yet, there's absolutely zero information in the database. So nothing is going to populate quite yet.
However, what we're now going to do is I'm going to take you to the backend of the database and actually go to the live database and input some information. So that way it can display, so we're going to come in here. We're just going to go to my site here, because that's the one I'm using and then we're going to come in and we're going to click “Database”. Once we do that. And again, guys, I am showing you this and I am adding to this database collection. Oh, whoops. I haven't published the site.
You got to publish the site before there's a live database. Key point there, publish the site before there's a live database. Loading, loading, loading. We've got our database! So now key point here, we need that data. So I am creating this data in the live database, of course, depending on whatever you guys are displaying, you may have a user input form that people actually upload their own data and it'll display. So let me give you a quick preview of what it would look like in. You know, in more layman's terms, in actual perspective.
So let's just say there's a peer to peer rental marketplace, Airbnb take, for instance, people post their house listings, right? And they're using input forms custom and performs to post their house listing. Once they do that, it's displayed on a page. Well, they have their own house listing page or apartment listing, whatever listing, but for their home apartment suite, anything like that.
And then there's also a whole search page that it populates on as well. All of that information is dynamic information. It's use of repeaters. So what Airbnb does is you can see if you go search something in Airbnb, it has the same exact design for every search result. It's just the information is different in each one.
So Airbnb carries the process from the user and putting their own information all the way up to them, displaying that information past the point of sale. So there's a lot involved with Airbnb per se, but in true reality, you can now create a website, very similar to Airbnb. You have the functionality to do it. Now. It's just, there's more advanced coding and knowledge involved, but simple things like these repeaters are all going towards creating something magical like that.
You can take all of this knowledge from all the different tutorials on proposing here and take that and build something spectacular. I just wanted to give you that insight because I thought that was important. So like real life perspective, how this all connects and how it works.
So now let's just go in here and add some information. Blog title, “Wall Street Stocks Boom”. Blog description, “The Wix stock just went through the roof! Wow! It's fantastic!” Perfect! Post image, I'm just going to add a random image here, guys. I don't really have one just prepared. Let's, what do we want here? That's fun, just a random post. Here, this is me with the CEO of Wix. We'll use this as the post image. Okay, cool. So that is one dynamic line of information, right? So that's going to be used on one repeater.
Now we're going to add a second line of information. So this is going to be used on the second repeater, so we'll name this one. So I guess we're talking about an investing blog here. If I say wall street stocks. Boom. So let's just say “CryptoCurrency sees an increase”, I'm just here with positivity today. Guys, “Bitcoin starts soaring! You better wait a few more days and sell high!” Now let's come in here at a post image. What do we want to add? We want to add this because Bitcoin's expanding, right. CryptoCurrency soaring.
And then let's just add one more so we can show three different posts. You get a good variety, I just want to stay on this theme of positivity and good. So what else in the investing world? Let's see “The Wolf of wall street is back! Guys, if you haven't seen the Wolf of Wall Street, I'm just going on record. It is a pretty raunchy movie with Leonardo DiCaprio, but it is a fantastic movie! You got to see it, you really do! If you're at all interested in money, investing sales, anything like that. Wow, absolutely fantastic movie!
So blog description, “The Wolf of wall street brings some massive numbers back to NYC, fantastic!” Now let's pull up an image here. What image would we like going through our different image basis here? Oh, there was a CryptoCurrency thing. Wow! Interesting! All right. Let's just use a credit card thing. I don't know, I don't have any pictures on hand. So now we just added these different pieces of information to our live database.
So another thing to note this portion in your Wix dashboard is the live database. So any information you edit or change in here is permanent. It's not like the sandbox that you can change it, and then it won't affect the live database until you sync it to the live database. Any information changed, edited or deleted in live database portion is permanent. It is just something to know.
So now that we have that, what we can do is we can go back to our dashboard and then we can go to quick actions and we can view our live site. And now if we go to, I don't even remember what I named the page. It's a dynamic page, that's right. Okay, so now what we have to do is we have to add a link to our dynamic page show. I'm just going to go here to the homepage. I'm just going to add a random link for the purpose of this to show you.
So that's a good point, guys, you usually traditionally have a dynamic page to display information after users have done something or search something. So usually it's not just going to be a page up on your menu. It may be, but traditionally it's not. So I'm going to come here at a button and we're just going to add this random button right here. And we're just going to say, “Wall Street”, we'll stick with the theme, add a link. And we're going to add a link to, we don't want that. We want a dynamic page, right? Their blog posts, my apologies.
And we'll have it open in the “Current window”. Okay, so that's good. We'll click “Publish”. Come in here. “View site”, X out of that. Now we want to go to “Wall Street”, don't we? Let's click “Wall Street”. Give it a second to load, and wow! Would you look at that? Just like that, it gives us dynamic information displayed as perfect as we originally created it. Look at that! Isn't that something else, guys? And all of that could lead to one big, massive way.
Having the ability to do this one thing in which with repeaters can exponentially increase your ability to do show many other things with Wix code you can now display dynamic information. You can collect user information and then display it dynamically. You can have people search, which I will create a video on how to search your database. This is something special, this is good stuff.
Now I didn't show you in this one, how to add the link dynamically as well. I'm going to do more videos on this repeaters function and how to properly use it. But I wanted to give you a base tutorial on how to get started with this and correctly start utilizing repeaters, because I think it's such an asset when building a Wix website, especially with Wix code and I know the requests that I've gotten from you guys, because a lot of you I've heard from personally and tell me what type of website you're trying to build. And this is right up your alley. This can display different types of user information. It can display products, it can display so many different things. So please take this and use it to your advantage.
Conclusion
If this video helped you out, please drop a like down below, comment if you've got any questions at all. Don't forget to subscribe here on YouTube and also head over to “weeklywixwednesday.com”, where I'm dropping value bombs, just like this one every Wednesday to help you further your knowledge in Wix and learn more about the Wix platform. That's what I'm here to do, that's my passion.
My name is Michael Strauch. I appreciate you guys joining me and yes, I promise I will create more videos about this Wix code stuff, especially repeaters. Because there's a lot more I can talk about and a lot more I can show you. I may even run a webinar on it, so stay tuned. Thank you guys very much. I'll catch you on the next one!