In this video Lachlan Kirkwood will be walking you through the step-by-step process you will need in order to recreate your own yelp clone without touching a single line of code this will include features:
- Creating User Account
- Updating Restaurant Details
- Building a Search Function
- Displaying Search Results
- Creating Dynamic Restaurant Pages
- Creating and Displaying Reviews
From 02m:41s Creating a Custom Database
Now for the sake of our tutorial we have created a notion doc here with all the different data types and fields as well as the different features. We will be working across today in our tutorial.
We really recommend you to create your own list and follow the same procedure as well. So let’s go and get started we will head over into our bubble editor here and within an editor. We are going to go over into our data tab now the first thing you will notice within the data tab with bubble is that it has already created a user data type. Before we go ahead and create any other data fields within my user data type here.
We are actually going to need to create the different data types first because in order to link our data fields across our application. We will need to actually create those data fields, before we get started so over in my notion doc here.
We have a list of different data types that we will be adding there’s the user property which is already added in our editor there is the restaurant data type, the restaurant images, so we will head on over into my bubble editor and start by adding in the restaurant data type so will just call this restaurant.
From 3:39mins Creating a custom database
We will create that now within our restaurant data type, we could store different data fields about this restaurant thing like the restaurant’s name, its location, its website or even its phone number.
You would also want to store a list of images under this restaurant so that way a restaurant owner could go ahead and upload images to display them to our directory now although you could add your images within this data type we personally would recommend that you split them into a different data type and the reason.
We recommend doing this is because it will help maintain the speed of your bubble application. So let’s say on your home page or your search results page you like to display a list of 10 restaurants now bubble itself will be able to display that list of 10 restaurants. Every time it loads that list it is going to load all of the data fields within each restaurant.
It would not have any problems doing this if you are adding light fields like text but if for every restaurant, you are loading 10 additional images with that restaurant data it will quickly slow down the actual speed of your application.
From 5m: 02s Creating a Custom Database
So what we recommend doing is splitting the restaurant images into a separate data type and then linking them back to the restaurant itself, then whenever you like to display a restaurant image you can just call upon that data type and select the images that are relevant to a specific restaurant. So we will go ahead and add a new data type called restaurant images.
We will be adding two more data types one called reviews and then we will also be following the same process, where we will be splitting the images from the reviews separate from the actual reviews itself. We will add another data type called reviews images and the reason we will be doing that is because on a particular restaurant you might have hundreds of reviews so the last thing. We want to be doing is loading all those images at the same time that we are trying to load the reviews itself.
So now that we have added in all of our data types we can go ahead and start adding in the necessary data fields for each one. We will start by adding in the actual user itself so we will go ahead and create a new field here and if we look into my notion doc the first field. We will be needing to add is the name the profile photo and account type and a list of saved restaurants, we will go ahead and add the field name called name and this will just be a plain text field because it will just be storing the user’s name as text characters.
We will add in the user’s profile photo and this will of course be an image data field next it will be adding in the user’s account type and the account type will allow us to differentiate between those who are regular users, who are going to be leaving reviews and those who are restaurant owners, who would like to submit their restaurant to our platform.
This data field will be a text type and we will soon be explaining how we can use this in our tutorial today and then finally the last data field we like to add is a list of saved restaurants so this allows a user to pretty much bookmark restaurants across our platforms that they might like to visit so this field type will be a restaurant. a user will need to actually save a restaurant and because they like to possibly save multiple restaurants we need to select that this is a list field.
So there will be multiple entries meaning there will be multiple restaurants that they can save.
From 7m: 37s Creating a Custom Database
Now we will edit my user data type and fields we can go ahead and tick those off within my notion doc, and then we will scroll on down to my restaurant data type. We can start adding in the necessary data fields. So we will jump on over to my editor head to the restaurant data type and once again.
We will start by adding in the restaurant’s name which is a text field then there will be the description of the restaurant which will also be a text field, then we will add in a category for the restaurant which again will be a text field, so that will be the type of food category this restaurant belongs to whether it be Mexican burgers, Thai food. It will just allow us to better structure our food categories across our platform. We will go ahead and add another field called address.
This will need to be a geographic address because we like to store the specific address unit within our database. Below this will then add in the website link for the restaurant so this will just be the URL of a restaurant, which is just a texturing and then we will also add in a field for a phone number. Now this will also be a text field and now in order to store images for our restaurant what we will do is, we will need to actually link the restaurant images through to our restaurant images data type.
So we will explain this in more detail as we do it but we will go ahead and create a new data field and we will call this restaurant images and then we will link this through to our restaurant images data type. Now we know that might sound confusing, but when you actually pull it into your editor later on it will make more sense one thing we will note is that you do not need to select that this is a field of multiple entries because on our restaurant images data type.
We will allow a user to upload multiple images there which means that our normal restaurant, we will just call upon that list of images whenever it is needed we would not need to save a list of images over on a restaurant here so we will go ahead and create that and now below this.
From 10m: 30s Creating a Custom Database
What we like to do is just add in a list of amenities that a restaurant might have so this could be options like let’s say a restaurant supports vegan food and this field type itself will be a yes, no field type so they either do or they do not have vegan friendly options.
We will go ahead and create this what we will need to do at this point is also update the default value of this field so by default we like all restaurants to not support vegan options. But when we create our restaurant dashboard page we will also build a feature that allows our owners to update the default value of this the next amenity we like to add is an option for parking so if there is parking on site at the restaurant.
So once again we will be making this a yes no data field and we will be updating the default value to be no then we will create another field called dogs allowed this will be a, yes no field with a default of no. Then there will be one other amenity option which will be called delivery and once again this will be a yes no field. We will update the default status to be no.
From 11m: 06s Creating a Custom Database
Now we just need to add in a list of reviews and then a published status to this restaurant. So the first field we will be adding is reviews. This will need to link to our reviews data type and we will select that this is a field with multiple entries because we will need to support multiple reviews for each individual restaurant and finally the last field we will need to add is a published status for a restaurant.
We will say published and this will be a yes or no field type now the reason we are adding a publish status is, because you will soon see in a later module in the series that when a restaurant is created on our platform. We would not want it to be immediately published until a restaurant owner has actually updated all of the relevant data fields within that restaurant.
We will create this and we will go ahead and set the default value of this to also be no. Now we will jump over into my notion dock and we will highlight all of a restaurant data fields here and tick off that we have created those the next data field we will need to add is the restaurant images.
From 12m: 32s Creating a Custom Database
We will head over to my bubble editor select my restaurant images and we will just need to create one data field here this will be called images this will of course be an image; this is where we will select that this is a list of images so whenever we create a new restaurant.
We will need to first create a list of images and then attach them to a particular restaurant that is being created and again we will be explaining that in much more detail when we get to that stage of our build today then back in my notion doc we will tick off that we have added in the restaurant images, the next data type we will be adding in all the fields for is our reviews.
We will start by adding the review content so we will create a new field call this content and this is just the actual text of a review so we will create that as a single field then there was the images of the review so similar to our restaurant. We like to link this out to our review images, so that way we are not loading all of those images on each specific review so we will create a new field here and we will call this images.
We will link this to our review images data type then we will need to go ahead and add in a rating so this will just be a star rating for each review. This will be a number because it will be one, two, three, four and five so we will go and create that.
From 14m: 00s Creating a Custom Database
Then finally, what we will need to do is actually link this review to a restaurant. So go ahead and create a new field and we will be calling this review restaurant so this is the restaurant that a review is written against and then what we will do is we will select from our field type drop down.
We will be selecting that this is a restaurant so it will belong to a single restaurant and because it is a single restaurant that this review will be attached to we would not be selecting that this is a field with multiple entries. We will then create that now one thing you will also notice is that by default all of our data types actually have a creative field pre-built within them.
Every time a review is created we would not need to create a data field to record who the creator of that review was, bubble automatically adds that in and registers that as a user property. If at any point when we are displaying a review we like to display the name of the person, the profile photo of the person who created that we can just integrate that to our user data type here where we have added in the fields for the name and the profile photo.
From 15m: 15s Creating a Custom Database
We will need to add and that is for our review images data type and we will just need to add in a list of images. We will head over into my data tab select the review images add in a data field and call this images of course will be an image and there will be a list of multiple entries because someone can add multiple images to their own review.
So we will create that and just like that you can see how easy it is to build your own custom database within bubble with as many different data types and fields as you would like. We know that building a database can seem quite overwhelming for most people but you will certainly get the hang of it with more practice over time.
From 16m: 05s Building a Search function
We will finally be able to build a user-facing feature that is core to the application itself, and that is building a home page with a search function on it so a page that allows a user to input what type of restaurant they would like and then also their target location.
We will then use this data and send it through to a search results page which we will work on later in our build, what we will do is go ahead and head on into our application and we will get you started. So over in my bubble editor we are going to go to my drop down menu and select from my home page that we previously created, this page will be blank so once again we will be updating the background color of this page to have a light gray background.
We will just reiterate that you do not need to have a content type saved on this page what we will then do is start to actually build out the page itself and this is pretty simple to do there is not a whole lot of content that will be displayed on our home page. So scroll on down to our input forms and the first thing we will do is add a search box onto this page. We will drag this out to be roughly half the size of the page, our first search box will allow users to actually identify what type of food they would like to search for.
So we will update the name of this search box to be called food category, because this will be the categories that we have imported into our drop down menu on our dashboard page of our restaurants. At the moment this search box is currently configured to be a list of dynamic choices meaning that we could dynamically display some data from our database we would however though like to change this to be a list of static choices. Then what we will do is import the exact same list of static choices from my drop down menu on our dashboard page.
From 17m: 45s Building a Search function
We will head over to our dashboard page that we have previously created we will go to our drop down category menu here. We will just copy across all of the options within this drop down.
We will then head back over to our home page we will select on our search box here and then we will paste all those values in and again the reason why we will be copying and pasting these values is because we are aware that these will be case sensitive. We like them to be the exact same value as the initial value that we created, what we will go and do is just update the placeholder content here just to say food categories.
This is just to indicate that someone can select and search for a list of categories that matches their preferences then what we will do is go ahead and grab another search box element. We will drag this across so it is roughly the size of our initial search box here and this search box will be our location so this allows someone to input the city or suburb that they like to search within, so we will update the name of this to be called search box location and then with the choices style.
We are simply going to update this to be a list of geographical places and what this allows the bubble editor to do is actually integrate with a google map API, which allows it to index a list of cities towns or even suburbs so we will just go ahead then and update the placeholder of this search box to be called search location. The last thing we want to do to our actual search function here is just add an icon next to this and this icon will just be a magnifying glass which just allows someone to actually perform a search.
From 19m: 50s Building a Search function
Now before we go ahead and build out the actual workflow to power our search function. We would just like to go ahead and add in some categories on our home page just by using a repeating group we want to display a list of all the existing restaurants that a user could choose from.
We will add in a text element here and we will call this all restaurants and once again we will just be updating the style of this to be a h2 dark heading. We will make that somewhat in line with the search box there, then below this we are going to add in a repeating group now this will obviously need to display all of the restaurants within my application.
So the way we will be doing this is updating the type of content to be a restaurant because we obviously want to display a list of restaurants and then the data source of this repeating group is quite straightforward. We are just going to perform a search and we will just be searching for restaurants so at the moment it will be searching for all of the restaurants within our application.
From 20m: 52s Building a Search function
The other thing we like to do within this repeating group is update the layout style not to be extended vertical scrolling, but to be horizontal scrolling which just means that it allows a user to scroll horizontally through this repeating group. We will go ahead and update the number of columns then to be three and we will start to see that it just displays these horizontally across from left to right.
Now within this repeating group we will add in an image element so this will be a featured image from this particular restaurant so we will insert dynamic data. We will choose to display the current cells restaurants images. Now because this images are linked to a different data type that is a list of images we will need to obviously select that data type so our images, as we mentioned that is a list of images we will need to choose a particular image that we would like to display.
So in this case we are just going to choose a random item so we will go and just move that image up. We will expand that outwards just so it is the full width of our repeating group and then below this we are going to add in a text element and this text element will need to display the name of the restaurant. We will just insert dynamic data and choose to display from the current cell’s restaurant’s name.
Then we will go and update the style of this to be a h3 dark heading we will reduce the size of that element and we will just move that down. So it does not overlap with our image perfect what we would also like to do though is just create a list of featured repeating groups that display a list of our food categories.
From 22m: 37s Building a Search function
So in this case we might like to display a list of all the featured burger restaurants across our platform and this is quite an easy function to build what we will need to do is just expand my page downwards so there is room for another repeating group.
We will then go and select my title in my repeating group. We will copy these we will drag them down below so they are roughly in line and then we will update the name of this title here to be called burgers and then the actual layout of the repeating group.
Displaying the featured image of a restaurant and then also its name what we will need to do though is actually add in a constraint to our data source here because at the moment it’s searching for every single restaurant whereas we only like it to index all of the restaurants that are listed within our burger category. We will just add a constraint that will search for all of the restaurants where the category equals and then we will just need to backspace this option to add in dynamic data.
We like to add in a static text element which is just burgers and once again this will need to be case sensitive with the same category type that we have used within our search box and also our drop down box on our restaurant dashboard page.
From 23m: 56s Building a Search function
Just like that we now have two repeating groups one displaying a list of all the restaurants on our platform and the other displaying a list of all the restaurants that are featured burger establishments. If you also would like you can update the data source here to sort these in a particular way so if we like to just sort them by chronological order from when they have been added to our platform could do that in this case that we might just like to sort these randomly just so every restaurant can be shuffled around fairly across our platform.
So now that we have finished building out the actual layout of our home page. We can go ahead and now build out the workflow to power our search function here and the way we will be doing this is by triggering a new workflow when our search icon here is clicked.
From 24m: 52s Building a Search function
We will go ahead and select the start edit workflow button and then within this workflow what we will be doing is creating a navigation event we will be selecting a go to page option, and then we will need to actually go ahead and create a new page so we will select from the drop down option. We will choose to create a page and we will call this page search results we will choose to create that and now we can select that our destination page will be our new search results page and that page would not need to have a content type attached to it.
We would not need to send any data through itself what we will need to do though is send through some page parameters. So at the moment on our home page we have our food category search box and also our location search box now instead of actually saving the data from the search in my database. Sending it through to a page without adding entries to my database and the way we can do this is by using what’s called page parameters.
So page parameters essentially just allow you to send data between pages without having to store it within your database. What we can do is tick this box here that allows me to send more parameters to a page and then we can add my own custom parameters and the parameters we like to send through is of course the food category and the location so type in a custom parameter key. Fig 11
From 26m: 13s Building a Search function
So the first one will be called category and then we can go ahead and mark up what that data is that should be sent through as this parameter and the data for this of course will be the input from our search box food category its value.
We will add in another parameter key and this one will be called location and of course we will be configuring the data of this location key to be the value of our search box location. Now when a user performs a search it will send through both of those values which we can then extract from our search results page and display a list of relevant restaurant listings based on these parameters now we can go ahead and actually preview what this whole experience looks like within my bubble development environment.
From 27m: 00s Building a Search function
So the first thing you will notice on my home page here is that the repeating groups are displaying some data on our page and you will notice that my San Francisco burger restaurant has been displayed but you will also see that my San Francisco, Thai restaurant is also being displayed. It does not have an image and that is because the restaurant itself here has not actually been edited or published.
So what we will need to do is go back into my editor and add a constraint to this repeating group that just restricts the restaurants here to only display once they are published so what we will do is we will quickly just jump back into my editor, and on my home page we will select a repeating group.
We will update the data source and we will add in a new constraint and the constraint we like to add is just searching for the restaurant publish status and we would like this to be yes, so now it will display all of the restaurants that have been published.
We will then go and do that to my burger restaurant as well so we will search for restaurants it is searching for the category already but what we will do is add in a new constraint where the publish status equals yes and then while we are here another feature.
From 28m: 15s Building a Search function
We could quickly just add is an option to redirect a user to a restaurant page once they click the profile photo here so what we could do is just go and create another workflow. We will add in a navigation feature we will select the go to page option and the destination page will be our restaurant page and the data.
We will be sending through of course is the current sales restaurant now that will redirect us through to a restaurant once we click on its image. You will need to go ahead and create that same workflow across any repeating groups that you are adding to your home page here but now, we will head back into my bubble application.
We will refresh our home page and now you will see that it is only displaying my San Francisco burger restaurant, and there are no other options within those repeating groups because those restaurants have not been published. What we can do is also select my San Francisco burger restaurant, and that will redirect me through to its restaurant page which you can see is currently in our URL stream.
We are on our restaurant page and it is sent through the unique id of that restaurant but back on my home page what we can also do is begin to search for food categories and a location so what we can do is start typing in an option here. So let’s say we want to search for burgers or if we want to search for Thai, it will actually start to index any static choices that we have added.
We will search for burgers and then we can also search for a location which will be San Francisco and once again you will see that it will automatically start indexing any relevant search queries based on the location and then we will go ahead and click the search icon we have added.
From 30m: 00s Building a Search function
Now we have been redirected to our search results page here. You can see that it is also sending through the parameters of our category which equals burgers and our location parameter which of course is San Francisco and once we have built out our search results page it will be able to extract that data and display a list of all the relevant results.
From 30m: 26s Building a Search function
So back on my notion doc we are going to tick off that we have finished building out our search page which is our home screen for our users. This page we have added a list of repeating groups to display all of the featured restaurants by the categories.
We have created a search function and we have also taken the time to show you how to configure yours google maps API keys now that we have finished building out our home page and we have redirected users to our search results page whilst also sending through our custom parameters. We will now go ahead and build out the search results page to display a list of all the relevant results based on a user search query let’s jump on over into our bubble editor. We will show you how this is done.
From 31m: 07s Building a Search function
From our home page we are going to go up to our page drop down here and select the search results page that we have just created. We will start by updating the background color of this to be a light gray color, and then we will go ahead and add in a text element to the top of the page. What we like this text element to do is summarize a user’s query and just clarify exactly what they are searching for on our platform.
So the way we will be doing this is by first typing in some static contents it will say discover and then we will go and insert some dynamic data and we will pull out our first parameter which was our category that was being sent through the URL. So insert dynamic data and then we will scroll on right to the bottom and select the get data from page URL option.
You will see here now it is giving me an option to extract the parameter from this then what we will do is add in the parameter so it was the category and then we will select away and that will verify that that is pulling that information from our URL string then below this we are going to go ahead and add in a space. We will say discover food category so you could say discover burgers in and then we like to pull the location parameter from our URL string. We will insert dynamic data again we will scroll on right down to our get data from page URL option, we will be selecting from the parameter which was called location.
We will need to just update the type of parameter here to be a geographic address because that was the type of data that we were sending through in that URL string. We can update the style of this heading to be a h2. We will just reduce the actual element box itself we will stretch that out just in case it is a bit of a long text item there.
From 33m: 04s Building a Search function
Now we can add in a repeating group to display all the restaurants that meet this query, so what we will go ahead and do is just like to add a repeating group. We will add this in the middle of my page here and we will just expand this page outward because we would like to add a map on it as well at some point.
The first thing we will do is configure the type of content that we will be displaying in this repeating group it will be a list of all the restaurants on our platform and then we will need to update the data source of this repeating group. We will perform a search for all of the restaurants where the food category matches the URL parameter and where the location parameter matches the URL parameter as well so we will go ahead and search first from the category.
So we want the category to equal the same value from the URL parameter sending through. Once again we will scroll right down to the bottom here and select to get data from our page URL and the parameter name was our category similar to what we have added in our title here. We will select to close that we will then add in another constraint where the location so the address of my restaurant is within and then we can just choose a custom distance here so we can say is within 20.
We will choose metric kilometers of and then we want the core location to be the location that we are sending through in my URL parameter. We will select the get data from page URL option again the parameter was called location and the type of content for this parameter was a geographic address and then finally there is one last constraint.
We will need to add to this repeating group and that is just to only display the restaurants where the publish status equals yes, so we will select from the publish status equals yes now our repeating group is configured nicely. It will only display the restaurants that are published on our platform that also meet the parameters of our user search query.
From 35m: 00s Building a Search function
We can update the layout style the repeating group to be extended vertical scrolling and we will update the number of rows to be 2 and now we can go ahead and start to map out the content that we will be displaying within my repeating groups.
So the first element we will add is an image and this image will just need to display a featured image that the restaurant’s owner has uploaded so we will select from the current sales restaurants images the linked data type called images which is of course a list of images.
We like to just choose a random item of those images then we can just move that up into the corner of our repeating group and then beside this we are going to go and add in the name of the restaurant. It will be the current cells restaurants name we will just move that to the side a little so it is not overlapping on our image there also update this heading to be a h2.
We will just pull that across expand that downwards a bit and now below this what we would like to do is actually just display an average star rating that this restaurant has received from all of its reviews that have been submitted against it so the way we can do this is by inserting dynamic data.
We will start by performing a search for something and the thing we like to search is of course, a review on our platform and then within all the reviews on our platform we like to only filter out the ones that are published for this restaurant that we’re currently viewing in this repeating group cell. We will add a constraint and we will choose from when the review restaurant equals the current cell’s restaurant.
From 36m: 55s Building a Search function
Then from here we can go across and filter these by the rating of all the reviews that have been published against this restaurant and then what we will do is we will filter out an average of all of these ratings. We will scroll on down and select average and now that will give me an average star rating of all the reviews that have been submitted against this restaurant, so once we have calculated that dynamic data we will click below this add in a space and just type in stars.
So let’s say it is 3.5 it will say 3.5 stars and then below the average rating of the reviews we like to display an actual count of how many reviews have been submitted just to create a little bit of social proof for this restaurant.
So go ahead and copy in this text element for our average star rating and the reason we will do that is because at the moment it is searching for all of the reviews that have been published against this restaurant which is what we like and what we like to do is actually just go ahead and backspace the star count the average rating and then also the rating option.
We just like to search for all of the reviews and count how many reviews there actually are and then we will add in a space and just say reviews. So now it will be performing a search for all of the reviews to this restaurant performing account on how many there are and just displaying that as a total number of reviews and now below this what we are going to do is just add in another text element and this will just be the description of the restaurant.
We will insert dynamic data and we will choose from the current sales restaurants description and we will just need to make sure it is not overlapping with our image here. So we will just pull that down a bit and what we can do is also reduce the size of this element because if there is more text than a single line that will expand outwards as well. Now we will go and just reduce the size of my actual repeating group itself just so there is no empty space there.
From 39m: 07s Building a Search Results Page
Then within this repeating group we would also like to just create a workflow when the image of the restaurant or any other element here is clicked and we like to redirect the user through to that restaurant page itself. We will select the image here and we will create a new workflow and then within this workflow we would like to choose from a navigation event and select the go to page option.
We will choose the destination page to be our restaurant page and we will be sending through the value of the specific restaurant that a user is currently clicking on within our repeating group. The current sales restaurant now back on our search results page here there is another feature we like to add to this page and that is a map to display a list of markers for all of the restaurants that meet the search requirements.
We will scroll on down to our bubble map element, we will add that in beside our repeating group to the right we will expand that out just a little bit more. Now what we can do is configure our map here and in this case we like to display a list of markers because we like to show where all of the restaurants are that meet these search parameters here. Then we would like to update the type of markers to be a restaurant and we will need to add a data source to this to only display the restaurants that meet the user’s search query.
We will go ahead and perform a search for something and obviously be searching for a restaurant and then we will need to add constraints to the restaurants we are searching for based on the exact same constraints, we added to our repeating group so we will go ahead and select to add a new constraint and the first constraint was our category so the category will need to equal. We will scroll on down to the get data from page URL option the parameter was our category and that was just a text parameter we will close that we will add a constraint the next one was our address.
It will need to be within as we mentioned before 20 kilometers of and then we will pull the location from our URL parameter again, we will select the get data from page URL option search for location and the type of parameter is a geographic address.
From 41m: 31s Building a Search Results Page
Then finally the last constraint we will need to add is just verifying that the publish status of these restaurants equals yes and now once we have configured the data source of our map here we can add in some additional configurations. We will need to just verify that the address field is searching for the addresses within our restaurant which should actually indicate that by default but the other thing we like to do is show a title for each marker.
So we are going to select the always option here and then the marker caption will need to be the current markers name so it will be the name of every restaurant and that will just display above the marker itself. We can identify which restaurant is where on our map and then finally there’s one last feature we like to add to this page and that is an option to add in additional search filters here so let’s say someone has originally searched for burgers within San Francisco, then they changed their mind and they like to search for Thai food, within San Francisco.
What we are going to do is add in a drop down menu that allows them to change the search query that they have created and then update this repeating group and map based on that and the way we will do this is by just moving across my repeating group a little bit.
We will add in a text element here and this will say category we will update that to be a h2 star font and then what we will do is add in a drop down menu here. We will make that relatively small there and also just move our title to be in line with our text here move that up a tad and what we like to do here is just display a list of all these static choices of food categories that a user can search from.
From 43m: 23s Building a Search Results Page
So we will head over to our home page and copy and paste these across from our search box so if we double click on our search box here we will just copy across all of these options head back over to my search results page. We will paste these in then before we make changes to my repeating group we are just going to update the name of this drop down to be called drop down category.
Now once a user has actually selected a category we will need to go ahead and make changes to the data source of our repeating group because at the moment if you remember, it is searching for all of the restaurants where the category equals the value from our URL parameter that we have sent through.
But in this case we will need to update the category to equal the same category of this drop down menu here, so the way we can do this is by not changing the initial data source but by creating a condition that reflects the drop down menu selection here.
So go ahead and define a new condition and we will select from when the drop down category so our new element here when its value is not empty. When a user has actually chosen a new category option here what we will need to do is update the data source of this repeating group and then we will go and perform a search and once again we will be searching for restaurants and you will find all our constraints here are the same as the previous constraints. We have added only this time we will be updating the category constraint to reflect the value of our drop down menu here.
So we will go ahead and add a new constraint and we will choose from the category and the category will need to equal the same value of our category drop down menu and then we will go and add in another constraint for our address. Which will need to be within 20 kilometers of the same URL parameter that we are sending through so we will select to get data from page URL. Then one last time we will be searching for our location parameter and this was a geographic address and then finally the last constraint was of course our published status and this will need to equal yes.
From 45m: 46s Building a Search Results Page
So now whenever a user searches for a particular food category and location our repeating group will automatically display a list of results based on that search query however, if the user changes the type of cuisine they would like so the different category. It will then update the data source of our repeating group and display a list of relevant options and by all means if you like to add in any additional filters.
So things like the amenities or average star rating the way you would do that is by adding in additional conditions for every single use case that you would have based on the filters that you have added to the page. We are just going to keep this quite simple here today and now we will actually go ahead and show you what this whole experience looks like from our initial home page where a user searches for a query. Then that data sent through to our search results page where we can display the relevant search results.
From 46m: 31s Building a Search Results Page
So over on my home page here we can go ahead and search for my category which is burgers we will add in my search location which was San Francisco. We will go ahead and perform that search and now over on my search results page you can see that my restaurant has displayed there is currently no reviews so it has zero stars and zero reviews at the moment.
But you will see on my map here it is actually displaying the location of that address and it has a title of the restaurant itself as well. You will also see that my title here has pulled through my user search query so it is searching for burgers in San Francisco. If we like to update the category to let’s say Thai food my repeating group will automatically update its data source and display my San Francisco, Thai restaurant here.
From 48m: 26s Creating a Dynamic Restaurant Page
We are going to focus on in our tutorial today is actually building out the individual restaurant pages themselves so what this will allow us to do is create one page on our application and then dynamically display all of our restaurants across this page whenever they’re called upon within our application. We are going to go ahead and select the restaurant page that we had previously created and the first thing we will do on this page is just take the time to update the background color to be a light gray.
Then once again we also just want to reiterate that the type of content for this page will need to be set to a restaurant which we had already done within our previous workflows in our tutorial. Now on this page what we will need to do is simply just display all of the information that we have saved for a restaurant.
You will find that this page actually might look quite close to the same design that we created for our restaurant dashboard page so to get started what we will do is we will grab a repeating group element. We will drag this across the top of our page here and what we want this repeating group to display is a list of all the images that have been saved to this particular restaurant.
So we will need to update the type of content for this repeating group to be a file just remembering that we are storing our images as a list of files. Then the data source for our repeating group will be the current page restaurants images and also just remember that our restaurant images is linked to our separate data type images and then when we call upon the list of images within that data type. It will display those within our repeating group here.
From 49m: 44s Creating a Dynamic Restaurant Page
Once we have configured the data source of this repeating group we will update the layout style to be horizontal scrolling because if you look at the yelp’s restaurant pages it allows users to scroll across horizontally not vertically and then we will update the number of columns to be three then within our repeating group. We are going to go ahead and just add in image element.
We will stretch that out to be the entire size of the repeating group it sits within we will just move that up drag that out a little bit more. Then we will go ahead and insert dynamic data for this image and this will need to display the current cells file we will then just go and close off the repeating group. So there is no space here between the image that we have just added that will do and now above this repeating group we are going to go in and add in some text elements.
We will need to just add these below hand first and then we will drag them on top of the repeating group we just do not want them to fall within the repeating group because it will then duplicate that content across every cell of our repeating group so what we will do is insert dynamic data and the first thing we want to display is the current page restaurant’s name.
We will update that to be a h2 style font we will just close the size of that element and then we will drag this over the top of our repeating group but we also just need to make sure it does not actually fall within our repeating group we will move that up a little higher there as well and then what we like to do is just display an average star rating for this restaurant as well as the total number of reviews that it has.
We will copy this heading here we will just move that down a tad again just making sure it is not falling within our actual repeating group cell here. We will backspace all of this dynamic content and then we will start by performing a search for reviews on our platform and this would be quite similar to the average star rating that we created on our search results page for a restaurant.
From 51m: 46s Creating a Dynamic Restaurant Page
We will then need to add a constraint to the reviews that we are searching for and we will just need to identify all of the reviews where the restaurant that it has been written against equals the current page restaurant and then within the reviews.
We will need to filter through the ratings of all of the reviews and then what we would like to do is calculate the average of all of those reviews then beside this we are going to add in a space and say stars. Then we are going to open up a bracket and within this we just want to display the total amount of reviews that the restaurant has received so we will insert dynamic data. We will perform another search and once again we will be searching for reviews we will add a constraint where the review restaurant equals the current page restaurant.
Then from here what we would like to do is perform a count of all of those reviews so we will find a total of the number of reviews, that have been submitted. Then finally we will just go ahead and close off that bracket and then finally below this what we would like to do is just display a description of the restaurant. We could add this in below the repeating group so what we will do is actually just move these titles down just so they are somewhat in line with the bottom of the repeating group.
From 53m: 06s Creating a Dynamic Restaurant Page
We will grab a text element we will drag this out just move it down a tad and then from we will insert dynamic data and we will choose to display the current page restaurants description we can also close the empty space there within this element because once again it will expand downwards.
If there is more content within this field and then below our description what we like to do is add in a button element here and the reason we will be adding in a button is because we will need to create a way to allow users to submit reviews on our platform. Now we would not be covering the actual process of creating a review in this module we will however in another module within our tutorial today however we would just like to show you the process of how you can start to allow users to actually write reviews.
If you have ever used yelp you will notice that the reviews are not written on the same page as a restaurant when you click this button it redirects you to a dedicated page that allows a user to fill in information about the actual restaurant. It allows them to upload photos with their review and give it a star rating so what we will be doing is just creating a quick workflow that allows a user to actually be redirected to that dedicated page. We would not go any further than that in this particular module.
From 54m: 28s Creating a Dynamic Restaurant Page
So we are going to update the name of this button to be called write review and then we are going to go ahead, and create a workflow and then within this workflow we will be choosing a navigation event because we like to send a user to a page. We will select the go to page option and we will need to go ahead and create a new page and we will be calling this page submit review.
We will create that but before we go ahead and select the destination page to be our new page that we have just created. We are going to need to go ahead and update the content type of that particular page because we would like to send through some data within our workflow.
So we will head over to our page menu select on our submit review page, we will head over to the design tab and we will just update the type of content to be a restaurant and we will explain why we are doing this later on but essentially. It allows us to identify which particular restaurant, we are writing a review for now we can go back into my restaurant page we will go to our workflow editor and we will finish off this workflow that we were creating. So we will select the destination page to be our submit review page and then the data we like to send with it is the current page restaurant that we are viewing.
From 55m: 45s Creating a Dynamic Restaurant Page
Now back in our design tab there is something else we like to add next to our write review button and that is an icon that allows users to bookmark this restaurant. Now you might like to create a feature within your application that allows users to save restaurants and then view a list of all those restaurants. What we will do here is just go and grab a icon here we will drag it out so it’s the same size as our button and then we will choose from a bookmark icon and then we will create a new workflow that registers when this restaurant has been saved by a user.
From 56m: 16s Creating a Dynamic Restaurant Page
So select to create a workflow on this icon and we will go to our data tab here and make changes to a thing the thing we would like to change is the current user so the person who is viewing this restaurant and the field. We like to change is their saved restaurants which is a list of restaurants and from here, we will choose to add in the current page restaurant to that list now as it currently stands a user will be able to click this button.
It will bookmark a restaurant however, we will also need to create a workflow that allows them to unsaved a restaurant from that list that they have and the way we will be doing. We are going to go ahead and create a new workflow here and the trigger for this workflow will be the same as our previous one where the bookmark icon is clicked. So we will choose from the elements option and select an element is clicked and the element we would like to identify is our bookmark icon here and before we create this workflow.
We will need to add a condition to this trigger because we will only want this to trigger when the current restaurant is already saved within a user’s list of saved restaurants. So choose to add a condition to this workflow and we will choose from only when the current users saved restaurants contains the current page restaurant.
Now this workflow will run and the thing we like to do within this workflow is make changes to a thing again. We will select from our data tab make changes to a thing and the thing we would like to change is the current user once again we will be choosing from their list of saved restaurants and this time we would like to remove the current page restaurant. So now when a user clicks this and this workflow runs it will remove that restaurant from their list.
From 58m: 21s Creating a Dynamic Restaurant Page
Now before we finish off this bookmark feature there is one last thing we like to do and that is actually just update the icon if a user has in fact bookmarked a restaurant. So at the moment this bookmark is empty but what we can do is create a condition that allows it to fill in just so from a user experience perspective they can actually see when the workflow has run.
They have in fact bookmarked a restaurant. So we will create a condition to this icon we will define a new condition when the current users saved restaurants contains the current page restaurant so that is the same condition that we have just added to my previous workflow and when this condition is true, we will change the icon itself.
We will choose from a new icon we will be searching for another bookmark icon and then we will be choosing the bookmark that is filled now what we love about bubble is that when you create a condition. You can actually go ahead and toggle on what it looks like when this condition is met, so you will now see that once a user bookmarks a restaurant this will update to a new icon and when they unselect that restaurant it will go blank.
From 59m: 36s Creating a Dynamic Restaurant Page
Now below these elements here we like to go ahead and finish building out our page. We are going to go in and add in another title here and this title will be called amenities we will update this to be a h2 dark style font. We will just reduce the size of the element field and then below this we are going to just expand my page down and we can add in the check boxes for each of the amenities that we are storing for our restaurants.
So we will start by expanding one out we will update the size of this once again to be 20. It matches the same format of our previous checkboxes and then our first checkbox here will need to be called vegan and by default this will once again be unchecked however we will need to create a condition that actually changes the status of this checkbox if a restaurant does in fact offer vegan options.
We will create a condition and we will define a new condition and within this condition we will identify when the current page restaurants its vegan status is yes and when this status is true we will need to go and change the preset status of our checkbox and update this to be checked then we can replicate this we are just going to reduce the size of that, we will copy across our amenity option here and the next one will be called delivery.
We will now update the heading of this so it will be called delivery and then we also need to just go and update the condition for this checkbox. We will update the condition to now select from when the current page restaurant’s delivery status when it is yes the preset status of this will be checked. Once again we will go and just copy that amenity and this one will be called dogs allowed once again we will head over to our condition tab and update the amenity that we are choosing from here to be called dogs allowed.
Then finally one last time we will add in another amenity check box and this one will be called street parking and finally we will go over to our conditions tab and update the amenity we are choosing from to be called parking.
From 1hr: 02m: 12s Creating a Dynamic Restaurant Page
Now beside the amenity fields here we would like to add in some information about the restaurants website and phone number, so what we can do is add in some text elements here and within this text element. We are going to update the dynamic data to display the current page restaurants website link, we will update this to be a h2. We will just make sure that’s reduced to one line and then beside this we actually going to add in an icon so we will choose from our icon elements here we will add in a small icon.
We will move this right in front of our website URL and we will update the icon itself just to be a redirect icon just so it explains that a user will be redirected to an external website so the icon. We will be after is this one here and then what we can do is create a work flow to actually redirect a user to that website once this icon is clicked.
From 1hr: 03m: 12s Creating a Dynamic Restaurant Page
So we will quickly go and create a workflow and within this workflow what we like to do is choose from our navigation option but in this case what we are going to be choosing from is to open an external website. The website we would like to open is the current page restaurants website link now go back to my design tab.
We will copy that icon just move it down a tad and we will search from a phone icon and then we will copy this heading here and we will update this to be the current page restaurant’s phone number and then we will just quickly move those across so they are somewhat in line.
Then there is one last element we like to add to this page and that is a map element just so we can show case exactly where this restaurant is. So we will add in a map and we will only want to display a single marker in this case and the marker address will be the current page restaurants address and that’s all we will need to do in order to configure this element.
As you can see our pages come together quite nicely, aside from displaying user generated reviews which we have added a space for here the rest of the page is exactly how we would like it.
From 1hr: 04m: 42s Creating a Dynamic Restaurant Page
Let’s go ahead and preview what this whole experience looks like within our bubble development environment so over in my search results page. We like to click on my San Francisco burgers restaurant we will click on the image and it will now redirect me through to my restaurant page. Now on this page it will display are repeating group of all of the featured images that we have added, it will display a title here San Francisco burgers and then my average star rating which is followed by the total number of stars.
We also have my bookmark here which when we click that it will add it to my list of save restaurants when we unselect that it will remove that from my bookmarks we also then have my external URL for my website. If we were to click that it would redirect us through to that website and we can also see on my map here it has the location of the restaurant itself, we can also see that my amenities are listed here and one thing.
We noticed that we have not actually ran you through is that as a user we are able to actually select and unselect these it would not make any changes to my database but just from an end user experience. We will need to quickly just jump back into my bubble editor and disable these inputs.
From 1hr: 06m: 14s Creating a Dynamic Restaurant Page
If we just jump back into my editor, we will go into my check boxes and take the option that says that this input is disabled we will then go and do that for the rest of my check boxes.
We will tick the input is disabled and now if we head back over to my page we will refresh my restaurant page here you will now see that as an end user we are unable to make any changes to these check boxes.
