Building A Social Network in Wix | Part 14 | Adding A Site Search in Wix Code

You want to build search functions into your social network in Wix? If so, join me on today's video, where we'll start part one of building out the search function. So that way you can search throughout your social network and search for members, search for content, all of that fantastic search type functions.

Now, before we get into the actual meat of today's video, I've done a whole series here. I'm building a social network in Wix, click the card above. If you have not caught up on all the videos in the series, they all go in order and help you sink in synchrony, built a social network in Wix. So you want to make sure you're all caught up with that so click that if you have not caught up yet. If you have caught up, make sure you smash that subscribe button down below so you don't miss an upload over the next couple of days, as I've been releasing a daily part of building a social network in Wix also hit that subscribe hit that like button. If you've enjoyed the content so far in comment down below, if you have any feedback input that you'd like to see for the next few videos of building a social network in Wix, down below in the comments. So that way I can go ahead and curate the content to those specific needs.

So let's jump into today's video guys, wixtrainingacademy.com click that Academy button free, sign up to all the which training content, tons of webinars, masterminds, all that good stuff, go check it out.

Adding A Site Search in Wix Code

So yesterday or shoot me today, we actually built out our our our excuse me. We built out, sorry, the liking system. So we built out the like. They're all running through together now. So we built out the liking system. So what we're going to do today to prep our actual search functions that we're going to build out is we're going to build a page.

In fact, it's going to be our search results page that displays the profiles. So in this portion of it, I'm going to show you how to build out the search function that will display all the profiles. So all the users on your social network, so people have the ability to search for them. However, this can be applied to anything on your social network, as long as you search those databases and you use the code accordingly.

Now in this portion, again, this is part one of building out. I'm going to show you just the pages to design. Just that search results, dynamic page design and tomorrow, I'm going to show you actually the physical code and how to make the function happen to search for those users. So let's jump into creating our page.

Adding Search Results Page

So what we're going to do is I'm going to close off right now. We're just going to go up here to menus and pages, and I'm going to go ahead and you know, why should pull out our our little tree here and we're going to create a, we'll go static. So we'll go out a page and then we'll just call this ‘search results’. Okay guys, so we're going to build out the search results page. So just like in our statuses page, we want the user to be able to see multiple different profiles. So if they come to this page, it'll have preloaded profiles on there and then we'll actually build out the physical search bar. So people can search specific users from that point. So what we're going to do is we're going to build out that page.

We need to go back to ad and then we have to add a repeater because there's going to be multiple items in here for multiple profiles. So we're going to go down to lists and grids, and we're going to find one that will better suit the whole concept of profiles. So we know we'll want like images. This could be a good one right here. Let me just continue to cycle through, pick one I want. Okay, so this one would not be a bad choice right here, so we can go and we will pull, this is our repeater. So I'll drag this out and then you could see it resizes like that. That's perfect.

Now what we have to do, so we have our repeater, so this is where our profiles are actually going to be stored. This is where they're going to be housed. You guys can design the repeater, how you want it to be. So however you want your profiles to be presented on this search page is how you're going to want to make your repeater styled. But if you liked this style, then feel free to go with this style. Because the reason I chose this is because we'll have the profile image here. So the profile picture we'll have the user's profile name here, the user's at name here, and then we'll have the user's bio there. It was just easy. It was already set up. It was already built out and all we'd really have to do is change the design and the scheme and the colors if we really wanted to change it up from where it's currently at.

So with that said, now we have to actually go ahead and connect all those things. But in order for us to connect those features from the user profiles database, we need a dataset. So we need to go back to add, and then we have to scroll down to database and then click data set. Once we pull our data set in here, we have to double click on it and we have to choose what collection it's pulling from. So we're showing user profiles. So we're going to pull from the user profile data database, and then we're going to leave the option on read-only. And you could choose how many profiles you want to display on this search result page. For now, I'm just going to say 25 and then we'll, I'll show you in a separate part of this series, pagination. So how to add, like, you know what pages one through 25 and be able to go in between pages and that type of thing. I'm not going to show that in this one specifically I'm going to do an overall page nation one, because we're going to need that on several parts of this social network. So that'll be a part of the series by itself.

Connecting To Dataset

So we add 25. Okay. So now we've got our data set on our page here. What we have to do now is we actually have to connect our data to the corresponding part of the repeater. So this picture here, we want this to be connected to we're going to click connect to data, and we want this to connect to, we want one, it connected to the user profile dataset and the image source will connect to profile picture. So this will connect to the user's profile picture. And then we want the next part the user profile data set. And then we want this connected to full name. We'll click that, and you'll see it's connected with the green connected to data.

Then we want the app name right here. So we'll connect to data and then we'll choose handle because that's the app name. And then finally we'll connect to data and we want this to be the profile bio because that's for their bio.

