How To Configure Wix Code Database and Dynamic Pages

I learned about hey y'all everybody welcome we are all here we are inside the wicks Miami office is so nice to be here with all these amazing people y'all can't see it but we are all sitting on top of each other's a million people here worry y'all everybody say hello Ori is here and he has an amazing presentation that he wants to tonight a presentation a demonstration of which code this is gonna be a beginner to maybe intermittent intermediate demonstration and we're just gonna jump right in it Ori he needs no introduction to you people you people we the community know who he is Ori it's all yours brother thanks bit okay so hi everyone like Brett said it's going to be basic I thought it would be a workshop let's see if we can try and squeeze it in so let's try to follow what I'm doing okay we have a few people here that can help out if anybody gets stuck just raise your hand so that we can have you people trying to to help you work it out and let's see how it goes okay so what we're gonna do we're gonna start with an editor we're gonna start with a blank website just go to Wix create a new website start with a blank website and we'll create a site for menus for recipes so choose a template blank template and edit so I will there you have a blank editor okay now can everybody see okay okay now let's go right ahead and open code or enable code turn on developer tools and this will give us access to what we're gonna be seeing today collections repeaters dynamic pages we're gonna see how we can put all that to use expect especially when we have sites with repeating layouts or with a lot of information for example we have realtors here that have a lot of properties that they want to display on their website right now they're adding them manually each property on a page and that can be very time-consuming it's very hard to manage it when you want to remove a property you have to move them all so it's a lot easier with wings code because what we can do with Wix code with these are the very basics of week's code we can use collections which are tables very much like a spreadsheet very much like an Excel spreadsheet which I'm sure you've all used before so we can use those tables to aggregate information into fields and then we can easily display that in any way we want so that we can very easily manage it okay let's see how that works so we're gonna start by creating a collection a collection is that table like it's spreadsheet so under this database section by the way this whole section appears after we enable code okay once we went to the code menu and turned on the developer tools we'll see this tree here on the left so the first thing we're going to do is I'm gonna add a new collection I'm gonna call it recipes now one thing to want notice with Wix code and code in general is that it's very touchy about case about lower case and upper case so you close the door Thanks right so it's very particular about lower case and upper case so we have to remember if we're using lowercase or uppercase when I create a collection I like to give it a first uppercase letter than everything else lowercase like this you can choose your own way but just try to be consistent remember what you did and try to be consistent it'll make it easier for you whenever you need to access it so recipes it's I think it's best for now if you follow what I do and though you use a capital R and create the collection once we do that we get an empty collection the empty collection by default has a title field and now we can add whatever fields and whatever information that we want here again very much like Excel so let's see how we think that um let's say we're we're gonna punch in some recipes so let's put a recipe for my favorite dish which is lasagna not that I would know how to start preparing one but so I've entered the title and now I want to enter another field let's create an image view so I'll call it image with a capital I and now you'll see before I add it there's a field type okay there's a drop-down for field type and here I'm going to select naturally image okay so this is gonna be a lasagna image now I want you to notice that there's a there's a field key this field key is automatically generated and it's basically it's usually the same as I gave the name to the field or the title to the field but in lower case this is what we're gonna use when we want to access this field from the code we'll see that later okay so we're adding the image the image field and we can go right away and add an image okay I don't know if we have a lasagna image in the free Wix let's see we do so now we have a title and we have an image let's add a description field and that should be enough for now description this is a text field so I have nothing to change here I just add it and I'll just call it my dish now let's see what we can do with it ah but wait first let's add two more dishes so that we have a list and not just one item and then we can see how it shows in a page when we add a repeater so let's add pasta plenty of those add meatballs close enough okay so we have three items and we can display them now till now what I had to do to display those items is I had to create a page and then start putting them in manually one on top of the other and I'd have to be very careful to position them correctly so it doesn't look crooked crooked cetera let's see what I can do now so let's add a page for this add a page called everything this later we're gonna categorize okay but for now let's just create one index page with everything on it all the other recipes okay so we have this page and now I'm going to add two things first of all what we want to do is we want to display information from the collection okay we've created a collection we've put information into that table into that collection we want to display that information on the screen over here so what we need is we need a connector first between the collection and the page and that connector is called the data set okay so we're adding a data set now this data set is something that only we see in the editor it's only there so that we can control the data set so we can configure that connection but our users are not going to see this component okay so we can just drag this component aside we could put it over here just so it's not in our way okay and again the users are not going to see this component so we can click on manage data set and we're going to choose a collection then the collection we have only one collection right now that's what we want you want recipes okay and we don't need to touch anything else right now so now this connector is ready to make this connection between the collection and what we're going to be displaying on the page now to display this on the page we're going to add something else from the lists and grids section okay again this is a section that we'll only see once we have the code turned on okay otherwise it's not available so in this section we have repeaters these are repeaters different kinds of repeaters let's take this cut this first repeater I just add it to the page now what we can see here is that we have something with a repeating kind of layout okay it's going to continue to repeat we have the three first ones but we'll have more coming and if we narrow this down then we see the three are shown as two and then one below them we can leave it like this now and we can control whatever is visible in each of these boxes so now we want to display recipes okay it's showing us demo information in this case just information about locations in Greece but we want to connect this to the collection let's see how simple that is you see this little icon here this icon represents a database to some it looks like the stack of pancakes or albums let's click it and choose the data set okay because we might have more than one data set on page so we need to choose the data set in this case the recipes data set that we just connected and I've clicked on the image so I'm connecting the image in this case to the image field so again if I didn't have this yet I click on the image here I make sure that the image is selected I click on the database icon looks like a stack of pancakes and I choose the image field ok the image field from the collection that we've created okay now right now it's still showing us demo information we can change this information but there's no need to because that's not what the user is gonna see this is just demo information for the editor once we preview for now we only touch the image okay we didn't touch any other field so all the rest of the information is not gonna change but the image should and let's see one of the basic concepts about coding in general not just in Wix is to take baby steps so we just did a little something we created a connector we added a list and we connected the image to the corresponding field let's see if that works so let's hit preview and this is what I was hoping to get so as you can see the textual information is unchanged we didn't do anything for that to change but the images are the images that we've selected in the collection so does everybody have that on their preview now is this working for everyone ok so wait so we're going to move on but someone will try to help whoever is not there yet ok now I'm gonna go back to the area and let's connect a few of the other fields we have actually two other fields to connect so let's connect the texture title ok let's broaden it a little along with its background so photos do it without so here I'm going to click the database collection again I I selected the text okay make sure you're selecting the text not the background I'm selecting the text and I'm hitting the connected data database icon and now I'm going to choose naturally the title field okay now this field we don't really need right now so let's just delete it and let's put the description here so I've got to do the same thing with the description there we go I'm going to remove these just simply selecting them and deleting them and I don't need all this hype now so I can shrink the container a little bit okay and let's try to hit preview now and there we go we have everything that we had in the collection displayed now on the page now for just three items it would probably have been easier for me to just put them on the page but the idea is that with this it's going to be a lot more easy for me to manage 20 or 200 or 2000 items ok mind you I can also import them so if I already have them listed elsewhere I can turn them into a CSV tabled and upload that into this collection ok so it can save me a lot of time ah so this is the very basic use of a collection and repeater now let's go a little forward let's add categories to these dishes ok so here in the collection one thing I could do is I could add a field called category and I could type in categories like main this cetera but it's better if I don't type in the categories but I create a separate table for that separate collection and I connect them and why is that why is it better for me not to type it in does anybody have any suggestions for dessert or excellent so I can create a master detail view and I can have additional information on each category okay one spot update everything that's right changing one place will update everything and it'll help me avoid typos okay so because if I if I just use you know typing in text like main or dessert I might mistakenly write dessert the wrong way and it won't show up and I won't know why so it's better in this kind of case to create another collection as we will now sorry entry but another collection so here there's a plus sign next to the database on this tree new collection and I'll call it categories again with a capital C okay now the categories have a title so let's create the few categories we need initially we have main dish and we have an entree and we have dessert so that's a three-course meal now we can go back to the recipes and we can create another field which is going to be a reference field to this new collection so does everybody have the new collection already okay so I'm creating another field but I'm not gonna click on add yet okay bear with me so I'm creating another field and I'm gonna call it category and now I'm going down to field type at the very first type I have here is reference I choose reference and then I get some other options open up to me and now I can choose which collection this refers to so this is going to refer to the collection called categories which we just created here I have another checkbox for if this is a multi item collection so what is a multi item collection sometimes we want to associate multiple entries from the other collection here okay so this is not the case in this case it's not going to be a multi item collection or a reference but a good example would be if we were using tags okay and we could use tags for example but with the same recipes intention we could use tags for example for ingredients okay and then we can create a collection with ingredients like pasta milk eggs and we can have multiple ingredients showing up on each of these items okay but we're not gonna go there yet so we've created a reference field we're we're referencing the newly-created categories collection and that's it we're leaving it as a not as a multiple item collection reference and we're adding now you'll notice that we have this new field and we have a little drop-down arrow which means we can select wheat which of these courses each of these dishes belongs to I have an empty one here so let's fill out a dessert that's chocolate mousse or we spell that [Music] sure I misspelled something so now the category for this is going to be desert and for all the others is going to be me that's enough for sample Jade data just so that we can see what we're getting so we should now each have four dishes in the recipe collection one of them is a desert and the three others are me now if we go back to that page we've created that we called everything and we preview we're still going to get everything we're going to get five dishes because we this here we didn't filter okay we did create any kind of filter that shows us different forces or categories now let's go back to the editor and let's go back to the categories collection and just as Maya suggested earlier because we've created a collection for these categories we can now add additional information let's just add a picture so that we can create a category page you'll see what I mean in a moment so oh that's a good idea to save let's save recipes as everybody said okay so I've added just another field then I'll call image and I'll change it to an image type then it is and I'll just use some example image this was an entree salad example entree okay for dessert although my favorite lasagna for my dish again okay so now we have the three categories and we have an image to go with each one of them so that we can create a category page we create a page showing desserts or showing made of courses etc there seems to be a problem here with my editor so let me just save and reload is everyone following so far no sorry okay someone help out here Oh you you okay so we don't have much more time so actually I want to look at first at dynamic pages so we've seen how we create a repeater which is on a certain page we want to show multiple instances of the same kind of information okay like properties or like recipes on the same page a list another case is like we have a an e-commerce website we have a list of the products and when we click on a product we get a product page a full page about the product okay so that's another kind of dynamic content that we can create and associate with the collections so that when I'm looking at the everything page okay let's preview that for a moment when I'm looking at the all the recipes I will see a list of the recipes but then I want to be able to click on a recipe okay here I'm not gonna see the whole explanation of how I'm going to create a lasagna but when I click on the lasagna I'm expecting to go to a big page with a big page of picture of lasagna and with the whole explanation of how to make one so let's see how we do that okay so what we're gonna do is here on the recipes collection we have this gear icon and we're going to add a dynamic page there are several ways to do this this is one of them so I'm adding a dynamic page for the recipes collection it's an item page okay it's going to be a page about one item one recipe the were displaying now I can set exactly what I want the URL to look like okay I'm usually gonna go with the default okay because usually the default is gonna be something like this whatever the domain is followed by in this case recipes which is the name of the collection followed by the relevant field which is title so that if it's a recipe for for lasagna the URL is going look like this it's gonna be recipes slash lasagna which is a perfect URL to have okay any of you been looking into SEO that's a very good kind of URL you want to have it rather than having an ID for example okay we want something that's readable in the URL so usually we're just gonna go with the default and I create the page now what we get here we get a blank page but we have this on it we have a data set on it now remember what a data set is data set is the connector to the collection in the previous page we had to create a data set we added a data set on our own in this case since it's a dynamic page it's already created with the data set in place and why is that because this page as opposed to other pages okay the everything page has its name and it has its URL the URL will be everything here it's one page in the editor but in in essence it's a lot of pages coming from the different rows in the collection so this is one page representing a lot of pages so this data set is what connects the URL that we'll be using to the relevant row in the collection okay we'll see that in use in a moment so what I want to do now is I want to create this page this is an item page showing me a lasagna or a pasta or whatever one item or how did how to create that dish so we're going to add a title text field let's add any one anyone drag it here and connected using the connected data icon okay clicking on this I already have the recipes data set selected for me and I'm choosing the title and now I'll add an image and I'll just add any image really doesn't matter what image I use here it's going to be replaced by the image from the collection and I click the database icon again and I connect this to the image field and now let's preview let's save first and then let's preview so I got the chocolate mousse and I got a new little thing over here a new control which is this let's see the different rows that we have in this collection so that we can preview whatever we want to preview on this page so I can see how my lasagna is gonna look on this page so I check those Anya here and I can flip through them just to see for example if one of them has a very long title like the chocolate mousse which I also think I have probably a typo in but I can see that I don't like the way it's displayed so I can go back to the editor and I can give this a longer a wider place so that when I preview chocolate mousse it might still be with typos but at least it'll be in one line okay so now we have an item page to this page now I can add a description of the ingredients the instructions on how to create how to do the dish okay I could create those fields in the collection yet and we're not gonna do that now I think you've got the basic idea okay I can add a text field here which is called ingredients and I can add another one with with how to do it yeah I don't remember if there's a limit but if there is it's pretty big painting yeah so usually you're not gonna hit a problem there if there is I'll show you a few very important resources for anyone using Wix code and you can find answers there and you and if you don't find out what's there you can hug me down and find answers for me okay so we're gonna go back to the everything page now what I want to do now is I want to connect between this page to the item page so I wanted me make it possible when I see the list of the different recipes to click on a recipe and then get the actual ingredients and instructions on how to do it so what I'm gonna do for that I'm gonna select the image field here okay making sure I'm on the image I have the image selected I'm gonna click this connect the data icon again one thing I want to draw your attention to you see that it's green now when it's green it means that it's already connected before it was connected when it was just demo data and when I if you remember if I clicked on preview before I connected the title in the description I just got the demo title in description so this icon was black back then okay once I connected it turns green so I know it's on I know it's connected but even though it's connected I could still do some more tweaks on it so I'm gonna click this icon so I get this dialog and I see that it's connected to the image field but I also have link connects to okay right now it wasn't connected to anything so if I hit the image nothing happened now if I'm gonna hit this and I'm going to choose apiece title you'll notice the new dynamic page that I've created here is called recipes and title and parentheses because title is the selector for which recipe I'm showing so I'm gonna choose that over here and then out of pages and now I'm gonna preview and let's see what happens now so I got all the recipes in one page and I can click on one of them I'm gonna click on the lasagne and I got to the item page okay talking of going back if I go back here it will give me the desired results I'll go here actually I can just add a menu to the header right so free being again Oh everything clicking on the past of the image and I get a page for the pasta okay and of course I'll add the description now the ingredients and I can add a video I can have anything I want so I think we're out of time so this was a basic demonstration showing us how to create a collection how to connect that collection to the page with the data set and then how to either use a repeater to show many items on a single page or use a dynamic page to show a full-blown page for one item okay so thanks that'll be all for the recording and we can continue

Channel: Wix Partners

Views: 35,978

Keywords: wix code database, wix code dynamic pages, how to create wix code database, wix code database walkthrough, Wix code create dynamic pages, how to create wix code dynamic pages

Id: ZhPnQozLQ_A

Length: 35min 22sec (2122 seconds)

Published: Wed Sep 12 2018