20 of 25 - Editor X Dynamic Pages

what's going on guys let's give a huge shout out to editor x for sponsoring this video and let's jump in [Music] what i'd like to do is create the dynamic pages but in order to do that we need to have the content that we're going to play with for example we want to set a collection i create a collection called movies or catalog and this movie's content it's going to be just side content we're just going to keep it like this we're eventually going to do games and tv shows and all that but for the purposes of this lesson i want to just keep it simple when we create this i'm going to import data that i've already collected from a csv so we're going to do the same thing here import from my file okay this looks good all right so now that we have both cast and genres we need to start creating references to these movies so let's go ahead and add a new uh field this new field type this field type is going to be for the cast members and we're gonna create a multi-reference we're gonna choose the multi-reference field to look for [Music] past save that okay and we want to do the same thing for genre now genre we don't need to do a multi-reference just be a regular reference because we can only choose one right here save there we go so we have two types of multi-reference fields that we can start using right here we can even move these i think we could move these over so that they are more accessible right this one same here we can move the genera all the way over here the cover the year okay and then for the cast members and this is starting to look good we start doing that eventually with all of our database we're collecting and relating all these other collections over into our primary movies okay so once that's done what i'd like to do is create a new page based on or create a new dynamic page we can head over to our site pages if we click add new page we can select dynamic page let's go ahead and add a page based on our collections we have different templates but i'm interested in your collections and we're going to do that with this one which is movies so what this is going to do is editor x is going to create both the title and the listings view and it's it's going to pull everything for us together notice here we have dynamic all so all of our images all of our movies are being displayed really nice of course because this is a repeater we can start customizing all these buttons all the layout and design we can of course bring in our our masters in here so for example we can show this on the page we can show the footer and all we really have to do is customize the background colors so i've went ahead and customized both the movies all page and the movie's title page again you're gonna see here very simple things that i did i added space for the title of the movie the year the cover we have a little bit of text for the summary i went ahead and also created another repeater so this is a repeater within the actual movie page and what's cool here is that we can connect this to a data set which i have right here that will pull the cast members that are related to this particular movie so it's actually really simple all we have to do is make sure we have a repeater and here i have like the cover for the actor the label and notice that if i select the connection icon i can pull up here what data set it's being used so it's just basically pulling the data from the collection cast you can see here i gave it a name it's a read only and i'm limiting it to only six items and here's where it gets interesting on the filters within filters we have a filter for us to make sure that it only shows if the cast member is part of the actual movie item now this movie item is the data set it's collected it's now talking to another data set so you can see here i have another data set this data set is taking care of all the content for this particular movie so movies item and they can talk to each other using those filters and you can see here the filter is actually making sure that the cast member the cast listing that it's going to display is only going to show if it matches the current movie item data set and that's it once you preview this and let's say we go to one of our movies for example lord of the rings there we go so we have here the title of the movie a couple of buttons and then if we scroll down we have a repeater that it's only pulling the actors from our database we also have a couple buttons and these buttons are basically going to be our pagination so by simply using the connect icon we can have an action so that it can go to the next dynamic page and the same goes with the previous dynamic page so whenever you're creating buttons that need to link out you don't use this link icon you use the connector icon you can create a a proper action to another dynamic page so what i mean by that is if we head over to our movies all page you'll notice here what i've created is just a side section so a vertical section that contains a repeater of all our generous that has this style and i've connected this with the data set generous so over here it's all it's doing is pulling uh all the generous there's no filters there's no sorting at all it's just pulling the data and then dumping it here for us to use we're gonna see that it's asking where do we want to link out or what is the action when you click this button so basically we want to make sure that when they click it it takes us to that dynamic page pretty simple right and the same goes with the listings of movies here i have a repeater it's just creating a grid of all the movies and we're basically making sure that all the elements here the cover the title of the year are all connected correctly to this data set and under settings i have up to 40 display items that read only so in this case i'm going to list out all the movies based on the year and then making sure that they all start from c to a and because these are numbers this will show the movies from the newest to the oldest so this looks pretty good we have all the genres that we have created right here they are all linking out to their own dynamic page and here we have the movies you can see here it's very simple we have the movies based on the year so the latest one and if you click on any of these it will automatically take us to that dynamic page that we have created so right here you can also use this little floating navigation system to browse between each movie just to make sure that you have all the correct data going through or you can skip just by using the drop down directly so i think that's pretty handy now for the actual generous page so if we head over here to the dynamic page we created for generous it's basically grabbing the same design from them all the movies listings and the only difference here is that we're creating a different type of of data set right we're creating a data set for the generous item itself so here this this title is no longer browse all movies it's actually pulling from the dataset generous item and then for generous list we still need that for the you know for the menu on the left nav bar and then for the movies we're actually going to filter that all the movies that we're going to show here are filtered by the current generous item so if we click under settings we can see here that the filter itself so anything that that matches the current genera is going to appear on our on our page on this dynamic page so check this out okay we have a beautiful database running entirely with the power of editor x alright i think we have enough and we're ready to go to our next lesson and learn about collecting data from the users let's check it out

Channel: Neftali Loria

Views: 1,164

Keywords: editor x, editor x academy, editor x course, editor x how to, editor x masterclass, editor x tutorial, learn editor x, wix, wix editor x

Id: MldHAkcXHiU

Length: 10min 2sec (602 seconds)

Published: Sat Jul 31 2021