So now we've got a good little display of the user profiles right here. This is a nice feature. It's going to be nice, especially when we go to search it. So now if we click save and then we go preview, we've got nothing on there right now because we have no profiles in the database. But if I went back in or if we click publish and we'd take a peek at this one, let me add a page up here. So that way we can actually access it because of course, one thing we have not done on the social network yet is add a menu.

So we're creating our own scrappy menu and we'll just call this search. There we go. Okay. So search right there. We're going to link this and we're going to link it to a search results page. Alright. Now, if we click publish, we'll take a look at it in the published, look, see what we've got going here. We go to search and you can see we've got nothing on here. It's just a standard repeater. That's because there's no data physically connected to it right now. So that's the issue with it right now.

There's no profiles in the database. So what we have to do is we actually physically have to add profiles in order to get it, to show up here in our in our search results page. So again, what we're doing right now is we're prepping the search results. So we're creating a page that will feed back whatever the user searches for. So this is where the profiles are going to be stored. So the users are going to have the ability to search for profiles. So this repeater represents the profiles that will be housed in the user profile database.

So when someone searches, which again will build out the physical search function of this part tomorrow. So when someone searches a phrase or searches someone's name, it'll pull based off of the results. And it'll display just like this with their profiles in this format, just like this. But we have no profiles to pull from right now. So if I go back here to the user profiles, user profile data, I will I will go ahead and add one in here. I'll just, I'll just pull some random stuff real quick.

We'll say that's the background. We'll pull this. This will be the profile image. So that pretty looking man right there. Full name, Michael Strauch handle at Strauchy profile, bio CEO, entrepreneur. And you can't forget guys. I'm a coffee in enthusiast. Perfect. That's our profile bio profile location. I'm out here repping in Gilbert, Arizona right now. And then profile website. Well, let's hand over to handy dandy Wix Training Academy and then we'll add our website right there like that. Perfect.

Now what I'm going to do is I'm going to sync this to the live database. Let me copy these over to live. So now what should happen is because we have this page set up, the search results page should work now, at least pro adding one profile in there. Let's see if not, we'll figure out the whole scheme of it tomorrow when we actually get the, the search functions in. Okay. So let's let's figure out what's going on here.

Search results page. You guys get to work through this with me. So this shows user profile data and it should be connected. Why didn't disconnect? Well, that could be a problem. That's connected. Okay. Well just when we may have our issue here, guys. I don't know why didn't stay connected there. So if you go through, you could see, I determined that it did not stay connected so those connections did not are maintained connected. Why? I don't know. That's connected. It's connected. Okay. Let's give it a peak now. I don't know. That was weird.

There we go. Okay. So now we got it. So our issue guys was that in this is part of the process. If something's not showing up correctly, you got to make sure that, you know, it's okay, you got to go back, you bug it, figure out what's going on. I determined that when I went back into the editor that our connections did not successfully occur. So the connections from the dataset to the actual physical data in the repeater did not work, which means if we created a search function, we would have had an issue there because the connections wouldn't have been made. So that's why we're doing this as one part in of itself, getting the search results page done. So that way it's prepared for when we prepare our search function tomorrow.

So I did create, if you guys remember correctly, I created a profile back when I showed you how to edit profile data in part nine, I believe. So it shows both of those profiles here. We've got a blank box here because there's three boxes here in the repeater that are preset. And we only have two profiles, but as soon as that, that third profile is filled out, it'll start to fill in exactly as is. Because that's how the repeater works. It shows 25 items. That's what we set it to. So, so that's how that works. And you can come in here and you can manage items and you can see there's three items currently, and that's how that would work. And it would just be duplicated as you add more profiles. So that way you could search it.

So guys that is creating the search results page, that's literally what it is. So we prepped our search results page. So that way tomorrow it'll allow us to actually search that database and display the proper information, the proper profiles right here.

Conclusion

So I'm glad we got that set up. I'm glad we've got that working. I'm glad you worked through it with me. If you guys enjoyed this drop a like down below, thank you guys so much for this whole 12 days of Christmas, your support is outstanding. I've seen so many of you come out and tell me how big of a help this series is, which touches my heart. Like you wouldn't believe because that's what I want. I want this content to be extremely valuable.

So if you do find the valuable dropped out, like don't forget to hit that subscribe button, if I've helped you out at all at any point in this series. And so you don't miss any future uploads, especially over the next couple of days, up until Christmas, while I'm releasing one new part of this building a social network in Wix series each and every day, and comment your feedback on this video particular and what you'd like to continue to see in this series so that way I can curate this series specific to you, because how important this is to me to make sure that you get the best quality possible.

If this, again, helped you out, please don't forget to do any of those three things like comment or subscribe and head over to wixtrainingacademy.com, click Academy, register for free. There are tons of free wish training content. I built it out for you. Utilize it, check out the forum, check out the community, masterminds, all those good things. Other than that, I appreciate your time. And I look forward to catching you on tomorrow, where we're going to actually build out the search function. See you tomorrow.