Django Ecommerce Website | Setup & Templates | Part 1

hey guys welcome to video 1 of this django ecommerce series so in this series what we're gonna do is build a full ecommerce website with payment integration and also the ability for users to shop as a guest or as a registered user so what this means is users can come to our website and shop around add items to cart without ever having to actually create an account and then eventually check out and never have to actually register so we're gonna have that side and then the ability for users to create an account with us and shop as a registered user so we're gonna have both ends of that and what I'm gonna do in this video is first introduce you to the website talked a little bit about how it's built the technologies we use and then eventually get into rendering our first templates styling that and setting up our app so let's go ahead and just get right into the website and if you haven't seen the pre-release I just wanted to recap this we have a simple website with our store and we are able to add items to cart by clicking this Add to Cart button we'll see our car update and we're gonna add let's say a couple of t-shirts right here and if we go to our car we are able to see all the items in our shopping cart now so if we go here we can update the quantity you'll notice everything up here updates our full car is updating and we can go down to removing items by going below zero for the quantity and that item is out of our cart now now if we go to the checkout page we are able to add in some shipping information if it's necessary if the product needs to be shipped and then once we add in that information we'll hit continue we'll be prompted to pay for the product and then once we complete that we'll be redirected back to our home page so that's the core functionality for a logged in user but if we log out I'm just gonna log out from the admin panel and refresh this our car is now empty but now we're gonna build a car in a different way so before we added items to the database but now we're gonna be building these in our browser so as I update the car you'll notice the car update right here we go to checkout and we now still see our products but these products will never actually add it to the database so if we go to our cookies right here so if we go to our cookies we're gonna see the car built in the browser so if the user logs out and then goes back to the website in fact I'll try that right now we're still gonna see our cart here so the items aren't remove a user can come back a couple of days later and still complete their order okay so now that I've shown you the website let's talk a little bit about how it's built and some of the technologies that we're gonna use to put this together so I'm trying to keep it pretty beginner friendly so we're not gonna use any any frameworks for the front end we're not gonna be adding in a REST API or anything like that but we are going to use some JavaScript to handle the front-end portion of things and to take care of that Add to Cart functionality and the site cookies but other than that just some JavaScript and the rest is Django with no other real libraries added to it and we're gonna keep it pretty simple so the site functionality there's a lot we can add to an e-commerce website but I am focusing on the core functionality of the data structure how to add items to a car how to add payment integration and just those site cookies that we talked about so a guest user can check out so pretty simple we're not gonna go too far beyond that I might add some bonus features but for those of you that are more advanced and want to build out that REST API one of the things that I might do later and a few weeks or months here is I might build out a replica of this website with a REST API and we'll add more JavaScript there and then eventually build one with react so for those of you that want to see a react django ecommerce website look for that in the coming months but we're probably going to put that together so just keep an eye out for that one okay so if you want to get started by downloading the source code and taking a look at that you can go to the link provided in the video description or you can go to code with steps comm and download the source code right here so this whole series is gonna be broken up into a few modules here each module is going to be its own video and right here we just have the project overview which I won't go into right now you can go ahead and take a look at this by going to the link and just getting an idea of what we're actually gonna be building out here so right now I actually just got my project set up and all we did was set up our first app set up our project and installed our app called store right here so we created our app and we configured it within our installed apps list right there so if we go to module one and go into part one this is where you can go ahead and follow these steps so if you're completely new to Django and you just want to go ahead and get started by installing that this is what we did we installed Django then we set up our app by running Django - admin start project and we call their app ecommerce and then we see deed into that so once we got that we created our store where our app called store within our new Django project and this is where I am at right here so I configure the app right here and here is a code block if you need that along with a link to the actual file that we just created so if you need to double check things you want to see how we set this up you can go ahead and click on that link and actually get that so let's go ahead and actually start with in part two in module one and we'll start by creating our templates so if you don't want to setup the templates and go through all of these you could just start with module number two and actually start with a database part that is a premium module but the video is free so go ahead and just go to video number two in the series if you don't want to work on this section but let's go ahead and start here so within our store app here we want to create a file called templates and another folder called store so sorry I meant folder not to file so templates and so let's go ahead and do that and we are going to open up our new app and we're gonna create that folder so we'll just go ahead and call that templates and within templates we are going to create the folder called store so once we have that if we go back to our parts here the next step is to create our templates so we want to create three different templates we want to create a main HTML which eventually will inherit all of our templates from but we also want to create that store cart and check-out dot HTML so let's create those and let's add in this h3 tag into each template so let's go ahead and go into that file and let's go ahead and create those templates so we'll just say main dot HTML and for now we won't do anything with in here but then we'll go into our store folder we'll create a store HTML and within here let's go ahead and throw in that h3 tag so we'll just say store because when we render these out we just want to make sure they're all configured so we at least have what we need in there and let's create cart and check-out so cart HTML and we'll throw in that code again so h3 tag and we'll say cart let's save that and for the final template for now checkout okay so now that we have our template we want to go ahead and create some views and URLs to actually render these out so if we go to part 3 where we have views and URLs we go to step 1 these are the three views we want to create in our views up py file so let's go ahead and create those we want to go to views within our store here and let's create the first one we'll make these function based views and we'll call this store pass in request and after that we want to return our templates so we want to do render and render we want to pass in West again and then we want to throw in the template which is in our file called or folder called store and within that we're gonna render store dot HTML so now what we want to do is create a context dictionary because we are going to pass in some data so context and we'll make that empty for now and then we want to throw in context with our template so we can see that data in there so I'm gonna copy and paste this and actually create this three times so we want to do this for cart and check-out so we'll just do cart and we'll change this to cart HTML and check-out and I'm just going to copy this name so the all point to that store folder and they're rendering out the templates so next what we want to do in step two I believe we want to configure our URLs so within our URLs ipy file we want to make store the home page and then we also want to pass in cart and check-out so let's go ahead and do that and by the way all the source code is provided again within these links and code blocks so I recommend you check these out make sure you have the code properly configured so we want to create that URLs up Pyo file because it's not within our app yet so let's create one called URLs py okay so in here what we want to do is import path so I believe it's from Django dot URLs import path and we also want to import our view so we're gonna do from this directory so we can do a dot for that import views so this is just gonna grab all our views and make them available in here and we want to create our URL patterns list so URL patterns and we'll set that to a list and in here we're gonna create three paths that correlate with these views so we'll set the first path to an empty string because that is our home page so we're just going to do views dot store and we're gonna give that a dynamic name and that's just gonna be store and I want to rinse and repeat this two more times for each view so for a cart we want to make that path car it with the /set the view set the name and let's do the same for checkout so checkout /e use will pass in that view set store so now that we have our URL patterns configured with our views before we actually render out our template here or actually load up our website let's go into our main project folders here and go to that URL py file so in here what we want to do is first include or pass in the include function and then use this to point to this URL pattern so in here we're just going to set the path this will also be an empty string so that'll just let everything here handle the URL routing and we'll just do include and we'll point it to that app's URLs done py files it'll store dot URL so now let's go ahead and in our step three here we actually just want to make sure that our project is ready so once we configure that we can go ahead and run our server and make sure it's running on port 8000 so let's go ahead and open up our command prompt and we're gonna do python manage py run server and once this gets going we can actually again open that up on port 8000 and make sure all three pages are being rendered so let's give this a second now that the server is on we can go ahead and open this up soap or 8,000 and I'm gonna try our cart page so stores rendering properly let's try cart throw that in okay cards rendering and check-out let's try that okay so all our pages are properly rendering our URLs and views are working so let's go to part three and actually configure our static files so we want to first make sure that our static files are ready and properly configured and then we'll actually start importing styling and images into our templates and it looks like that was actually part four not part three so the first thing we want to do is create a folder called static and then we want to create a CSS file within that so let's go ahead and do that within our e-commerce here within our project we're gonna create actually it's in the main root directory here so let's go ahead and create static so it should be right here and by the way I've set up a virtual environment I didn't put this into that description that we're following along with but I recommend you set this up and then make sure you have Django installed right now that's the only dependency we have so if you look at my command prompt I believe I am running from the virtual environment yeah I have it set up so just make sure you have that so we have our static folder and within our static folder we want to create a file called CSS and images so also in here let's create a folder called images and within CSS lets create a file called main dot CSS so this is gonna host our main CSS files and it's gonna customize the styling for our entire website so main dot CSS and within main CSS we want to add in this background body right here so we just want to make sure that we can see that our styling is configured so I'll just paste that in there we'll remove this section but we're just setting the body background within main CSS to blue and now we want to configure this so let's go into our settings py file right here and within settings dot py what we want to do is set the static ders variable here to point to that so we're just gonna grab this variable right here and I'm actually just going to copy this and down within settings dot py file we're just gonna set static files underscore ders so directories will create a list and we're gonna set oh s path join to base directory which takes us back into the root directory here and we are gonna look for the folder called static which is right here so once that's set up we can actually start using this in our page so make sure to save that and we want to actually add it to our page so what we want to do is first within our page we're gonna start with store we're gonna load static so we're gonna add in this load static template tag right here and then we're actually going to link it up so let's go ahead and in our template let's move this to the left here and I want to set up our template on the right side so with in store templates we're going to go to store dot HTML and we need to load static so we can use it so we use that right there and we'll say load static and let's let's link up our CSS so let's just do link and then we're gonna set the H ref to use these parentheses right here static and then we can do CSS for slash main dot CSS so what this is going to do is go look into our static folder look for the folder called CSS and then main dot CSS so once this is set what we should be able to do is see the blue background within our page so this is what we should see so let's go ahead and go back to our store and we might need to do a hard refresh so I did ctrl shift our just to make sure that our page can fully refresh and there we go so we have this ugly blue background we can we know that our static files are configured so what we want to do now is go ahead and actually configure our images now so we just want to add an image into our static files and actually render that out so we know that everything's working properly so this is the outcome that we're looking for we want this car to just appear on our page so what we can do is download this so I'm actually going to go ahead and save this into my project static files so we'll go into e-commerce where I have my project set up go into static images and just name it cart so we're gonna leave that as the name and now we should see car appear within our static files so within static images we see cart PNG so let's go ahead and actually render this out so to do that what we need to do is just create an image tag and for the source we're gonna do the same thing that we did with our href tag right here we're just going to do static and then we want to point to our images file so images and we're gonna do cart dot P&G so go ahead and save that and you might need to do another hard refresh I guess I didn't need to do that this time but here we go so we have our car we have our background so everything's prepped what we want to do is just make sure to clear this out I don't want to have that ugly blue background anymore so we'll just take that out and within our main dot CSS I'm going to clear that because we know it's all configured let's save that refresh it and move on to the next part so within part five we can actually start creating our main template so within part five we're gonna start building out our main dot HTML file and to do that we first want to create that boilerplate HTML template right here so we want to make sure to set that up so let's go ahead and take care of that and we'll open up within our templates store main dot HTML let's just start typing HTML right there and in most text editors if you just hit enter you should get all of this coder here if you don't make sure to type that out it's also within if you go to the steps here it's also within this text block right here so you could just copy and paste that but it's pretty easy to create so let's give ourselves a title we call that EECOM and we want to import static so we'll put that just above the HTML tag and we'll import our main CSS so static will give us access to this right here so we can actually use our CSS file and we also want to in step two we want to add in this viewport tag right here so that's just to make sure that our website looks good on the phone too so we want to throw that in so we can adjust for the viewport size go ahead and paste that in and within step three we want to paste in bootstrap into our website because we are gonna use a bootstrap navigation bar so what we want to do is go to get bootstrap comm I also have all of the source code within this link or this code block right here but in here what we want to do is grab the bootstrap JavaScript and CSS so let's go ahead and first grab the CSS we'll go to our main dot HTML and we want to paste this above our our own customized stylesheet the reason for this is because we want to make sure that our style always overrides bootstrap if we need it to so now we can grab the JavaScript and I am gonna throw that at the bottom of the page so we want to make sure that that is at the just above the closing body tag but still within the body tag and we always want to make sure again our JavaScript is sitting here especially for bootstrap so once we have that what we can do is go ahead and create our placeholder navbar so our navbar what we want to do here is first create this container for bootstrap so we want to create a div and because we have bootstrap we can give it the class of container so let's go ahead and do that we'll call that container and I can't remember what part the step that was in so yeah we want to make sure the container and the navbar are done in the same step so we have that and this is where all of our other templates are gonna sit so we're gonna say block content and then we just want to go ahead and end this and we'll just say end block and our placeholder navbar so we can see that all of our pages are inheriting from this so we'll just say h1 and let's just say navbar so navbar let's create a line so we're just gonna use the HR tag and now that we have this let's go ahead and in step four right here actually step five what we want to do is make sure that all of our pages inherit from navbar so let's go ahead and use this extends tag right here and then throw all the content within these two block contents right here so the open and closed block content tag so we want to leave load static there and just above it what I want to do is use the parentheses right there extends and within quotes here we're gonna say store main dot HTML so we're inheriting from that template and now we want to set where the content is going to sit so we're gonna say blog content and we just want to close that and we'll make sure that everything's working right before we add this to the other templates so let's go ahead and indent store now if we go to our page here if we refresh it we should see the nav bar the text changed because we're now using bootstrap and we can see stores so let's go ahead and do this to the other two templates before we add our navbar so what I'm gonna do is actually just copy this well paste that above check out and I'm just gonna copy this paste it here and add n block and we'll do the same for our cart dot HTML page so let's open up cart throw that in there do the same for the end block and let's test out the pages once we finish this up so we'll save that and let's try cart there we go so cart changed we're still seeing the same navbar from main dot HTML and we have checkout so all the pages are working what we want to do now is go ahead and create our bootstrap navbar so we're going to import the bootstrap navbar that we like and then we're gonna customize it so we're gonna look for this navbar right here and I can open that up just by going to this link here we'll close out that bootstrap tab and in here we're gonna see the navbar that we want so we want to get everything from nav to the closing nav tab and we want to paste that where our placeholder nav bar was so let's go ahead and paste that in and I want to make sure the indentation is correct so once we put that navbar in there we should now see this nav bar in every single page so the first thing I want to do is change the theme to dark because we are gonna use that blue background so I want to make sure that this text right here is white so I want to make sure that's visible so to do that that is in step two all we need to do is change everything from nav bar light to bar dark so that can be done right here we'll change that to dark and throw that in there now when we refresh it we should see our dark navbar and now we also want to customize this so what I want to do is get rid of this search bar and change this to that cart that we had so let's go ahead and go down to step three right here so within step three what I did was actually just pasted the entire nav bar code here and just highlighted everything that needs to be moved in red and everything that needs to be added in green so let's go ahead and go down each step and start with replacing this title from nav bar to EECOM and then changing up a few of these links along with getting rid of some of these so let's go ahead and first copy this right here and we want to change our URL for the title to our home page and we want to set that to EECOM so whenever that title or logo in the future gets changed or clicked on we want to send them back to the home page and we want to paste that same URL to change that instead of the home tab we want to change that to store so we changed the URL we changed the title and now what we want to do is get rid of all the links below this so let's go ahead and start with this link right here and remove everything up to the closing ul tag so we just have one li tag full ul and if we add links in the future they're going to be added within here so let's save this let's go ahead and refresh our page so there we go EECOM goes back to our home page store goes to our home page and we've added these and we've removed all of this right here so let's go ahead and remove form and also add in this div right here so what I'm gonna do is first to remove our form tag and that's right there so we can get rid of that if we save it we're not going to have anything on that right side here so what we want to do is actually use the same class that puts that form there but replace it with our cars so what we want to use is this different here with this class and I'll actually grab that from the source code so let's go to that page of source code and we'll just get this right here so we have a div with a class of form inline and it closes off right here so we'll grab that and we can paste that just inside of this main div right here so we'll throw that in after our li tag and that just gives us a link to the login page it gives us the URL back to or to our car page and then the image of our card so we added that in a few steps ago so it's in our static files that's how we're linking to Cart dot PNG so that's right there and then we have a paragraph tag with the ID of car total so just wanted to make sure you can follow step by step there and all of that is in this description right here so make sure to follow along get everything right and our page should look like this at this point so the reason why our navbar looks broken like this is because we have not set a height and width to our car icon here so what I'm gonna do is actually just paste in a whole CSS file that I've already pre-built and I'll just go over each step as we address it so I won't go over the exact file right now but what we need to do is get this file right here and just go ahead and copy everything in it and paste that into our main CSS file so right here within static main dot CSS let's go ahead and paste that and if we look up this car icon ID this is where we are setting the width so we set that to 25 pixels we display to inline block we added some margin and now if we refresh it we might need to do a hard refresh with ctrl shift R we should see our website looking like this now so the navbar was changed to this blue because we customized that also in our CSS we grabbed BG dark we overrode it with this blue and this is what we should see at this point so now what we want to do actually go ahead and start taking care of the actual content within store HTML and rendering out some dummy products in here before we start adding items to the database so if we go ahead and open up part 7 it's called store HTML this is gonna take care of that page and the final outcome of this part is going to be these 3 products right here list it out with a placeholder image so let's go ahead and first download this image we can click on that hit save as and by default because I already downloaded with the car earlier it's gonna take me to my e-commerce project static and images folder so we're gonna take away this - plus we're gonna save that and within our page what we want to do let's go ahead and go to step 1 within our layout we want to use the bootstrap row and columns to create our three columns so let's go ahead and close out main dot HTML and in here let's go ahead and set that row so that's gonna be a div and we're gonna call that div I'm gonna give it the class of rope and in here we're gonna create three more divs and we're gonna get these the class of it's gonna be called - LG - 4 so this should give us 3 columns within our row and I want to repeat this so on a copy and paste this 3 times let's go ahead and paste that there and we'll separate them so we can see that they're different columns and right now you're not gonna see anything in them because there are no items there so what I want to do is create a wrapper for each product so will create one more div and the class for this is not gonna be a bootstrap class this is actually my own class and we're gonna call this box - element and I also want to repeat this three times but before we do that let's give it another class of product so I'll show you where the CSS - this is in a second but we'll just paste that and if I look at the CSS we look we can find box element right here so we just have a shadow we give us some padding and border radius and then product can be found right here it just has a border radius to that so let's go ahead and save that and once we refresh it we'll see these three boxes right here so nothing in them right now let's go ahead and fill up that space so if we go to part seven step two what we need to do is add in that placeholder image and add in this product title right here with an HR tag so let's go back to our code and that was supposed to be added above this box element wrapper so let's go ahead and set the image tag and for the source what we're gonna do is go to our static files and our placeholder dot PNG file that's in there now we need to set the path to that so we'll just say static and we'll just do images forward slash placeholder dot PNG so we have our placeholder and let's go ahead and repeat that two more times here so again above the box element and within our product wrapper or box element wrapper let's go ahead and set the h6 tag and within h6 we want to create a strong tag so I want to make sure that's bold so let's create strong and we'll just say product so what I want to do now is repeat this actually I want to add the line first so we'll set HR and we want to copy and paste these within the box element tag twice so before I forget we also need to add the class of thumbnail to each placeholder image which is going to be the image of the product later so we'll set class thumbnail to the first image and repeat this a couple more times go down to the last one so now when we save and refresh these we should see our placeholder products I'm not sure why that's turning out that way um I need to put an end there so thumbnail now when i refresh these we should see it pop up correctly okay so there we go we have our placeholder products now we just need to finish up with those buttons so let's go ahead and open up our page again here and just underneath this HR tag add the class of or let's add a button and then add in some bootstrap code to it and we'll customize it with some custom class too so let's go ahead and call this one Add to Cart and for the class let's go ahead and set that to BTN so thats bootstrap and then we're gonna do BTN - outline - secondary and then we're gonna add our own custom class which is going to be add - BTN so we're gonna be able to customize that let's go ahead and copy this button a couple more times here so we'll make sure that's displaying correctly and we're using bootstrap and our own custom class so let's make sure the buttons out there so that looks good and then the last thing we need to do is add in the View button and the price of the product here so the View button will just be a link so we'll just use the a tag right there and we're just gonna set that to view for the href for now we're just gonna put the pound symbol there we're not gonna do anything with it just yet and we're gonna set the class - BTN outline success so BTN and then another BTN - outline - success so we want this to be green and that's what success is gonna give us and once we have that we're gonna copy and paste actually let's go ahead and add in the price first so we can copy and paste bold so for the price we're gonna set the h4 tag and we're just gonna set the price of $20 for now that'll be a hard-coded value and for the style we're just going to do that in line and this is gonna be display:inline-block so we want to make sure it's lined up with our view and product button there so we're Add to Cart button and then we also want to float that to the right so we'll see what that does in a second so before I copy and paste it let's go ahead and go over that so we displayed it in line so that means that it can be matched up with these buttons and we floated it to the right I'm not good at CSS it's definitely not my strength so if you have a better way of doing that go ahead and fix that but let's go ahead and copy and paste this button twice here so once we have that we should see all the buttons here with the price okay so there's our styling this is linked up to our car page now what we need to do is style this page in part eight here so in part eight this is what we're gonna build out it's going to be the car page we need to create this header right here with this back button the button to the checkout page some totals and then our table for our car items so we want to create a customized row for each item so let's go ahead and take care of that and the first thing we want to do is download these two icons right here so those are just underneath so let's go ahead and download arrow down so this is gonna be called arrow - down we want to save this in our static files within the images folder and we'll take care of removing that - plus so it's just arrow - down so we got that one and we want to make sure to download the up arrow so these are going to be two different images and we're also going to remove that three plus and now we have the two arrow images so let's go ahead and take care of the layout so the layout right now we're just gonna create our first row so we're gonna create a row and we are gonna create two box elements so I actually just realize we're gonna create one bootstrap row and then in there we're gonna create our own custom box elements the that I have styled within our main CSS file so let's go ahead and set that up I'm gonna go to cart HTML we'll get rid of this and we're gonna create a div called this row so we're gonna give it the class of row and within our row we're gonna create two columns and technically they're gonna be a row this is just the way that I styled it so we're gonna create a class and it's gonna be called - LG - 12 so 12 is gonna take up the full width so that's why it's represent a row and I am just gonna throw in a box element within here so and create another div and this is that custom box element that we created in the last page here so with in store dot HTML and we're gonna set this to box - element so just under our box element let's create a break tag let's create some space here so BR and let's copy and paste this box right here so create some room here make sure that we know these are two different sections so this is going to be our header and this is gonna be that table down below so let's go ahead and open this up go to our page and we should see two empty boxes so that's what we're looking for right there and now what we want to do in step three is create our cart headers so let's go ahead and add this button right here that says continue shopping links us to our store page so we're allowed to go back and then after that what we're gonna do is add in some buttons here for our cart total so things for like the item total count the total amount that's gonna be spent on this purchase and then the button to our checkout page so let's go ahead and throw these in so I'm gonna go back to my code here and within the top box element I want to first create a link right here and we're just gonna say continue shopping and within the button here what we want to do is add this back arrow so what this is I'm gonna go ahead and drag in a website here so this website just allows us to add in arrows and different symbols within our HTML so that's where I'm getting that and it's kind of this funny-looking code right here so go ahead and paste that in or just type that out that'll give us the back arrow and let's customize this button so let's give it the class of BTN and then BTN - outline - dark so that's going to give us a black button and let's take a look make sure that's correct here okay so there we go it's you shopping and I want to actually add some space there make sure we have space between that arrow and or text there so now within this box element just underneath that button let's add some brake tags so we have some space probably not the best way of doing things but it's kind of a quick fix here we're gonna add some space and we are gonna create a table and within the table is how we're gonna create our layout here for our header here so let's go ahead and set the class to table and within our table let's create a row here and within that row we're gonna create a couple of columns here so we'll set the table heading and for this first one we're gonna throw in an h5 tag we'll close that and for the h5 we'll just say items so within items here we're gonna create a strong tag and we want the item count to actually be bolded so we're gonna set that value we'll just use three for now and I'm gonna repeat this and change this to total so our car total and let's just say the total is gonna be $43 so that's going to give us that headline right there and within that same row or the header or not headlined so within that same row we're gonna create another column and for this let's go ahead and create a link and we're gonna set the URL path to our checkout page so URL is gonna send us to the checkout page and for the styling let's create a class here so we'll set class will do BTN BTN - success so we want it to be visible when the users are ready to purchase we don't want to hide the option to purchase here and let's go ahead and style is so styling what we're gonna do is set float to write and then the margin we're just gonna set it to 5 pixels again I'm not a CSS Pro so if you have better ways go ahead and do it however you please but this is my quick fix here so we set the flow we set the margin we have our URL and we want to make sure this page check out so or this link so let's go ahead and look at the page now we should have our totals and our checkout button so when we click here we're going to be sent to the checkout page when we click continue shopping we should go to the home page so let's actually add in the link I realize we didn't add that and we're gonna set the URL to store so that should take care of that now we'll go back to store we go back to cart checkout and it looks like we have our navigation in our headers so let's go ahead and build out these cart rows now so we'll go to part eight step three in our cart rows the first thing we'll do is build out that header so instead of using the table like we did above we're just gonna set a div called cart row which I have custom styling too and then we're gonna create our columns using flex so let's go ahead and build that out so in this box element right here let's go ahead and create the div and we'll take a look at the class that we're gonna add to it so class is gonna be cart - row and this is actually gonna be repeated for the actual row rows in the car as far as the items go so this is the header but we're gonna repeat this process so cart row will find that here cart - row within our CSS file so we display it as flex aligned items flex stretch so that's what's going to give us that layout within these rows and within here what we can do now is create a couple of divs here so the first div let's go ahead and give it the styling in line so we'll just say style and we're gonna set that to flex and then we're gonna set that to flex - so it's gonna be the empty div to start and we're gonna repeat this a few times so let's go ahead and set flex to for the item so the reason why we're gonna leave that first column empty is because that's where the product image is going to be and this is the title so we don't need to say anything right now so let's go ahead and fix that indentation and then we're gonna set a call them for the price so we're going to change this to price and we don't need as much room for the price so we're gonna set that to flex one and I'm actually gonna copy this one now because the rest are gonna be flex one so we'll set one for quantity and one for total so let's go ahead and change this so we have quantity and total so this is going to be the total if we have an item with the value of let's say $10 if we add three the quantity of three we want to change the total and make sure it's a dynamic total so let's go ahead and refresh the page make sure we see our totals so we have our item headers here and we want to bold these so they stand out from the rest of the row so we'll add a strong tag and I'm gonna add this to you each item so we'll go to quantity price item and then we want to close that so close that off I'm gonna copy this and just make sure this applies to all of them so we want to make sure that again we're standing out from the rest of the row so refresh it make sure it's all good okay perfect so we have our headers and we just we just need to repeat this exact row for the items with a little bit of customization so what we want to do is grab this cart row and just paste that down here so now what we can do is remove all the elements within strong because these don't need to be bolded and we also want to change the values to some placeholder values so just get rid of total here and for this first column right here that's aligned with that empty column for the header we're gonna set that to be the image so let's go ahead and add an image and for the source we're gonna set that to static and we're gonna throw in the placeholder so images forward slash placeholder dot PNG and we also want to add a class to this image so it doesn't break our rows because right now it's at about 600 pixels wide I think and we want to set that to the I believe it's row - image so let's find that here so we want to set that to row - image so that's a hundred pixels and width so let's just add it within the image tag class - row - image so once we have that let's go ahead and set these values so for the price let's just set that to actually I think it's the item so the item will just say product one and for the price we'll set that to $20 and for the quantity this is gonna be a little bit different if we go to our code here if we check out this image right here what we're trying to do try to zoom in here is we want to create within this column so it starts right here and ends right here we want to add a paragraph tag with the class of quantity then we want to add a wrapper so a div with a class of quantity and we want to throw in two images in there that will make up the up and down arrow so if we look at the demo if I scroll up somewhere here these are the arrows that I'm talking about so we're trying to create this little section right here and also keep everything in line so let's go ahead and instead of typing this out what I'm gonna do is show you how we can use the code in the resources here remember that again if you go to this link right here it's gonna take you to this exact file where we're working on the code right now so it doesn't clutter anything with other code in there so let's grab that paragraph tag and we'll paste that in so again within our div class of quantity and if I look at that quantity is right here we're displaying everything in line within it and we're setting some padding and some font weight so once we have that we're gonna grab this div right here and we are gonna throw in two images so I think I might have to fix this up really quick so I'll paste that in within our column and looks like I didn't grab everything and let's make sure to fix all of this so once we have that we have our div with quantity and we have two images with a class of change quantity and static is going to point to an arrow up and an arrow down so now let's set the total and that's going to be two products at $20 a piece so we're gonna set that to $40 and we can go ahead and refresh the page and see if we did everything correctly okay so there we go there's our product image we didn't need that title there we have the product the price quantity and now when we're looping through our data once we actually have some in the database we're just gonna list out all of our products in our cart right here so let's go to the checkout page and now we are in part 9 so this is the last part of this module we're gonna finish up by building our checkout page and I think we have four steps right here this is the page that we're building so it looks like we're gonna have I think I set this up with one row but let's just go ahead and take care of this form render these products again so we're actually gonna repeat our cart page a little bit because the styling is exactly the same and then we'll move on to module two so that'll be the end of this video so let's close out this image and we'll start with step one so for the layout we have one row two columns so called - LG six box element and this first wrapper is gonna have the idea of form wrapper and then this is just gonna be a box element so let's start with a layout and for this we can close out cart dot HTML and go to checkout dot HTML so let's create that div and let's call that row so give that a class row and scrape those two columns so div for the first one class call - LG - six so I actually want to throw in the box element before I create that custom ID so we'll just do another div we'll set that to class box - element so we have that let's go ahead and repeat these two columns and set the one to the right or below just here and this one we want to give the ID of form wrapper so ID equals form - wrapper so just to make sure things are going well here let's open up our page and refresh make sure we have our box is so to MT columns right now and let's go to step two so in step two what we want to do is create our form tag and within that form tag create two divs one with you our info and one what's shipping info so this is how I'm going to break up my form and determine what kind of data gets rendered for that form depending on who our user is and right here we'll just create a line break and we'll create a button there for that submit field and that will complete our form once we start heading in all the fields so this is just the layout of the form and we can set that up right here so we'll say form and the ID of the form is gonna be just form and let's create that first div so for the first div we're gonna call that we're gonna give it an ID of user - info user - info and let's create that second div and we'll call that one shipping info so this will just again hold the fields of that part of the form so ID equals shipping - info and finally let's create that button so we'll create an input field or actually we want to create that line break for it first so HR and then input and the type is going to be submit and for the value I'm gonna change this from name to value the value we wanted to say continue so continue so they'll submit this form and then they're gonna be taken to the payment option or the payment option will open up so that creates that form wrapper and for the next step we just need to throw in the form fields so for this I'm actually gonna do a little copying and pasting so that is still step two but down here so there's a lot of code here and what I'm gonna do is grab these form fields and we'll just paste them in so we have them all in our source code so let's go ahead and open that up and it's also in this code block and I like the source code because right now my code blocks are kind of funny looking and they don't always keep format so we'll just use this within user info we want to take this form wrapper copy that and we're gonna paste this in and you'll notice that how I style my forms is going to be by creating a custom field around each input field so we have our input field and then we have our form filled and form filled just sets our width and displays it in line and we just add some padding so instead of using krispies forms or anything like that with Django we're just gonna manually create our forms for now and that should create the first part of our fields so we have our user field and we also want to grab our shipping info and we actually need to add some styling to our button there so we'll grab these paste those inside shipping info and I just want to fix this indentation and let's go ahead and into our input button let's create the ID of form buttons so ID equals form - button this is for event handlers that we want to add later we want to be able to listen to when this form is submitted and then we're gonna say BTN BTN - success so we want to make that green and that should be a - not equals and then BTN - block so we want to make sure that's also full width so this should give us our other form fields and style our button there so let's refresh okay so everything's looking good let's close this out and let's see what's in this next step so payment summary or payment info so for payment option what we want to do this is step three we want to add another another button in here for now is just gonna be a rapper that's gonna say payment options and we're gonna set the class to hidden so right now if you look at our CSS our class hidden just sets it to display block so any item that has the class of hidden is not going to be visible so we just want to add that and then open this up once our form is submitted so that's going to be outside of this box element so we're in the column but we're gonna put a break tag and then another div with that box element and the wrapper for the PayPal option so let's close this out go back to our checkout page and we have box element so it ends right here just underneath still within our column let's go ahead and create that so let's create some separation put a break there and create that div so the div the class is going to be box - element again so we want to add some styling to it and we're gonna give it the class of hidden so actually before we do that let's not add that so we can see it and then we'll add it so the ID is gonna be payment info so we have payment info and we're just gonna set a small tag and we'll just say PayPal options okay so PayPal options will just give us an option for a credit card form or pain just with PayPal directly by opening up a PayPal link so we'll open that up so there we go once we submit this form this needs to be hidden or actually it'll still be there but this option will open so now we can set the class of hidden here we'll save that refresh it and that should do it so for this section again that's all hidden the left side is taken care of let's go to the order summary so for the order summary I'm actually gonna create a little bit here manually and then we're just gonna copy and paste some code here just because we've already gone over all of this and we're just gonna we don't want to have to retype that so just underneath in our right box or the box underneath our first column we're gonna create this back button with the background and outline here of black and we're gonna send them back to our car page so we're also gonna have that arrow pointing back with that value right there I don't know if that's a hexadecimal value or what it was called but we're just gonna get that and right back to cart so let's go ahead and get the source code here so we'll view source code actually I can just use this code block because it's not really not really gonna mess up our format here so just within here we're gonna throw that in and then we want to add in this HR tag to HR tags with an h3 tag of order summary so let's go ahead and do that we'll create a line around it let's close that off so HR or we'll just create two of them create kind of a wrap around it and h3 we're gonna say order summary okay so we have order summary there save that and we'll go back down or back to our code with steps website and look at the next step so what we want to do now is add in these cart rows so we're just gonna use cart row we're gonna throw in our image product ID and quantity this time we're not gonna do anything special with quantity so let's go ahead and grab that source code and for this I am just gonna actually open up this because the formatting isn't me better within github and we need to think it took me to the wrong link hope nevermind so okay so there we go cart row we're gonna grab that and paste that underneath our HR tag so we'll fix this indentation we're loading static loading that image so let's save and refresh this just to make sure we're following this properly there we go so we have our product and what we need to do now is close this off with adding the items and totals so let's go ahead and finish this up so just underneath our cart row that'll later on just be a loop where we'll output multiple items there and just underneath that we're going to create an H five tag and we're gonna say items and that's gonna be two and we're gonna also set the next one to total and set our cart total so we'll set that to $40 there and that should do it for our template so I try to minimize the copying and pasting this is the first time I've actually followed this kind of system right here where I'm I created this website and I'm following along with it so that was kind of interesting to use that as an experience but in the next video what we're gonna do is go into data structure so we're gonna jump into building our models actually rendering out real products and replacing this data here so all the data in our cart all the products you're gonna start seeing real images real products being output so video number two's coming right after this so look out for it [Music]

Channel: Dennis Ivy

Views: 318,824

Rating: 4.9620852 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Ecommerce, Website, python

Id: _ELCMngbM0E

Length: 59min 35sec (3575 seconds)

Published: Thu Apr 30 2020