Django Ecommerce Website | Data Structure | Part 2

hey guys welcome to video number two in this series in this video what we're gonna be doing is creating our database models and rendering out those items in our templates so right now we have filler data we want to start actually outputting real items for our products here and then we're actually gonna create a real order and fill up our cart with real items so you're gonna start seeing images rendered out here and our checkout page with dynamic data for a real user so we'll take care of all of that in this video and if you're one of those people that didn't want to build out that template with me in the last video I totally get it it took a while for us to do that but you could just go down to our project overview and download all the code we built out in the last video so I'm gonna continue this for each module so we're always gonna have the code kind of broken up into sections here so you can always get the code at the end of each video we're gonna continue this series at module two so working with data structures all the videos are gonna be free and posted here so module two is a premium feature if you want to use this step-by-step guide so if I log out you're gonna see the modules with this unlock button right here so you can unlock all the modules in this course by going to this page right here and 1249 will unlock everything so if you want to follow along with a guide go ahead and complete this you can use PayPal or credit card or a debit card to purchase this if not it'll all be visible in the video I'm still gonna follow the guide so let's go ahead and get started okay so we're gonna be working within our apps models dot py file and the first thing we're gonna do is import the default Django user model then we'll start with building out our customer model products orders and so on so if we open up our steps here this is what our structure is gonna look like this is that built in user model I won't go over this we'll just start building it but this is the overall layout so let's go ahead and start with step one and with this we want to import the Django default user model so we'll grab that paste that in here so for those of you typing this out it's Django dot dot models import users so we're grabbing that and in step two what we want to do is build out our customer model so our customer model is gonna have a few attributes we're first going to give it the user and we're going to attach that as a one-to-one relationship to that model we just imported and then give it a name and email so let's go to our models up uy file and build that out so I'll set that as class customer and it's gonna inherit from models dot model and we first want to give it that user so we have a user and this is gonna be models dot one-to-one field so every letter is capitalized there and this is where we can connect it so one-to-one relationship just means that a user can only have one customer and a customer can only have one user so we'll set that value to true for null and also for blanks so the reason why I'm doing this you might want to change this later but if we're gonna be importing or changing anything up I don't want to get any errors now but you might want to mandate this kind of information so for our name we're just gonna set that to models dot char field so we're just gonna make that a string value and we'll set the max length to 200 for now so we'll leave that I don't think we need that any longer for a name and then we're gonna set actually we need to set the value then we'll set an old to true and the last thing we need is going to be an email so I'm actually gonna copy and paste this and just change the attribute name and we'll set that to email and let's return that string value so we'll create that function or the method underscore STR underscore underscore and we're gonna pass in self and we want to return self dot name so self done name this is going to be the value that shows up in our admin panel or when we query the model and before I forget let's go ahead and set on underscore delete we need to set this value for creating the relationship and we just want to delete this item if the user item is deleted so we're gonna say on delete two models cascade so once we have that let's go to our steps now and start building out our product order and order item model so for our product we just need to set the name price that's gonna be a flow field and then digital so digital is gonna be a boolean value and why this is a boolean value is because we want to know if the item is digital we don't need to ship it if it's false then that means that's a physical product we need to ship this so that's where I am gonna get that logic from so let's go ahead and create that and for this we're gonna set class product and again we'll in here from models dot model and we're just gonna grab the name value here I don't want to repeat myself so we'll paste that in then we need price and we haven't used that so we need to create that price is gonna be models the float field so we have that set and we also need digital so digital that's going to be models boolean field boolean field and we need to set a default for this so default we want to set that to false so by default each item is gonna be a physical item unless we change that so that's gonna be equal to false and then I'm gonna set null and blank also to true so I just default into this you don't have to follow this step if that's not your practice here so we'll set default null and blank to false and let's return the string value so underscore STR underscore underscore pass himself again and throw in name so return self dot name and before we move on to our order that needs to be models dot model take out that extra s there and let's go to our order object so our order object we just give it a relationship to a customer that's a mini to one relationship which means that summer can have multiple orders and then we have a day order that self-explanatory complete this essentially means that if complete is false that is an open car we can continue adding items to that car if that's true this is a closed car we need to create items and add them to a different order so this just changes the status of our cart and then finally a transaction ID this is just gonna help add in some extra information to our order so let's go ahead and create all of this so just below product I'm gonna go ahead and copy this right here and it will change the name to order and we are going to set the foreign key value so customer is gonna be equal to models dot foreign key and we're gonna throw in a customer object here so we're taking this we're passing it in so we're setting the relationship and I just want to make sure everything's spelled correctly and for this we also need the on delete value so we are gonna set this instead of Cascade we're gonna set it to null so if a customer gets deleted we don't want to delete the order we want to just set the customer value to no so we'll just set blank to true and null to true so we want to keep those values consistent and then the next thing we need to do is add in that day ordered so date underscore ordered and that's gonna be models dot date/time field so with this we're just going to set Auto underscore now underscore ad and then we can change the value whenever that order is set to complete so Auto underscore now underscore ad is set to true and we need to throw in the complete value so we'll set complete and that's gonna be equal to the boolean field so we'll just take this right here and we're gonna set complete to false by default and then the transaction ID so the transaction ID is just going to be a character field so we're just going to grab name right here and change the value so transaction underscore ID and that about sets it and we're just gonna return that string value now so for the string value for the order what we want to do is we're just gonna return an ID for now so we're just gonna say self dot ID and because we just have a because the ID right now is just an integer we are gonna have to put that into a string because we can't return an integer for that string value so for those of you that may have noticed we didn't add an image field to the product that's something we're gonna have to customize later it does take a little bit of extra configuring so I wanted to leave that in its own step but we will add that a little bit later so what I'm gonna do is set the value of image and we're gonna comment that out just so we know we need to set that and for now let's go down to our order item and what we need to do is create items that need to be added to our order with a mini to one relationship so we're gonna use foreign key here and our order is our cart an order item is an item within our cars so car can have multiple order items so that's why we need that relationship so we also want to know what product we're attaching this to the quantity and the date added so let's go ahead and add those fields there so first I'm gonna copy this object right here we're gonna change this to order item and I want to set the product so we're gonna copy this value first and we're gonna change this to product and we also want to connect it to that model so we have a product and let's grab the order so set the order attribute so this is going to be the child of an order and we need to grab order pass that in right there so remember a single order can have multiple order items so now we'll set the quantity and that's going to be an integer field so models dot integer field and we're going to set this default value to zero and we'll increment this as we add an item so we'll set that to zero no will be equal to true and blink will also be true okay so we have our quantity and we just want to get the day added so what I'm gonna do is actually copy this date time field well paste that in here and we're gonna change the value from ordered to add it so the date that we added this item to our order and we've been setting the return values I realize that in my instructions I didn't add it I'll just leave it empty for now it's not a big deal if you want to customize that what I would recommend you do is query up to the product so do something like self dot product name and return the name value but for now I'm just gonna leave that blank so it looks like the last model we need to add is going to be our model so in step four we just need to add the shipping model that's gonna give us our customer information order and all the address fields and they added so let's go ahead and create this one now so back in our models I'm probably gonna do a little bit of copying and pasting because there's just a bunch of attributes that we can fill in some data for so we'll do shipping address and that's the model name I want to make sure we spelt that right and for our first value we're gonna set the customers so we want to attach it to a customer and an order the reason why I want to attach it to a customer is because if in order for some reason gets deleted I would still like to have a shipping address for a customer so that way we can kind of validate that data and the next thing we want to do is set the order and change that and we'll just pass in the order object and actually just notice that we spelled models run here so let's go and fix that so for our address city state and zip code those are all just gonna be a char value so let's go ahead and grab we'll just use the name here and we'll paste that in three times so one for address city state and zip code so we'll change this to dress make this city state and zip code oh and we also have a date added so I'll just grab that throw that in here and what we'll do for the return value is we'll just return the address so we'll just do self dot will remove this string right here and we'll change this to address so I see a few mistakes up here we need to fix that space and it needs to be integer field will correct that everything else looks good so we'll save that and the next thing we need to do is let's go ahead and migrate our database and then add these models to our admin panel so if we go to our command prompt we can close everything out or turn it off turn off our server and we'll just run Python manage py make migrations so we want to make these migrations and then we want to migrate the database for now we're just gonna use our SQLite database and we're not customizing that and it looks like everything was created so if you go into your migrations we just ran our first migration so we're prepping the database and now we actually want to make these changes so python managed py migrate so this is actually going to apply those changes and we also have some default stuff because this is the first migration we're running so we created that user object and so on so now what we can do is add in the objects into our admin panel so within admin py let's first import our models so if we go to this step here what we need to do is first run the import and then add each object so what I'm actually gonna do is grab this code right here instead of having to type all of that out well first to run the import and then I'm gonna paste that in so from from this directory so from dot models import and we just want to import all of them so that's why we're using that star and then I'm gonna paste this in so admin site register customer product order order item so everything we just created so in order to see this go ahead and create a super user and actually take a look at our admin panel so I don't think I put it in the steps here I guess I did so what we want to do is create the admin panel create a super user and actually add some products so if you want you could add the same exact products that I'm gonna be using we're gonna create these and that way you could have the images I'm also gonna provide with this so let's go ahead and take care of that and you can follow along so we'll do a Python manage py create super user and I'm gonna call my user Dennis so set yours up as you need and I'm gonna set my email to Dennis IV y11 at gmail and we'll set a password we'll have to confirm that okay so we have our super user and we want to add some items so let's go ahead and do Python manage py run server so once our server is on we can open up on an admin panel so let me open that up in another tab here and we'll just do Ford slash admin so we can log in my stuff is already set up here so because we register these in the admin panel like this we can actually see these so if you don't register them you won't see your objects so let's go ahead and create some products and add them to our database first so what I'm gonna do is go ahead and create these six products so for those of you that don't have the guide I'll zoom in go ahead and pause the video add these products if you want to follow along exactly how I'm setting things up but we're gonna grab all six products and set them so if I go to add product I'm just gonna grab all the names prices and set the value of digital to true or false or in this case no or yes so take a minute add these and then I'll see you right after this okay so when the video was paused I went ahead and added six products right here and now it's time for the fun part so but we want to do is go to part two if you're following along and we want to render these products out in our template so right now we're still gonna render them without an image but now if i zoom out here we're gonna have the real titles and the real prices so let's go ahead and start at step one so what we want to do is go into our views and we want to go to our store and query all of the products so let's go ahead and take care of that and I can close down our models or I guess I'll just move that to the right because I might want to see some of those attributes and we first need to import models into our views so we're gonna do from the models import and we want to import all of them so we'll hit star and remember we can do dot models because views and models are in the same directory so now that we have that we can do products will set the value and we'll get the query set so we'll just do product objects dot all so we'll get all the products and we want to pass them into our template so we'll throw them in through the context dictionary and let's open up our template and the right side here and we'll close this out here so let's go to our store dot HTML so what we need to do now is replace some of that placeholder value so we want to create a loop and change what's being output so if I go to my instructions here we'll close these two images out the step is in step two what we want to do is go ahead and create this for loop I'll zoom in just to make that easier to see we're gonna create this for loop and we're just gonna reset the values and then delete some HTML for the dummy content that we don't want in there anymore so let's go ahead and take care of that so in store dot HTML we're gonna grab our first column that ends right here so that means that we can remove these other two columns so we only want the one and within our a row just underneath the opening row tag let's create our for loop so we're gonna say I'll actually move this to the right so we can see the products so we're gonna use this products query set so we're gonna say for product in products and then we want to end that loop right here so let's end it just above the closing rope tag right there so or the Road div so we'll just do and four so if we if I put a D there so we'll close that out so if we look at our page right now we're gonna see four or six items being rendered so now we're out putting these dynamically and what we want to do is change the values inside so let's open up this image right here we want to set the product name we want to set the product price and we're gonna use a float field because this can look funny if that number is odd we can have six characters after that decimal point so we want to make sure to fix that and I believe that's it so just a name and the price for now so let's go here and we'll say product name and that needs to be a lowercase P because we're now accessing this product in the loop and we'll say product name and then for the price we're gonna leave that dollar sign right there so we're gonna do product dot price and then we're gonna do a pipe and we're gonna say float field and we want to get two decimal points to the right so if I save that for your fresh we should see dynamic content mean output so it looks like I spelled flow field wrong it's float format not flow field so format and now if i refresh that okay perfect so we have our products we have headphones the mountain of olive book source code t-shirt we see all the prices and in step three what we want to do now or part three we want to take care of rendering out the product images so for this what we're gonna have to do is first add an image field and the image field requires an import that we need to run and that's going to be pillow so we'll take care of that and then we'll set up our media route make sure that when we're uploading images they're being uploaded to the right file and then we'll configure our URLs to actually render this image and then we'll finish it up with having the products displayed so if you look at the end result we should have this being rendered out so we'll actually have images that we're gonna import so before we start working on that if you're wanting to use the same images that I had I actually make sure they fit in the div properly so they can align with the products let's go ahead and download these six images and when you download these do not put them into your static files yet put them somewhere where you can just query them later because we want to upload these dynamically so I'm gonna put them into my desktop again don't put them in your static files just yet so I'm gonna grab the headphones and I'm gonna repeat this a few times let's make sure we get all six and put them somewhere where we can find them later but not into the static files okay so I have all six images in my desktop right now I'll close this out and what we want to do first is add this image field into our product model so let's go to that product model and I'm gonna open this up on the right side here let's go to models py and it will set this to uncomment that really quick and this is gonna be models dot image field so capital i capital f and we're gonna set a knoll to true this is to ensure that we don't get any errors because now we are adding this field to objects in the database so this could throw something off so let's just set blink to true and one thing we're gonna notice here is the second we add image field we should see an error in our command prompt so it's telling us that we need to install this library called pillow and essentially pillow is just an image processing library that allows us to add this field to our models so let's go ahead and just add that I did link it up if you have this description right here or if you have these steps you could open up this link and read a little bit about it here's the URL if you don't have the link but if you want to learn more about it just go ahead and check that out but let's run pip install pillow and we also need to run a migration once we have that to add the field so let's take care of that so we'll just do pip install pillow so now that we have pillow installed we can run Python managed py make migrations and then we'll migrate it okay so we have the image field let's turn on the server right now and we'll just do a run server and let's take a look at that so one thing we need to do is configure the media route to change where this image gets uploaded so right now we have this image field when we upload it we don't have we don't have a file to place this image so what's going to happen here is the image is just going to get thrown into our root directory so we need to configure it to upload into images or into static and then images so to do that what we need to do is go into our main project here into settings dot py and take care of media room so media root is just gonna set the path to where we're gonna upload this and if we go to step two this is where we're taking care of that we need to set this up so just underneath the static files dirt we need to add in media underscore root and then we'll set that path so let's take care of that so down here what I'm gonna do is actually just grab the code here and this should be pretty easy just to type out if you don't have that so media underscore Roo OS path join base directory and then we're going into the static folder so we're looking for this and then we're looking for images so it means that now when we upload an image it's going to be uploaded into that folder so from here what we should be able to do is upload all the images correlated with the product so let's try a t-shirt first and to make sure this works and this is why I didn't want you to put this into the static files I wanted to show you how this gets uploaded so we'll set images or we'll set the image and let's watch how the images folder gets updated so we'll hit save and there we go we have our t-shirt right there so I'll zoom in I guess it doesn't let me zoom in on that side but the image got uploaded for our t-shirt so if you have the rest of the products go ahead and finish up the other five I'm gonna take care of that and then I'm gonna get back to this after I upload all these okay so I added the image to each product model here so we'll see all of those in our static images file and the next thing we need to do is set the media URL to actually render these images out so for example if I paste this and we have our root domain and we have images and book JPEGs so that's something that we have in our file and we need to configure that URL path so we have consistency here and we're able to access each image that way that's in our static files so let's go ahead and set that and just under media root we're gonna go to media URL and the first thing we want to do is set media URL to our images folders so let's go ahead and take care of that so just like static URL we're gonna set media underscore URL and we're just gonna do a string value and we'll set that to images so we have that set to images but we need to take care of a few more things so we need to go to our URLs dot py file within our root directory and we need to make sure we can set that path here so if we go back to our notes we can go to URLs configuration we need to run some imports so we need to import settings static and then we need to set this path to that media URL so let's go ahead and close this image out and run those imports so what I'm gonna do is actually grab static and settings from this code snippet and we're gonna paste that in just underneath path and include here so from Django comm URL static importer static that's gonna import a function that we need then import settings so that means that we can have access to this media URL so after that what we want to do is go ahead and append to our URL patterns so we want to use that static function that we just imported and use that media URL and set it to the media route so that folder so let's go ahead and finish that up now and for this what I'm gonna do is actually just copy that code also so let's go ahead and expand that and we want to take this so I'm gonna throw that just underneath URL patterns and again its URL patterns we're gonna do plus equals so we're appending to this list right here and we're grabbing this media URL and we're setting that to media route which points to static files so if I save this and I should be able to refresh this link right here and see our book okay so there we go so that configures the media URLs we're now able to dynamically access those so let's go to the next step and I believe we are trying to render the images so to render these images all we need to do is go to our template here so let's close all of these we'll go back to our app not static but store will open up store dot HTML and within here to render this image we just want to get that product and then image so we're gonna do product dot image so we're getting the image field but instead of pulling up the file we're gonna do dot URL so if we save this we should see our images rendered out instead of this placeholder now so there we go we have our products rendered out for each model that's how we're able to do that dynamically I want to fix something here because if we don't add an image to one of these products we can get an error for the entire page so let me show you what I mean by this I'm gonna grab this book we'll just clear the book we'll save it and make sure that we don't have the book image in there anymore so we have no more image if I go to the page and refresh it we're gonna get this error because our image field what's happening here is we're look for the URL pattern and because we don't have an image in that product we're getting an error because it can't find that URL so what I'm gonna do to fix this is create a function model method for our image field and we're gonna create this image URL attribute and for this URL attribute we're first gonna query that URL if it doesn't exist we're just gonna return an empty string so that way we at least get a nope no image in that field but we don't get an error so we can at least render that image field so what that means is we're gonna change this from image URL to this model method that we create so let's close this out and back to our models py file let's go ahead and set that up so models dot py we want to add that to the product right here and let's start by doing at property so this is going to give us it's a property decorator it's gonna let us access this as an attribute rather than a method so I'll recommend you just look this up if you don't know what this is but it just keeps things simpler so what is called this image URL and we'll capitalize the URL here and we're gonna say we're gonna do a try-catch so we're first gonna say URL is equal to self dot image URL so if that doesn't work what we want to do is within our except block here we want to go ahead and render that empty string so we have accept and then we're gonna set URL to an empty string and we'll just return this value so we'll save that and now what we can do is go ahead and change this from product image URL to product dot image URL so it's gonna take this field right here and return it that way so if we go to our page here we should see the page still render but with that empty image because we don't have one for that field okay so there we go so everything rendered out correctly that image isn't there because we removed it but at least the rest of the page Agis rendering so let's go ahead and just add that in one more time make sure that we have that book and get back to where we were now if i refresh this there we go so that just helps us avoid that error cleans things up a little bit and that's it for part three so that takes care of our image field the next thing we're gonna do is work on our user cards so I'm gonna go ahead and create some orders here so we're gonna create an order for a fake user and we're gonna render out items in our car page so we have our products and we want to make this data dynamic before we actually start working with the user functionality and how a user can have this item so let's quickly add some data here in our admin panel so what we're gonna do is create a customer here and I want to attach the customer to the current user that's set to me right now so we're just gonna say the name is gonna be Dennis for the customer we're gonna use the same email so whatever you set your user go ahead and use that same email and we're gonna create a customer so that's our one-to-one relationship and with in store let's create an order so we want to create an order this is gonna open up a cart for us we're gonna set that customer to the customer we just created leave complete to no because we want that as an open cart and I'm just gonna set some random numbers to the transaction ID so we have a customer we have an order and we want to add some items to that cart so we're just doing this manually for now so we can render this we'll take care of this in the next module so we'll just set the first item to the mountain of all of us all this book will set the order and we want to add one more item here so let's just throw in a t-shirt and we'll set that order and we'll set the quantity to one so we have an order we have a customer and what we want to do now is render out this data here for the customer so we added in the customer information that was step one adding that data to the admin panel and what we want to do now is go ahead and go to our cart and get some data so and here what we want to do is close everything out and we'll go to our views py files so everything is going to be rendered in our cart template here so what we want to do is prep the data render it out and then change this dummy data right here to output real data from our view so we'll go to our cart and what we're gonna do is first check if our user is authenticated so what we're going to do is we're gonna set two conditions one for an authenticated user and one for a user that is not logged in so let's check the authenticated user so to get this we can say if request dot user dot is underscore authenticated so if the user is authenticated let's go ahead and set the customer value customer is going to be equal to request dot user dot customer so we can access the one-to-one relationship that way remember we connect to the user and the customer in models WI so we have the customer and now we want to get the customers order so we're gonna set order and then we're gonna do created and the reason why we're gonna query it this way is because we want to either create an order or get an order if it exists so we're gonna set order created and we're gonna say order dot objects dot get underscore underscore create and I linked up the documentation to this and essentially what we're doing here is creating an object or querying one so if I look at the documentation you can use this link or just do a search for get or create Django it'll take you to this documentation and that function is doing something like this so it first tries to query an object with certain values if that object doesn't exist it creates it and we're essentially just putting that into a single function so the order we want to look for is going to be it's going to have the attributes of this customer and the customer is going to be our customer here that we queried and we also want to get the order that has a completed status of false so the open order so an open cart so we're either going to create it or find it and once we do that what we're going to do is get the items attached to that order so we're gonna say items are gonna be equal to order dot order item underscore set dot all so a lot of beginners get confused with this and just to recap this we are able to query child objects by setting the parent value and then the child object with all lowercase values and then underscore set dolls so it's gonna get all the order items that have this order as the parent so once we set that we need to create one more conditional for the user that's not logged in so if the user is not authenticated we can't just return nothing because we're gonna start looping through this items list right here in our template so we at least need to return an empty value for now so let's set items to this empty list so if we don't have it at least we have an empty list and we don't start the loop so we'll take care of this in module number four but for now we're just gonna leave that to an empty list right here and then we can pass that into the context dictionary so now that we have that order we've passed it in let's go ahead and close this out and go to the next step which is rendering the items out in the cart so the values we want to replace are gonna be that image field the product name price and quantity so let's take a look at this picture we want to create a loop just like we did with our products and this is in cart dot HTML and we just want to change some of these values so let's go ahead and open those up let's make sure we're in that cart page and create that loop right here we have our header row and for this cart row we want to create a row for each item so we'll start by doing for item in items so we're taking this value here so everything that we query here so for item and items and we want to end that loop just right here so cart row is off right here so just after that we want to do and for let's make sure that the loop is working before we pass in the values we should see two items here now so we have two items and we want to change these values here so for the item image we want to change this source from that placeholder image and for this we want to say item dot product so we have to query up to the product because the item doesn't have the image the product does so we want to query up that relationship and then say image URL that URL is capitalized and then we want to get the product name so we want to say item dot product again we're getting the value from the products so we need to go to the product and not just the item and then we need to get the price the same way so item dot product dot name so let's fix this part up right here and for the value here so that's the price not the name so let's change that to price so for this what we want to do is also create that float field so float format and this is just to make sure that we're not getting more than two decimal points to the right so we'll say float format two and we want to set the quantity so the quantity is actually in the item object so for this we can just do item dot quantity and we'll save that and we should see our cart be updated here so there we go we have our book our t-shirt we have the price here and I don't see the quantity let's make sure we're getting that right so I'll open up our models here make sure we're using the correct values so it looks like we spell quantity wrong here so I'm actually gonna have to fix this and then re migrate it just to make sure everything's okay so I hope you didn't make that mistake but should be an easy fix so Python managed that py make migrations spelling things wrong let's in right here okay so yes we changed it and we just want to run that migration one more time so Python managed that py migrate okay so that should be fixed when we run our server we'll make sure that our item is being rendered out properly once we have the quantity we can move on to the next step okay so now if we open up our page there we go we have our quantity and now we can move on to actually rendering out the totals so right now if you look at our template right here we're still having static totals we want to fix these and get the real totals for the cart and for the items so let's go back into our steps and go to step for calculating totals so this is what we're gonna update and in order to do this what we're gonna do is create a method for our order item and we're gonna create a method called get total and get total is just gonna get the price of our product multiplied by the quantity and that will be the total value of our order item for the order we are gonna set to methods here so we're gonna set one for get cart total which is gonna be the total of our cart value and the items in our cart so we're gonna run a few calculations here run a loop and get those totals so let's start with our order item here let's create some space and we are gonna use that property decorator so we're gonna set that and call this get underscore total so the value of total is going to be the price by divided by or multiplied by the quantity so total is going to be equal to self dot product so we need to go to the product to get the price about price multiplied by self dot quantity so we have that and we want to set total to the return value and now that we have this as a property right here we can access this in our template so we'll go to our template and here's our for loop and we're gonna set this to the item total we're gonna leave that dollar symbol there and we're gonna say item dot get underscore total so once we have this we should see our total render out dynamically so let's refresh this and we now see our dynamic total so we have $14.99 that multiplied by two is twenty nine ninety eight and then we have 25 99 one product so everything's calculating correctly what we need to do now is fix up the order total so for those we need to add in two methods here to our order object here so for these what we need to set is get cart total and get car items so for the total we want to get the total value of the cart and we're just gonna say app property so we're gonna set that get underscore cart underscore total so we're gonna get that total and we want to return the total variable that we're gonna set so total is going to be set right there or we turn right there and first we need to get the order items so let's go ahead and set that so order items is going to equal to self dot order item underscore set dot all so now that we have our order items what we're gonna do is set the value of total to the return value of a loop that we're gonna create that's going to calculate all of these order items get total values so let's just go over this really slowly we're gonna use this sum method here and we are gonna loop through the order items so let's just set item dot get underscore total and I'll explain this once we write this out so we're gonna say for item in order items so we queried all the child order items and then we ran a loop right here and we're just saying calculate the total of the item get total value so that's why we had to set this value for order item before we create the current total because it's dependent on that method or attribute whatever we want to call that so once we have that value this is actually going to calculate it and then so it's going to calculate all the totals here now we can do the same by just copying and pasting that and instead of get card total we're gonna say get card items and we're doing the same thing we're getting all that all the items in that list and the total is going to be set to quantity so this is how we find out how many items are in our cars so if we have one item that maybe has a quantity of 3 we're able to calculate that and not just go by the amount of items that are in there by type or but by the actual quantity of those items so let's first set the value let's first query this this value in our view and then render it out in our template so what we're gonna do is grab this order and we're gonna throw that into our template so we're gonna pass that in and we need to do one more thing here for our conditional here whenever a user is not authenticated but I want to show you that error before we actually fix that issue so in our cart now that we've passed in our order we could just access our order in here by saying order dot get car items so we're gonna use this method and we're gonna return the total so we're gonna get that and then we're gonna use the same method here just after that dollar symbol and we're gonna pass in the current total so once we save that I hope that wasn't too confusing we set some methods and we need to return the values so in our template what we're gonna do is when we refresh it we will now see the total count so this is actually the correct count based on the quantity of 2 and 1 and we calculated the full total our issue comes in whenever a user is not logged in so if we log out right now I'll just show you the error and then we'll fix it if we refresh this we are gonna get this issue or this error that says that we don't have order in our template so what's happening here is in our view in this conditional we have our order but we never got the values within our else statement so what we need to do now is manually create an order object that looks exactly like the one we just queried or created our template doesn't need to know the difference so what we're gonna do is use a dictionary for this and we're gonna throw in this value so we're gonna create an empty dictionary and we're gonna set get cart total and we're gonna set that value to zero and later on we'll actually build out a replica of our cart total but this is how we're gonna manually create that shopping cart for a user that's not logged in so we'll actually start running calculations for this in module three or four but for now we just need to set the values and our template needs to see something all the template cares about is that we have an order and it has these attributes so now as a unauthenticated user if we refresh this we should get the values of zero and there's no items so remember we're passing in this empty list so this is where things get a little bit tricky for that authenticated user and non logged in user but essentially we just need to create a replica of that order and the order items and pass those in to the template so let's set the float format to our cart total just to make sure that we don't have any funny-looking numbers there so we'll copy that right there from our price and we'll add it to the cart total and let's go ahead and log back in as our user so that's my customer user and when we refresh this cart total looks good all our items are back in there so what we want to do now is go ahead and render that same data in this order summary so if we go to our instructions here in our checkout page we want to get that same exact data that we had in our cart view and repeat it for our checkout view so we want to get that data and then once we have that we want to go to our order summary and make those items in that summary dynamic so let's take care of that so to do that we'll go back to our views and we want to copy everything from this if statement all the way to the context so we want to get that paste it into our checkout page so now the user data for the offense can user and our guest user is now available for our checkout page and we're passing it in so we have our items and we have our order so let's go ahead and go to checkout HTML and go ahead and actually render this data out to so we have our order totals so we want to change that to bring out our cart so we'll say order dot get underscore Cart underscore items and we want to get that total so we'll take this and actually want to fix that h5 tag so we broke that so let's get this and change this to the cart total so ordered get cart total and let's set that float format so float format and set that to two and let's test our checkout page so make sure that these values are what's actually in our cart so those values are now dynamic and we need to set our cart rows so each cart row needs to be created for each item in our views there so everything that we rendered out so this is going to be similar to our cart page so we're gonna say for item in items and we want to end this loop just after this dip so let's craze in space and we're gonna say and the four right here and now we want to set the value so product we need to get the product name so we're going to say item dot product dot name then we want to get the total here so we're gonna say another total but the price so we're gonna say item dot product that price and for the quantity we're just going to take the item quantity so let's change this to item quantity so we have our quantity we have our product name and we also want to pass in that image so right here where that static image is we're gonna do the same thing that we did in our cart page so we're gonna say item dot product dot image URL so we're just taking that URL the one that we set dynamically and now we should have our full page okay so it looks like we have a little issue right here so let's fix that and it looks like we broke that paragraph tag so once we have this I believe that's it so we should have our totals rendered out so we're repeating our cart everything that's in here everything's dynamic so that's it for part 4 which is also the end of our module so in the next module what we're going to be working on is the site functionality for authenticated users so users will be able to add to cart' they'll be able to update cart by changing the quantity and removing items and then actually checking out as an authenticated user so that's module 3 so see you guys in the next video

Channel: Dennis Ivy

Views: 126,132

Rating: 4.9475808 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: obZMr9URmVI

Length: 54min 4sec (3244 seconds)

Published: Thu Apr 30 2020