Django Ecommerce Website | Guest User Cart | Part 4

hey guys welcome to video number four of this series and this one what we're gonna be doing is adding in guest user checkout capabilities and the ability for a guest user that doesn't have an account with us to build a car and process their order without ever having to create one so right now if we open up our console make sure that we're logged out so go through your admin panel or however you have it set up and go ahead and click this Add to Cart button and you'll notice that if you follow the code so far you'll notice that we're gonna get this user is not logged in and our car is not gonna have any items in it so that's what we're gonna do in this video is we're gonna take care of all of that and before I get started someone mentioned in my last video that it would be good to switch my flow field in my product model here we wanted to switch this to a decimal field and they mentioned that I totally spaced out but it's definitely the right decision when we're talking about dealing with money here so we're gonna switch flow field to decimal field and if you want which we're not gonna switch it right now we can also switch our email attributes to email field just to have a little bit more customization but for now we're just gonna do this one right here so let's start with this and what I'm gonna do is just go to the models and change vote field to decimal field but before we do that we need to add a few attributes to decimal field so because decimal field allows us to make a little bit more customizations what we want to do is set the max digits right here in decimal places so max digits is going to be the amount of characters that we allow and in our case I don't want to limit it to only 999 dollars or whatever that is so what we want to do is switch that do something like seven you can change this amount but the more digits we allow the higher number we can set a price to so I just want to make sure that we can have a product that can at least go for a couple thousand dollars and then we also want to add in our decimal places so this is the places on the right side of that decimal point so we just want to allow two and once we save that we can quickly run our migration and then I'll check out the page and make sure everything's working okay so let's open up our console and we'll just turn off our server and we can run Python manage py make migrations and then migrate okay so all the migrations have been run so I'm gonna turn on the server and make sure that everything looks good on our website and that none of those fields in our template we're thrown off or anything like that so we'll just double check it and then we'll get into part one step one okay so if i refresh this our prices still look good so everything ran correctly so what we want to do now is go to our step by step guide here and this is what we're gonna be doing so we're in module number four and we're in part one step one so we're gonna be setting the cookies and creating our cart so right now what we're gonna be doing here is setting our cookies within our browser here as a key value pair so we have cart here and we have this object but right now the object can only be a string so what we're gonna do is create our car as a javascript object and then we're gonna stringify it set our cookies and then every time we want to access that data we have to parse it and then turn it back into a JavaScript object so we can actually access the value so we're gonna use cookies instead of session storage so some of you guys might be familiar with that because we want to actually store the car once that user logs out session storage can only store information when a user is in session but cookies will actually store that data with that website for however long we meet so we can actually set the expiration date and this way whenever a user closes the website and then comes back a couple days later they can still see their items in car and then continue their order so that's the entire effect that we're going for so that's where cookies will actually allow us to build in that customization so right now before we get into part 1 in our module 4 right here one thing that I wanted to mention is I made a post recently about why a full stack developer in particular why a Django developer needs to understand JavaScript and we are currently at that point where this is the perfect example of why we might need it I might actually make a post later about this really going into the details but at this point I don't know of any other way to create guest checkout capabilities with javascript and i don't think there is any way to create this but this is just a perfect example of why you need to know it and if you really want to become a proficient full stack developer definitely don't avoid javascript to learn it in its time but it's definitely useful and it's gonna be needed if you want to work on the front end along with everything else in Django so let's get into step one so in step one we're gonna create our cart and before we do that we first want to paste in some code here to parse our cookies so this function is gonna be called get cookie and it's gonna have the sole value of or the sole responsibility of getting a cookie from our cookies in the browser so we're gonna say get cookie and then we're gonna get this cookie that we set within our browser so it's gonna look for this and then once we get that we're gonna set JSON dot parse so it's gonna turn it back into a JavaScript object and then we can actually work with this so once we parse that data we're gonna go to step two where we want to actually set that cookie and actually we're still in step one here so we have that function but if we don't have that cookie in our cart we're gonna check if it's undefined if it is then we're gonna create this object and we are gonna set it with document cookie and then this is where we set the key and then the value and we set it to this domain so that's what we're gonna take care of so let's go ahead and get started with that okay so let's go ahead and create this function right here and I actually got it from a github repository I was looking for some functions that can get a cookie and parse it so I don't know the details of it myself but what I'll do is leave it in the source code and I'll also link up this code right here so if you're following with this guide we could just get the function right here and copy it so let's go ahead and get everything from var cart to get cookie and again this will be linked up in the description and I'll probably just paste in the source code and we're gonna open up our main HTML file so I actually think the function we're working with right now is the same as this function right here that I got from the Django Docs but because I wanted to separate things we're just gonna use its own function and call it get cookie so to fix this indentation here and if we take a look at it the function starts right here ends right here and if we don't have a cookie it's gonna return null if we do it's gonna return that cookie value so we trigger it right here and set the value to Cart so I'll create that separation and let's consult log or a cookie right now so or our car and see what we have so we'll just say cart and we want to console it out and let's go to our page and once I actually show you what's going on here the next step will make more sense so I'll refresh it and we'll just do inspect and open up the console so right now we're trying to console out our cart and the value is null so either no or undefined will work so if we don't have a car what we want to do is at least create one and we want to do this for an authenticated user or an unauthenticated user so regardless we always want to have at least an empty cart for any kind of user so just between where we console it out and where we set our cart what we want to do is first check if it's undefined if the car is undefined we want to create one so we'll just say cart is equal to undefined and if it is we're gonna take this variable of cart right here and we're gonna set it to JavaScript object so remember if you're coming from Python this is a dictionary it's the same thing we can access key value pairs like we would anything else so what we're gonna do is console dot log and we're just gonna say car was created and we want to console out the cart itself actually we're consoling out the car anyways right here regardless so we'll still see it so the cart was created and in order to create the actual cookies so we set the object we actually want to set it to our browsers cookies so to do this we're gonna do document cookie and to set the cookie name we're just gonna set a string and to set the value we just need to do equals and we want to concatenate the value so we're gonna do plus and in theory we could just do car but because this is a cookie right now the value needs to be a single value and it can't be an object so what we want to do is turn this into a string and then later on we'll parse in so we're gonna set json stringify and once we have that value stringify now it's just a key value pair and the last thing we want to do is make sure that this cookie is set to a single domain so right now a cookie will be created for every single page that we're on so what we want to do is assign the cookie to the main domain of the website so to do that we're going to use double quotes here and we're gonna set the domain by just saying domain and that's can be equal to path and for the path we're just gonna set a forward slash so I want to make sure that's correct so we have domain then equals to path forward slash so that should set it regardless of whatever page were on we should always have the same cookie so let's go ahead and try to refresh that and there we go so we canceled out our object and to actually view the cookies we can go to application and we can see right here we have a cookie named cart and the value is this string right here but it's supposed to represent our objects so this is a string value set to our domain and we have the path so as we navigate through the website the cookie will remain the same and now when we go to our console because I refresh the page we're not gonna get this alert that our cookie was created because we already have it so every time we open up a new page we're gonna check this value and this time we already had a value for our cards so we just went ahead and consoled it out so that's how we set our cookie value so let's go ahead and go into the next step here so we created our cards and now what we want to do is actually add and remove items from our car so if we go to our website here and open up cart j/s so that was in our static folder j/s cart j/s we have this logic for whenever our buttons are clicked and I'll just go ahead and test that right now actually so whenever we click this Add to Cart button when a user is not logged in we're just gonna see this statement right here that just says not logged in so what's happening here is whenever a user is authenticated we call this update user order function send some data to the backend and add that item but when a user is not logged in we're just consoling this out and just saying that hey we're not going to do anything the users not logged in so what we want to do is create the function and action right in the logic and set it within our browser so if we go to our page here we first want to create this add cookie item function right here that's also going to take in the product ID and the action and then we want to console it out from that function and then we're gonna add some logic to the function itself so let's first create that and we'll create that just underneath or just above update user order so we'll just say function and I'm gonna call this add cookie item and I always like to camelcase this so add cookie item the C and the I are capitalized and we want to get this product ID in action paste that in as the parameters and I want to make sure that we console this statement out from the function so I want to make sure that the function is working and we're gonna replace this console dot log with the function that we just created so instead of consoling out from the statement here we're gonna trigger this function and I want to create some separation to make sure this is being seen so let's go ahead and test this first and I'm gonna do a refresh and you might have to do a ctrl shift R so hard refresh if this is your static file so let's try that and then we're gonna see not logged in dot dot and that means that we're now triggering it from our function because of that little change that we made so now that we have the function let's go to the next step here and actually create the cart here so we trigger our car and we actually didn't pass the parameter so let's do that really quick and I'm gonna take in Product ID in action and throw those into add cookie items so we passed in those parameters and what we want to do now is actually increase and decrease the value of the car so we're gonna take this action right here let me open that up so we're gonna take this action and we're gonna say if the action is add go ahead and check the car so if the car product ID if it's not in the cart right now if it's equal to undefined go ahead and create it so set the cart value set the Product ID set the quantity to one and if it's already there go ahead and increase it so we're first gonna increase the quantity and then we want to deal with decrease in the quantity or removing the item so it's the same logic and we want to all within our ad cookie item so remember that whatever button is clicked the action is either gonna be add or remove and that's how we're gonna write our logic and this is what the car is gonna look like and I'm gonna remove this in a second but we're trying to create this object right here so we have the object of cart and each key right here will be the ID of the product so as we create it we're gonna set the ID of the product and then we're gonna give it this inner element right here and we're gonna set the key value pair inside as another object so we're gonna nest it and we're gonna give it the quantity and then the quantity value so let's say the product with the idea of one is gonna have the quantity of four and so on so let's go ahead and actually create this and what we're gonna do is first write an if statement and then actually set the values so I want to say if and we'll create the full statement and we're going to say if action is equal to add and that's gonna be a string value we first want to check if the car has that Product ID in it so right now our car is an empty dictionary so we're gonna say if and that is inside our original if statement and we're gonna say cart so we're able to access the car because it's in our main HTML file so because it's in that header we're able to access this element and we want to say if cart product ID so we're gonna go into the car and look for this Product ID and we're gonna say if that's equal to undefined let's go ahead and actually create it so let me fix that really quick so if the Product ID is undefined so if that element does not exist in the car and by the way that's triple equals right there we actually don't need to use that that is something that you can use in JavaScript but that was a mistake I'm not gonna go into what it is but that also works so if the car is not or if the item is not in the car let's go ahead and set it and remember this is very similar to Python we're gonna set that car key product ID and we're like we're gonna create a JavaScript object inside of it so we're gonna nest it and we're gonna say quantity and that's gonna equal to one so we added the first element and we set it to 1 now if the item already exists in there that means the quantity is already set to one we just want to get the current value of that item and add to it so we're gonna say quantity or a car ID so we're gonna query the product ID and then we're gonna go for the quantity of that item and we're gonna go ahead and add 1 to that so I hope all this makes sense because now what we need to do is decrease the value or the quantity of an item if that down arrow is clicked in our car page so when a user starts adjusting the quantity we want to create another condition and it's going to be similar to this statement so still within our function but outside of our first if statement we want to create another one and this one is going to be if action is equal to remove what we want to do is decrease the quantity of the product so we know it exists because the down arrow was clicked so that means the product is in our cart we want to get the product by ID and we want to set the quantity 2 minus equals and decrease the value of 1 so we're gonna decrease the value but if that value is less than 1 so if we're at 0 we want to completely remove the item from our car so to do that we're gonna write another conditional and we're gonna say if the if the product quantity is less than or equal to 0 go ahead and delete us so we'll create the if statement and we're gonna query the cart by product ID and we're gonna take this quantity right here and we're gonna say if this is less than or equal to 0 now we should delete the product so I want to console this out so console.log and we'll just say remove item and we can remove the item by simply using the delete method so this is a JavaScript method and we're gonna get the product and go for the product ID here so we're gonna get the cart access the key and just say delete this key from our cart which will also remove the nested elements from it so we decrease it or delete it and we also have the add method so let's go ahead and actually update the cookies so right now we got our cart from our cookies right here we parsed it we turned it into a JavaScript object we nipple a today so we updated it or removed items from it and now what we want to do is set the cookies so the page can reload and the user can actually leave the page without losing any information so we update the object and after our second if statement so still within the function I just copied this right here so document.cookie dot cart so we're just gonna override whatever our cookies have set for the cars so we're gonna take that current method we're gonna take our updated object right here and we're gonna set that again to that same path so I want to quickly console the car out and then show you what it looks like in the console and within the cookies so we'll just console out the car itself and I need to make sure that's a plus equals not just plus I'll save that we're consoling our cart and then we're setting the cookies to that domain and if I go to my browser here let's refresh and we'll just do add to cart and we see an item in our cart right now so let's go ahead and analyze what's going on here so as we add an item we have the item ID and we have the quantity set so we created the first item if we click it again we're gonna have the same item and we updated the quantity so we can keep updating that and if we want to add another item so let's go to this watch right here that watch has the ID of four and the quantity is one so what's happening here is this is the object that we're actually consoling out but the data is actually stored within our cookies so if we go to application and I'm using Google Chrome so I'm not sure how it's gonna look in other browsers but we have our cookies and if we go to our cart there's our object set as a string so we have that string value and on each time we click that we reset that value and then parse that data and then start working with this so right now what I'm gonna do is quickly just reload the page so we can actually see the items being updated and then we'll build out the car on the back end and this isn't the best way to do this this is we're having some kind of REST API built out or just using more Java Script would help but what I want to do is make sure that we can see our total be updated on each page so I want to build a cart and then I want to reload the page which we can do with location don't reload it's just going to reload website and right now when I update the cart here so let's go ahead and try this I'll update it you'll notice the website reloads but nothing here updates so that's why we're reloading it because we're gonna go to the back end right now and we're gonna get this data so let's go to part 2 we're gonna get this data and render out the total width in our cars so we're gonna see this total update and all that data is going to be built out within our views so let me try to explain what's going on here right now at this point we simply update our browser's cookies and then we refresh the page and whenever we refresh the page we get to call our views again and within our views we're gonna update this get underscore cart total value and pass it into our context dictionary and when we do that we get to call that within our navigation bar so let me go ahead and just open that up here and I'm gonna close out main dot HTML move cart just to the right and we'll open up views dot py so all of the logic we're gonna write is going to be within cart view but eventually we'll move it into checkouts and store and for now what we want to do is first query the car and then we're gonna get the values of car and we're gonna update get car total before we got car items from the order object and we just queried the method but at this point we have it set to zero and what we want to do is update this value based on whatever is in our cookies so we can get our cookies with request cookies and then getting the cookie name so our cookie name was cart and we're gonna set this to the variable of cart so once we have that remember our cookies are a string right now so we need to parse this and then we'll print it out so we'll do json dot loads and this will parse it turn it back into a Python dictionary and we want to print that out so once we print it we'll check our console and then make sure everything's working right and then we'll actually start looping through it so we have our car and remember this is in the cart view so we have to open up that page to see it will go to cart and in our console there we go so we have cart we see the ID the quantity and then the ID of the second item with the quantity so before we start updating this cart total I want to show you something that a user will run into on their first load because when we first load our page we don't have this cart value so it's going to cause an error so we need to fix this and I'll show you what I mean by this so if we go to application and if we clear out our cookies so I'm going to go to cart here delete it and now if we refresh our page we're gonna see this air and then we're gonna fix it so right now we're looking for that cookie called cart we can't find it so it causes an error and right now if we don't have a cookie called cart we want to just go ahead and create a dummy value until it gets set so remember this gets set in Maine dot HTML so that's why we don't have it yet so if we just add in some dummy information right now it'll fix that temporary bug and then it'll get set once the page is loaded so right now if we don't have that cookie we're gonna create an object here and it's gonna be empty or a dictionary and it should fix that problem for us okay so now on first load it's not going to be a problem but the car is set because we loaded the website and we want to loop through this cart right now and update car items remember that we can loop through a Python dictionary just like we would a list except for on each iteration we're gonna get the key and in this case the key is gonna be the product ID so we're gonna access it this way get the quantity and increment car items on each iteration so let's write that and we can do that just underneath car items here and we're gonna say for I in cart not car items and we're gonna say car items is gonna be we're gonna add to it so plus equals and then we're gonna index the cards get the ID on that iteration and pass in the quantity so once we have the quantity we update cart items it gets thrown into the context dictionary and we'll see that car icon update on in that navigation bar but only for the cart page so right now we only did it in this view eventually it'll be passed into all of them so let's go ahead and refresh that make sure it's working so in our main page we're not gonna see it but if we go to our cart page there we go we see our total so right now if we add a few more products we won't see it update here but now in cards we can see it so we're updating that the next we want to do is actually start building out the order so let's go to part three in module four and in here what we're gonna do is actually continue this loop right here and we're gonna start adding to our order dictionary that we have set up in our view so if I open up this image right here we're gonna continue this loop and then we're gonna start querying the products setting the totals and updating these values right here so get cart total is gonna be a representation of what a real order should look like we haven't created anything in the database yet but we're gonna start rendering this information out and building it so let's go back to our view here and start that so the first thing I want to do is query the product because this is where we need to get the values like price and all the other values that a product contains and we're gonna do product dot objects get and then we can get the ID by the iteration here so ID is gonna equal to I because we are looping through and getting the keys and all those keys are the product ID so now we can get the total here and the total I'm gonna put into parentheses here and that is going to be product dot price remember we queried the product so now we can actually access it and we're gonna multiply that by the quantity so we're gonna get car I quantity and this is the product ID the quantity so we're gonna get that value set the total and we can update our actual order dictionary here so now that we have the order dictionary the first thing we're gonna update is get cart total and we're going to pass that in here and we're gonna increment it so plus equals and we're gonna throw in the total on each iteration so we're gonna get the total of each item and we're gonna update the total of the entire order so once the total is updated we can do the same for the actual items so we're gonna get the car items here and in this case we're gonna take the quantity of each item in the cart and add that to our total so these totals are now updated and this order object is now passed in through our context dictionary just like it was for a logged in user so what I can do now is go to my cart page and make sure that these totals are updated so if i refresh this now we see our tolls remember these items are not in the database yet and we just made represent of what an actual order might look like based off of these key value pairs so we took in these IDs and these quantities and passed in this data it actually created something that looks like a real order so that's pretty cool the next thing we need to do is build out the items in our car so these items right now before we actually created a query set so we go by the order get the actual items in the database query them but for a guest user we need to take in this empty items list right here and we need to do the same thing we need to create a dictionary representation of an actual order item and then append it to this list and then we can actually throw that into the template and then use those same items so let's go ahead and start that and we're gonna create a variable called item and we're just gonna set that to an empty dictionary for now and if I go back to my guide here what we're trying to do is turn this data right here where we just have an ID and the quantity and we want to output it like this so because we don't have the real items what we're gonna do is build it in this loop just like we did with that order and in this case what we're gonna do is create this dictionary and we need to first nest the product so remember that in our template if we go to cart HTML we need to query up the item and the product information so right here in our loop we do things like product price product name and so on so we need to make sure we can keep that format in our template without having to write something different so we have product and that's nested in here so that's the first attribute of item and the second attribute of item is quantity and get totals so we're gonna nest product with the values here and then the item attributes so the output is going to look something like this right here so this is what its gonna look like when it's in JSON format or a Python dictionary but we're gonna have all these values and for now we're just gonna ignore the ID I don't think we need it there and we're also gonna ignore digital that's something I built in earlier and we'll just see if we need it later but we have our product here and this is what the values are gonna look like and the full output so let's go ahead and start building that and if I go back to step 2 we want to continue with our products so let's start doing or let's start working on the here so I'll create some space here and that's gonna be our first attribute so we have product that's gonna be a string for now and product is gonna be its own object here so after that I'm gonna put in comma there and for product the first value we need is gonna be the ID so we're gonna set the ID and we're gonna get that by doing product dot ID remember that we have it right here so we're just going to query up to that and then we need the name so name that's gonna be product name and the last thing we need to do is add price and the image URL okay so we have the product attribute set so we have a nested object within it and I need to make sure that's a comma and I can probably actually fix that indentation and the next attribute for item after product is going to be quantity and then get total so let's set quantity and the quantity value is gonna be what we set right here so we're gonna index cart right there and just get the quantity and then we can get the total by just doing get underscore total and we already set that right here so we'll just pass that in and the last thing we need to do is append this item to this items list right here so we'll just space that make sure that's within the loop and we're gonna do items dot append and we'll just throw in this dictionary so I'll make sure the indentation is correct here we'll fix a few things and everything is looking good so once I save this and go to our cart we should see these items actually being output here so let's refresh that and there we go so we just built out a cart and the actual items in it without actually having to store this information in our database so if we go back to our cart HTML page or just the cart page we should be able to click these values right here and actually see everything get updated including that cart icon and we should be able to remove items by going below zero and see our items be removed so if everything worked correctly in cart j/s you should have this full functionality and be able to update the car without actually updating the database and in the next step what we want to do is add in some logic here so whenever we go to this page we're able to change the status of shipping and render out our shipping form if needed and hide it if we don't need it so right now everything is done within our cart view but eventually we're gonna repeat all of this code for all of these views here and we're gonna clean it up so it's gonna get a little bit messy and then we'll fix it so let's go to step number three I believe here so step three all we want to do is continue that loop and update the order dictionary shipping value to true if the product is not digital so it's a simple condition here and we can write this within our view just underneath items right here so still in the loop right here what we're gonna do is check the product so we're gonna say if product dot digital if digital is equal to false so if the product is a physical product what we want to do is go ahead and set the shipping status to true so if product is false we're gonna take this order shipping status right here so from this order dictionary and we can throw that let's put a colon right there so we'll throw that in right there and we'll just say shipping is equal to true so yes this product needs to be shipped and remember this is for our checkout page but for now writing in here and the last thing we want to do which I listed in step number four here is we want to make sure that the product that we're querying right here does actually exist in our database so a user can add these products to their cart but remember that is being stored within our cookies so at the moment it's just being stored there but once they actually try to get those products if that product for some reason is removed from our database we're gonna get in the air so we don't want the user seen that air we just want to go ahead and ignore it and not add that item to our cars so let me show you what I mean by that and if I go to my website here again I'm gonna go ahead and log in so remember right now we're a guest user I'm gonna log in right now create a due for a different item we're gonna add it to the cart and then we're gonna remove it and you'll see the air that occurs so if I go to products here we're gonna create a random product and I probably won't even set an image to it but we're just gonna say random and the price is going to be $1 and we'll save that so now if I go ahead and log out if I go to my cart here we're gonna see this random product right here we're gonna add a two cards and we're gonna be able to view it within our car so it doesn't have an image nothing's happening but what happens if that item is removed from the database so I'll log back in and then we're gonna remove it so we'll go to products here and we want to remove random so we're just gonna delete this let's actually go to the product here delete it and confirm that so now when we log out as a guest user what's going to happen here is when we load this page our view here is going to try to query this product and it's gonna cause an error so if i refresh it we're gonna get this error and it's gonna say the product does not exist so we just want to create a temporary fix for that and what we want to do is write a try-catch except or try and accept here and we just want to say that if something if something goes wrong here we just want to ignore it and not break the car so it's kind of like what we did for our cookies in our store view actually no it was in this view kind of like what we did right here we just want to make sure that the air doesn't occur and we can close off except right here so for now we'll just do pass and we shouldn't get an error so now if i refresh the page we shouldn't we should see our car but just without the product so we might need to give this a second let's make sure everything's working correct and we'll hit refresh so now when we're going into our car we're only seeing that one product and we're not getting the air so it was happening because when we go to inspect element we have that Product ID in our car so that ID is still within our cookies so we're looking for the product with the ID of 7 we go to our database we try to find it because it's not there and we wrote that try-catch X or try accept block it's not that on the air but the product is still within the users car so there's different things we can do with fixing this but we're not gonna go into that right now and we're just gonna create a simple fix so what we're gonna do now is go to the next step and clean up a lot of our code here so remember we need to repeat all this code within all of our views here so we want to make sure that our car total is available in all the navigation bars all the product data is available so for example everything within our cart also needs to be available within our checkout page so what we're gonna do is create a file called utils py and what we're going to do here is create one function and we're gonna call that cookie cart and this function is gonna be in charge of storing all this logic right here for a guest user so everything after this else statement within cart we're gonna take all this logic put it into that function and then put it into all these other views so if you go back to our picture here cookie car is simply gonna be triggered within all these views and now we're not gonna have to repeat our code so we're gonna follow the concept of dry which stands for don't repeat yourself so in programming anytime we want to create something and we need to use that same logic multiple times we don't want to have to rewrite it so it's all gonna be stored within that function so let's go ahead and start at step one here and within step one we're gonna create that utils dot py file we're gonna create that function called cookie cart which for now is just gonna return back a dictionary and instead of taking the parameter of request and once we do that we want to import that function into our view so we want to go ahead and import cookie cart and then any other functions that we add to it so let's go ahead and go into our project and within our store app we want to create that file and I'm gonna save it as utility Y and the first thing we want to do is import JSON and we want to import our models so I'm gonna copy that from my views and we also want to do from Dot models we need full access to these so we're gonna do firmed up models import and we want to import all of them so we're gonna do star and we can do this because we are still within the same file path right here as models dot py and we want to create that function so cookie and then car is going to be with a capital C and we're gonna throw in the request and we just want to return back a dictionary so return will throw that in for now and to make this car available within our views da py file we can just do from utils import and we're gonna import that new function so cookie cart so we import the function we just created it will save both of those make sure that we don't have any errors so everything looks good so far and we can go to step two which in step two we're just gonna take all the logic from this else statement and we want to paste it into our cookie cart function once we paste it in here we want to return car items order and items here so we want to return those and we're gonna have full access to those values once we throw those in so let's go to our cart view right here so we're gonna take everything from else here so we're gonna grab everything from try and then down to pass and that's all the logic we need so we'll take that and we'll paste that in here and I'm gonna make sure all the indentation is fixed so that should be back spaced and then except should be back here and let's go ahead and take all of this and tab it backwards so I just want to make sure that our first try-catch looks good and then this one also needs to be indented right there from cart and need to create that separation so try/except and then we go through this print statement we have our loop everything is within the loop the try-catch looks good and we have passed so let's pass in the parameters and make sure I have everything so car item order and item so car items I'll throw one right here and then we're gonna get that from so that's the value so we're taking car items passing it in and then our order so order that's just gonna be the order dictionary we created which is right here and then our items list so we're taking this list which we created right here and we're gonna throw that in okay so we created the function we added the logic to it and we can go to the next step so the next step what we want to do is actually use this cookie car view so if I go to this image right here we have our if statement and then our else statement what we're gonna do is set this variable of cookie data to the return value of this cookie cart function so we in request right here because we still want to have access to things like request cookies and any other request values within our utility why file so that's what we pass it in here and this is not a view it looks like it because we're throwing that in and that's what we're familiar with but we're just throwing that in and we can access the values because we set the return value of car items order and items right here so remember we still need to pass these into our context dictionary so what we're gonna do is set the return values and we can get those because of what we set up right here so actually that's our views so we can get those because we set them up here and then we can access them whenever the return value of cookie data is set to cookie cars so we access them this way we pass them in and we want to repeat this step for our store view for our cart view and our checkout views so we're gonna clean up all this logic and then once we refresh our checkout page and all the other pages we should see that cart total in our in this icon right here so in our cart icon we should see that and then in our checkout page we should also see all the data in here because we're gonna use that same logic on every page so let's take this and we also imported it right here so we have access to it so I'm gonna take cookie car and we're gonna start by cleaning up our cart view so everything after else here we're just gonna delete it right now so we can delete all of that or else statement it looks clean now and we're gonna say cookie data and that's gonna be with a capital D and we're gonna throw in cookie cars so now cookie data is gonna be this dictionary value so that's gonna be the value of cookie data and I just realized we spelt car items wrong here so I'll save that and I'm actually gonna move utils py to the right here so we can see both at the same time so cookie data now has this return value and we also need to throw in request here before I forget that so what we can do now is set car items and we're gonna set that to the value of cookie data so we have cookie data and we can index it because it's a dictionary so we can index this value right here and we're gonna throw in this string so we index car items or cookie data and we get car items out of that and then we're gonna repeat this for our order so we're gonna say order to order right there and then finally we can just get our items so we're gonna take these right here and we'll set the variable and index the value so once we have that we save it we have the new values here that we throw into the context dictionary and I can save that and refresh our cart page so let's go ahead and make sure everything's working correctly and it looks good so now we're running off of that function and if we go to checkout let's go ahead and throw the same values into a checkout so we'll take cookie data right here and all the way to items we need the same exact values here so we can just remove everything after the else statement and check-out view and we throw in car items we throw in the order and the items themselves so remember we're also throwing in car items right here into the navigation bar so we'll see this get updated and all that data being output here ok perfect so the functions do exactly what it needs to do the shipping value is being updated the actual items are being rendered and now we're seeing this in our car icon and we need to do we need to do the same for our store view so right now in our store view the only thing we need is gonna be this car icon right here so we can take cookie data and only pass same car items remember because it's a function we can access what we only what we need right now so we can just take car items and we don't need order or items themselves so I actually showed that in my instructions within our store view but we don't need those items so there's no need to repeat ourselves and if I save that we should see that nav bar update and see the total update right here perfect so now we see the total I'll try to zoom in here so we're seeing the count at 7 right now and everything is looking good so we just cleaned everything up and our code is gonna be we're actually gonna do a lot more than this we're gonna take all this logic eventually and put it inside another function within utils rpy so by the time we're done with this our views file is actually going to be pretty clean I just wanted to go through this process so you can see exactly how I go about thinking about this and how I eventually start cleaning things up so we are done with part 4 and we can go to part 5 where we are gonna create our Kart data function so we've cleaned up our code a lot but we want to do a little bit more here and we can always make things better so what I want to do now is get all of this logic right here so we have our cookie car everything that we just created we want to take everything from this if and else statement and throw that into utils py so we're gonna create all this logic with a utility py inside of this function called Kart data and once we create that function what we're gonna have here is if I go to step 3 this is what our output is gonna look like so instead of the logic that we have right now where we've cleaned it up and you see these statements right here so if else in all of our views here we want our views to look more like this right here so we want to be able to have one value here that sets the return value of Kart data and we want to throw that into this variable called data and from there we want to be able to just access car items order and items now car data is going to take care of that if-else statement and to handle all that logic for logged in users and unauthenticated users so it's gonna take care of all that for us we don't have to think about that we can just get the return values after we set that and it'll clean up our code a lot more so let's go ahead and start at step one here and in step one we want to add this function called Kart data in our utils dot py file and then we just want to return back this dictionary so let's start with that and we think util is that py we're just gonna move this to the left here we're gonna create this just underneath cookie cart so we're gonna set the function and we're gonna call it car data and that is gonna be with a capital D and this is also gonna take in the request because we want to be able to access request dot user and any other values like that so we'll set request and we'll set the return value and that'll just be that dictionary and we can go to the next step so we have our function and really quick we'll just import our function in here so we have cookie cart we want to be able to access cart data too so we'll throw that in and we can go to step number two so what we want to do now is get all of this logic from all of our views and throw this into our cart data function once we have that we just want to return these values just like we did with cookie cart and then we're gonna start using this interview so we'll start with our checkout view and in our checkout view we're just gonna take everything from if and the end of else and we're gonna paste that into this cart data function make sure the indentation is correct and we can grab this return value right here and just throw that in there so we're gonna copy and paste it and we have access to cookie carts so we're gonna start calling it within here and we have access to it because we're in the same file here so but the time we're done with this we're no longer gonna use cookie cart within our views but within our cart data function so let's go ahead and move to the next step now that we moved all of the logic we can go to step 3 and actually start using this so what we're gonna do is replace how we have our view set up to use the value of data and call the cart data function so I'm going to close this out and we can use cart data because we imported it right here so just after cookie cart and we're gonna start with our checkout page so let's go to our checkout page and remove everything from if two else and we'll just backspace this and we want to change the name of our cookie data to just data so this is gonna be data and we want to call the cart data function so we call the function we pass in a request and now instead of cookie data we need to access the data variable and the value should be the same because we are returning the same thing that we returned with cookie data so our view now has the logic within our function we access the data and now if I save it and refresh it our checkout page just should still see the same information so if I go to our checkout page everything's working fine but now we are triggering the cart data function and everything's much more clean so let's go ahead and just repeat this for our cart view so I'm gonna paste that in right here so we have data we're accessing car items order and items and we're gonna do the same for our store view so in store we only need to access car items here so we'll just paste that in and we can remove order and items and there we go so look how much cleaner our views are we really simplified things by writing our logic in here and now we're not repeating ourselves so let's make sure everything's working and I'll refresh the page again and then we'll go back to our store page and our cars so try that one more time so it looks good here our car page looks good we see our values and now our store is looking good so we see that in the navigation bar our views are much cleaner so we're done with part five and now we can move on to part 6 so this is the last part in this module what we're gonna do now is finish that checkout process before we go to module number five and actually implement the payment integration so part six consists of four steps here we're first going to clear our cookies whenever that checkout button is clicked on our checkout page we want to clear that set the value to an empty cart and then we're actually gonna process the logic on the backend and let a user actually place an order and add it to the database so let's go to step one here and within our checkout dot HTML page on the bottom of the page where we have our Java Script we have this function right here where we have our submit form data function and within the promise whatever that function processes the data or sends it to the backend right now we just create this alert and that says transaction is complete and then we send the user back to the home page so what we want to do right now is take our cart variable the one that was set in main dot HTML we want to set that to an empty dictionary so if we have any information in there we're gonna clear it and then we're gonna set our cookie so we're gonna reset our cookies to this empty dictionary and we're gonna do this regardless of whether the user is logged in or not it doesn't change anything if the user is logged in so let's go ahead and go to this code block and I'm gonna copy this code so if you have this guide you can just copy this and if you don't you can just go to main dot HTML and take that code or just write it out as I have it so it's in main dot HTML where we set our cookies but for now we're gonna go to this promise right here in before we redirect our user I want to go ahead and clear our cookies so we're gonna set the value of car to an empty object here and we're gonna document.cookie we're gonna set the value of car to this new cart that we created and then we're gonna set it to our route domain so let's go ahead and test that and I'm gonna go back to my cart page here go to checkout and let's fill out this information so remember we are not logged in right now and I'm gonna go ahead and hit continue we're gonna get this payment button and remember when we click payment button or make payment we're gonna trigger this function right here so submit form data is gonna get triggered and then once that data is sent we're gonna clear our cars so let's try that we'll submit that okay and once we're redirected our car is now clear and none of the elements are there so we reset our cookies here and what we want to do now is actually process this data so nothing was actually added to the database at this point so let's go ahead and go to the next step and actually start working with that so we're gonna go to our view here and within our process order review this is where we're gonna complete the logic here for our guest users so right now we check if the user is authenticated if they are we process all their information create the order if they're not we're just printing out the user is not logged in so in this step what we're gonna do is work with this data value here so we're gonna take all the form data sent from that guest user and then we are gonna start setting these values so we're gonna set the name of the user their email and then we are still gonna use the cookie cart function so I guess I forgot about this we're still going to use this Oh make sure it's in your views and we're gonna use this to get the data and create that cart for our guest user once we create it and we have that in a dictionary we're gonna set the items and then actually loop through those and create this user in our database and create the order along with the order items so let's go ahead and get started with that and we can do that by going to our process order review and here is the logic for an authenticated user and we want to start right here so let's first print out the cookies and we'll see this once we actually send some data so let's just say cookies and we can access these by doing request cookies and all caps and then we want to get the name in the email so name is going to be set to data and then we first need to get the forms we're gonna say form and then we need to chain that and then we're gonna say name so now we just need to get the users email and we'll set that value and we can repeat this right here we're gonna go data stop form or data form and in this case we're gonna throw in the email and now that we have this we want to be able to get the card data so we're gonna set cookie data just like we did in the views before we switch to everything to cart data and we are gonna access the cookie data function so let me remove or let me move check out HTML to the left here and we'll open up our utils dot py so we're gonna use cookie cart and remember within cookie cart we create that order and we create that list of items and we return them so they're a dictionary representation of what a database item might actually look like so we're gonna get those values and then we're actually gonna create them and save them into the database so they're real values along with the user and the full order so we have cookie data with our cookie cart we passed in request and we can get those items by just doing by just accessing the cookie data value here so remember we just set that so we can say cookie data and get the items and now we want to create our customer so for the customer we're gonna use that get or create method so we're gonna set the value of customer and then we need to use created here and remember we use this earlier so you should be familiar with this and we just need to do customer objects dot get underscore or underscore create so this is gonna be kind of cool right now if we have a guest user that wants to shop a few times on our website but they never create an account we don't have to create a new user each time that person checks out so if they use the same email what we're gonna do is look for this email and if that email exists we're just gonna attach them to that customer but they don't they still don't have an account with us they're just listed as a customer but at least we're attaching them and we're able to actually still access their old values so we can see how many times a guest user has shopped with us and if this customer ever wants to create an account this way their accountant doesn't get reset they can create an account and we can attach all of their previous orders before they're ever a user with us and still see all the previous orders so that way we were able to actually trace a certain user behavior and not have to create multiple accounts here and for this user once we create them or find them we also want to set their name value so we want to say customer name and we're gonna set this name value to the name variable here so we're gonna take that data from the form and set it so if the email is the same we'll still use that customer but if they decide to change their name that's why we want to set these values outside of that create method so we're gonna say customer does save and that's it for the customer and now we want to create our order so for order we're just gonna use the simple create method we're just gonna say order objects create and we're gonna set the values to this new customer right here and we're gonna set the status of complete to false until the payment processing has actually went through so we're gonna set the variable or the attribute of customer and this is going to be that new customer we found or created and we want to set the status of complete to false so we'll set complete is equal to false here and now what we need to do is loop through all of these items right here remember it's just a list of dictionaries right now and we need to actually add these items to the database and create them and then attach them to this order object that we just created so let's go ahead and start this loop and we're gonna say for item in items and in this loop what we first need to do is query the product because we need to attach if we go to our models dot py file in models dot py we need to attach an order item to a product right here so it has to be connected to a product and to an order so we're first going to create that and we're gonna say product is equal to product objects get and we want to get this by the ID and we can do that by accessing this item dictionary right here on each iteration and from item we need to get the product value and then from that product we actually need to get the Product ID so let me show you what I mean by this if we open up our utility why file when we set this we created this item and the first attribute was product so we got product here and now we're chaining it up so we're just getting that Product ID so that's what we're doing right here so we have the open and closed the open and closed so we're actually going to the item above us and getting that Product ID so once we have that set we need to create the order item so I'm going to create a variable called order item and this is going to be with a lowercase o right here in a capital I and then we're actually going to create the order item object so the model and in this case we're gonna have a capital o and a capital hi so that's actually the model there so don't get confused there and we're just gonna say order item objects create and with this on each iteration we're gonna create an order item and we're gonna attach it to this product so if we go to our model here we see that we have the attribute of product and order so we want to set both of those and we can just say product is equal to product and that was a product we queried and we also want to attach it to this order right here so we're gonna set order and that's going to be equal to that order object so the last thing we want to do is get the quantity and quantity is just gonna be set to item and we're gonna get this quantity at should be here so just go back to our utility Y file and when we created that object we have our quantity right there so we set it and now on each iteration we are creating a new order item so the next thing we want to do is within the same step here we want to after we create everything we want to fix some indentation here so we need to access this total right here all the way down to order save underneath our else statement so before we created this whenever a user was authenticated but now that the unauthenticated user also has a customer value and an order value we need to make sure that regardless of whoever is checking out this value can still be accessed right here and save so let me just try to go through that as slow as possible and then I'll try to explain as I go so if we scroll up right here we need to get everything from total to order save and I'm gonna expand this and what I just did is I copied that so let's copy it again let's remove it and we have our first if so I'm gonna shrink that and then we have our else statement so this is for the guest user so I'm also gonna minimize that and after the guest user we can go ahead and paste everything everything within or after our else statement so if I fix this indentation we have our if statement else statement and then regardless of whoever is checking out we still need to confirm the total make sure everything's working correct and we have an order object for both values so our authenticated user has an order and our guest user also has an order so that's what we're doing here we're just confirming a few values one thing I missed is we also need to get this shipping object right here so if the ordering status is true we want to create the shipping instance and also set those values and we just access data shipping address and all that is also available before the condition here so let's copy this and remove it from this condition and will also minimize LS right there and we're gonna paste this just underneath our order save method so I'll just make sure this indentation is fixed and at this point everything looks good we have both conditions for a logged in user and an unauthenticated user and what we want to do next is actually do a little bit of what we did with our utility Y file where we put all this logic within a function inside here and we are gonna create a check out option for our else statement so we want to take all this logic right here and put this into a function that can just be triggered right here so we don't have to write this conditional in our views and make our views look all messy like this so let's go to our steps here and I'm gonna shrink this picture and that is within step number three so in step three we want to check out or we want to create this guest check out function so we're gonna call this guess order and within guest order we're just gonna return an empty string for now and we're gonna just take in requests and data so we want to take in the data value here so anything set right here we want to make sure that this is available whenever we call our L statement because this value is now going to be within that function so after we create the function here we're just going to copy and paste all of that logic into our guest order view and then we're gonna return back our customer and our order and once we get that value back then we can simply go ahead and just grab that order return it and then we can add in the logic here so let's just go ahead and start writing that in so within our utility why we're gonna create guest order so create that as a function and I always camelcase it so guest order and it's gonna take in data and request and I just want to make sure that I'm putting that in the right order here so if I scroll up here we have requesting data so I just want to flip those around and throw in a request first so it's request data and then at this point we're just gonna return back the empty string so we're just gonna throw in that string and we want to call guest order within our view so we want to make sure that we can import that so we're just gonna do comma after cart data and let's grab all of the logic from our if statement or else statement and paste that into our guest order so everything within else here so let's take everything from print down to this loop and we're just gonna remove it so there should be nothing in there and we want to paste that in right here so let's fix the indentation and I'm gonna move that so we can see it better and I'm just gonna tab in back so we have all the logic the indentation looks good and now we want to return this order because we need to access it right here so let's pass in the order and customer let's also make sure that that formatting is right so we actually need customer before order and keep missing those things up right now so let's just throw in order after customer so I'll remove that and add a comma and now that we have that we can call guest order within that conditional so remember that we have our customer first and our order so within our else statement we can just say customer comma order and we can trigger that function here and we need to set the equals to symbol and we need to pass in data so remember data here now it's available in here and we also need to pass in a request and that was before data so now all of this logic is available within our view here so we can trigger our order trigger our customer and get all those values so at this point the last thing we need to do is just test this and make sure it's all working so let's go ahead and open up our admin panel let's see what we have so we can see a new order get created and then we'll log out and we'll make a purchase as a guest customer and we'll just see if everything is being added correctly so at this point our order we only have two we have an order with the ID of one and three and customers in our database looks like we just have one customer and that's me so let's go ahead and go through this process and checkout so I'm logged out and if i refresh the page we're having a guest cart here so that's an unauthenticated user if we go to our checkout page let's go ahead and create a new customer so I'm just gonna say new user so new user and then the email is gonna be new user at gmail.com and let's just throw in another shipping address we'll go to continue and I'm gonna open up my command prompt so we can see any issues if they come up and we need to make the payment transaction completed and so far it looks like everything's good let's log in and make sure that that order and customer were added so if we go back to the admin panel let's log in as a super admin and the customer should have been created without a user at this point because they never created an account so there we go we created the customer so that means all the logic within here so far within guest order this is working so it looks like we created the customer we attached the email and we need to make sure that the order was created so we have our orders it looks like we have our order with the ID of four we created the transaction ID so so far so good the status is complete and we need to go to our order items so we need to see order items with the ID of four so there we go we have the order item with the order idea four so it's connected to that order and we have the quantity of for so everything went well our guests checkouts working our authenticated user logic is working so right now all we have to do is add in the payment integration and that's gonna be done within the next module and then I'm gonna add some bonus features to this so in module five we're gonna add in payment integration so a user can actually use PayPal to checkout in this process because right now we're checking out without actually making a payment so I'll see you guys in the next video

Channel: Dennis Ivy

Views: 60,835

Rating: 4.9570732 out of 5

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

Id: kH2FOWuA4uI

Length: 67min 5sec (4025 seconds)

Published: Sat May 09 2020