Django Ecommerce Website | Add to Cart Functionality | Part 3

okay guys so welcome to video number three of this series and this one what we're going to do is work on this Add to Cart functionality right here and also work on updating the cart from our cart page so we're gonna be able to change the quantity remove items and handle all sorts of things like that so we'll finish that up and then we will also work on our checkout page so we're gonna add some logic to this page and output forms depending on who's logged in and the items that are in their cart so they'll be able to check out their order without a payment for now we're gonna handle that in a later module but that's what we're going to take care of in this one and we are working right here with site functionality and these are the parts that we're gonna go through today so this is where we're gonna start adding some JavaScript into our website here so if we go to part one the first thing we need to do is create this cart j/s file and then we want to add some event handlers that listen to whenever this button is clicked and for now just console out some data into our console and then we'll start working from that so we'll open up our app here and we'll go to static and we'll create a new folder called j/s and this is where we'll add in any JavaScript that we're gonna create and within j/s we're gonna create a file called cart j/s so this file right now what we're going to do is first just console out just something into the browser so we can see it so we're just gonna say hello world and what we're gonna have to do is add in this file somewhere into our template so what we'll do is add it in to you our main template and we're gonna add it just underneath our bootstrap JavaScript so we want this on the bottom of the page so the page can first load and then we can execute anything within this kart J's file so let's go ahead and add that we'll go to our page here and close that out so we have our console it's consoling out hello world and we need to go ahead and open up main dot HTML so we'll open this up and just underneath the three bootstrap JavaScript files there let's go ahead and write script and for this source this is going to be similar to how we added images and CSS links so we're gonna say static and in quotes we're gonna say J s Ford / cart J s so that's just gonna look for a static folder for the J's file and then open up car G s so now this is on now that this is in main dot HTML we should see this console out in all of the pages that inherit from it which are all the pages on our website right now so we'll open up inspect element here open up the console make sure that it's all linked up so we're seeing that within our home page our cart and check-out so everything's looking good what we want to do now is add in some event handlers to these buttons so whenever we click these we want to console something out and there's a few things that we want to take care of here so the first thing is is we need a class that can identify a certain button that's clicked and we're gonna use the class of update cart because we want to keep this consistent with our homepage and our checkout page so these images right here will also have the class of update cart and so will all the button so once we add the class what we want to do is add in some custom attributes so I'll zoom in here within HTML we can create a custom attribute by setting setting data - and then our attribute name and we passing the value so we want to get the Product ID and we also want to get the action so we're gonna have two actions for now we're just gonna add it or we're gonna use add and then eventually we're gonna bring in the action of remove for our checkout page so essentially we want to know which button was clicked what the Product ID was and what do we need to do for this product so do we want to add it or remove it so I'm gonna go ahead and start there we'll go to store dot HTML and we're gonna add the class of update - carts so remember we want to add this class so we can later use JavaScript to set event handlers on this button so once we have that we can create custom attributes in HTML by setting data - and then whatever wherever we want our attribute name to be so the first one is going to be product and we're gonna set the value of product to the product ID so we'll just pass in product ID and then we want to set the action so data - action and we want to set this value for now - ad so whenever this button is clicked we want to add an item to our cars so let's go ahead and save that and we can remove this console I'll also save that and let's go to the next step so in the next step what we just did here is we added this class right here of update car and we want to use that to create an event handler for each button so we're first gonna query all of the car items by that class that we just added and then we're gonna create a loop we're gonna loop through all of our buttons and we're gonna add an event listener on click and we're first going to get the Product ID that we just set the action which is this is which this is how we can query those custom attributes and then we're gonna console them out and make sure that we have the correct Product ID and the correct action so let's go ahead and add that so this will all be added in car J s and remember we're in main dot HTML so that's how these two files are connecting because this is just inheriting from that so I'll move this to the right and we're first gonna set the variable of update buttons to that query set of our buttons so far update buttons or BTN s and we want to camelcase that and we're gonna set that to you document get elements by class name and we're gonna use this class right here so let's just grab that and paste that in so we first get all of our buttons and we now want to create a loop so what I'm gonna do is zoom in so we can see this a little bit better and I'll just move our HTML file to the right so here's our buttons and we want to create that for loop so we're gonna say 4 and first set the actual loop we're going to say VAR I and I is going to equal to zero so this is going to be we're going to be looping through this query set so we want to set the index to zero and then we want to say while I is less than update buttons dot length so as we're iterating through it we want to know where we're at in this loop right here and then we want to increment I so we're going to do I plus plus so for those of you new to JavaScript this is how we create the loop so we loop through our buttons length here and on each iteration what we want to do is get the query set and then we want to index that query set with I so on each iteration it's going to increment so we pass in I right here and for each button we're gonna add event listener so we add the event listener and the type of event we want to listen for is click so we're gonna add and click and then on click what do we want to do so we want to set a function and this function is gonna execute on each click so the first thing we want to do is set the product ID and we want to console this out so we're gonna save our product ID so we're gonna set ID or I to capital here and we can get that custom attribute we set here so product ID and action or product and action here we can get that by saying data set or this so this is actually similar to pythons self method so we're just saying the item that's clicked on that's what this is going to represent we're gonna say this dot data set dot product and I think we just called it product I always forget as I'm typing here so this dot product so we're gonna set that and then we're going to get the action so Bar action is going to be equal to this data set action so we get both values and now we just want to console them out and make sure that our event handler was added and we are getting the values as we click on them so move that to the right the first thing we'll cancel out is going to be the product ID and we're gonna go ahead and add that and then we're gonna get the action so we'll throw on the name there and then throw the actual value so now when we go to our template when we refresh this let's open up our console here we should see the action and the product ID on click so let's start by clicking the first product here so we'll click on headphones we get the ID of one and the action of ad if we go to this last one we're gonna get the product ID of six and so on so this just added an event handler to each button and we are getting the values so now we want to do something with these values but before we do that we need to change the behavior of what happens depending on the user that's logged in so the first thing we're gonna do if we go to step 3 we want to first set the user in our main dot HTML and we want to know is this an anonymous user or is this authenticated user so we're gonna set the variable of user to request out user and then depending on what that user value is down in our event handler we're gonna create this if statement so I just want to console out the user to ensure what that value is and then we're gonna say if the user is anonymous user go ahead and console out this user is not authenticated and then if that user is go ahead and console out user is authenticated sending data so once we add in that event handler that's where we'll actually take care of creating of you to send that data to and we'll process that so let's go to our main dot HTML file so I'm actually going to close out store we're gonna move cart J s to the right and I'm gonna put this in main dot HTML because I want the user to be available at the top of every page and as soon as we load the page so we're just gonna create this script tag within our head tag in main dot HTML and we'll set the user and we're gonna save our user that's gonna be equal to request dot user and we're gonna close this up in single quotes so now that we have our user let's go to cart j/s and write that conditional so the first thing is is less console that user so console dot log and we'll say user throw in this variable again it's available because we are inheriting from main dot HTML so let's ensure that that's working and let's give this a test so inspect so on each click if we refresh this let's go ahead and add to cart so we have our product ID in action and we are now working with the user so if we log out it's gonna say not amiss user so let's go ahead and write that logic so we're gonna say if and right in the conditional so if user is equal to anonymous user so I think we have to set the capitalization exactly as Django renders it so capital a anonymous and then capital u so not a miss user will go ahead and console.log and we'll just say not logged in and if the user is logged in so for not an anonymous user will just say else and was just console out user is logged in sending data okay so let's go ahead and give that a test now so we have the user we can refresh this and we'll just hit add to cart user is logged in sending data and let's go to the admin panel and log out so we just want to make sure both sides are working so now if we refresh that user is an anonymous user and we're console an out not logged in on each button click so the next thing is we want to first let's log back in so we have everything ready let's go ahead and create our view and URL path to actually send this data so if I go to my steps here we'll scroll down to step 4 so what we need to do is create a view called update item and we're just going to return to JSON response for now and we also want to set a URL so we're gonna create a path and then we're gonna send data to this view so let's open up our views DUP UI file within our app here and we first want to import JSON response to use for our view so we're gonna say from Django dot HTTP import JSON capital J and then capital R response so we don't want to return a template or anything like that we just want to return some kind of message so that's why we're using JSON response and we want to create our views so we'll call that update item and we're gonna pass in request and this is where we're gonna use that response so we're gonna say return I'll use JSON response and we're gonna say item was added and we also want to return this s we want to return safe as false so we just want to get this message in our template if we ever want to confirm anything so that's why we're returning that response here and now we need to set our URL path so we'll close out cart J s and we'll create a pattern for this so we're just gonna add that again under checkout we're gonna repeat what we're doing in our views so we'll just copy and paste this and we'll pass in update item and for the actual pattern we're gonna say update underscore item and repeat that for the name so let's make sure that this view is working so we'll go to our page here and pass in update item and that is our JSON response so we want to return that to the template whenever we make the API call so let's go to the next step here and after we create that what we want to do is create a function in our in that event handler that we had and instead of returning user is authenticated right in that elf statement we're gonna create a function called update user order to that function we're gonna pass in the product ID let's zoom in just to make sure everyone can see this we're gonna pass in the product ID and the action to the function once we pass that in we'll be able to actually create fetch call so we're gonna make a post request and we're gonna send this data to that new view we just created so we're gonna send to update item we're gonna send product ID and action to the back end to our view that we just created and then our view will be in charge of processing that so let's go ahead and start creating that update order function so we have the URL we have our view so I'm actually gonna move the view to the right and we'll open up cart j/s again so in here what we want to do is set the function to update user order and we'll create user we'll make that capitalized for the U and then order will also be capitalized and we're gonna pass in product ID and action once we have the function what we want to do is pass in this logic and we'll throw that into the function so it gets called from here and then we'll trigger this function inside of this else statement and this is where we can pass in the Product ID and action that we set so we pass it in and then we can call it right here so to send this data we're gonna use the fetch API and before we do that we're gonna set the URL that we want to send the post data to and we're gonna call this update underscore item so this is that URL and view that we just created so we're saying this is where we want to send the data to and I'm gonna try to go over fetch as slow as possible for people that might be new to this so to send our post data we're gonna use to fetch and the first thing we need to pass in to fetch is the URL that we want to send the data to and then we want to define what kind of data we're gonna send to the back end here so the first thing is we want to know the type that we're gonna send so we're gonna send post data and once we're sending post data we need to pass in some headers with that and the headers are just going to be an object here and the first thing we're gonna throw in is content - type and T has to be capitalized along with C and content and this value is going to be application ford slash json so if you're new I recommend you look up the fetch API look up to send post data so you understand this better but we're just gonna throw in the values and I'll do my best to explain so once we set the method type the headers we need to send a body so the body is gonna be the data that we're gonna send to the backend and this data we want to send it as an object here so we're gonna say first we're going to pass in the Product ID and then we're gonna throw in the action so from the Product ID in there pass in action and one thing that we need to do with this data with the fetch API is we can't just send the object to the backend we need to send it as a string so we're gonna grab this data and then we're gonna stringify it so we're gonna do JSON string stringify and we're gonna wrap that entire object so we have that value and then we can send the data so this is all we need to send that data once we send it we also want to return a promise so to return a promise this is going to be the response that we get after we send the data to this view so we're gonna send the data to the view and then once that data is processed and everything went right we want to return this response as a promise to fetch so let's go ahead and create that the first thing we need to do is set dot then and we first need to turn this value into JSON data so we're gonna say response and we're gonna use an arrow function here two curly braces we'll create some space and we're gonna say return response dot JSON and after that we're gonna copy this again will paste it just below here and this time we actually want to console that data out so we'll take out this return value because we have it now and we're gonna say console dot log and we want to console out the data that we got back which is just gonna be this string value right here so we want to be able to see that so we'll throw that in and actually want to console that out too so we have our post request so fetch sets the URL the type we pass in the data we get the response turned out into value and then we want to console that out so one thing that's going to happen right now is whenever we're sending post data to the backend in Django is we need to send in a CSRF token and normally this is done through a form we create that within the form but because we're using JavaScript we don't have it so as we hit add to cart' we're actually gonna get an air that I show you here in in this description so we're gonna get this air telling us that we can't send this data to the backend and I'll show it to you real quick and then we'll actually fix it so let's go ahead and open up our console before we hit add to cart' and set that so open up the console looks like we have an error on line 30 so it looks like the air is right here so this needs to be a key value pair so we need to throw in a colon right here and the comma needs to be after product ID so once we save and refresh that if i refresh it I think that'll make that go away so that fixed it and now when we hit add to cart we get that air that I was telling you about so what we need to do now is go ahead and create that CSRF token and that's gonna be in the next step so step six we're gonna create that token and Django actually has in the documentation a way for us to do this within JavaScript so I'll open up this documentation here you can just look up Django CSRF token Ajax and essentially what we're doing here I'll zoom in here is we're creating a token with this function so we're getting the cookies here and we're setting the value of this variable CSRF token to get cookie and we're finding the token that we're creating so let's actually just grab all of this and we'll paste that into our headers so we're going to throw that into our main HTML file and that's gonna be within this script tag that we created and we're gonna set that after our user variable so we'll paste that in I'll fix the indentation here but once we create this this token is now going to be available down in our fetch call so it's in the same template which means we have access to the CSRF token and we can set the token if we look at the documentation just by adding it into our headers so X - CSRF token we'll pass that in and then we just want to reload the page once we throw that in so we'll take that we'll add a comma right there and we'll say X - CSRF t that's all capitalized and we'll finish off the word token and that actually needs to be a string so we'll throw that in and then as the value we're gonna paste in this token so let's copy that and we'll paste it in right here so now that we're throwing in the token we are gonna send this data to the back end so that error should go away and then we'll handle actually processing that data and adding these items so now that I send it we get back that response so we're calling out data right there so that's that promise that we returned so if you're seeing this we're consoling out data which is what our view is sending back to the template so we're sending back that response from our view right here so we're getting item was added and then we're consoling that out so before we get into the view logic I actually want to rename the cookie here or the function from get cookie to get token and I want to do this because I actually want to use that same name when we're creating the cookie for our guest users so it just seems like it makes more sense to call it that so we're gonna change the function here and here so once we have that that shouldn't change any values just a function name and let's go ahead and get into the actual logic of the backend so we send the data and in the backend what we want to do first is just print out this data so we want to get the data we're gonna use this import of JSON we're gonna parse that data because right now we're sending it in as a string value we're gonna parse it and we're gonna parse request our body which is what we're sending in and then we're gonna get some values so we're gonna get the Product ID the action and I want to print it first and this is what we should see in our console so once that's printing correctly we'll move on to actually creating a streamer or querying that customer and then we're gonna get the product that we're passing in and we are either gonna create or add to the order so let's go ahead and take care of that and we can go to our views so I can close main HTML we'll open up our views on the left side here and let's first run an import and get that JSON function here so we'll import JSON and it's different from JSON response so we're just gonna import that and the first thing we want to do is set the value of data to that response so we're gonna say json dot loads and this is going to be request dot data so we're passing in that data and we want to print it out now so that's the post request we're sending and then we're gonna say product ID and this is going to be set to data and we can access it now because it's now a dictionary once we parse that and we're gonna get that Product ID that we sent in from cart J s so we sent in this data right here and we need to just query that so we're gonna get that Product ID if I can copy that correctly and we're gonna pass that in right here so we're gonna query data and grab that value and then we want to do the same for action so we're gonna say action and then we're gonna get action out of that value and let's go ahead and print out action and product ID so we'll set action here as a string value throwing the actual value and let's print out product ID and before we test that I realized that we accidentally threw that colon in with the string so we need one outside of it but not within the action string so and I'll just move that here let's go ahead and test that let's open up our command prompt and let's add a few items so we'll refresh that make sure it's all working and when I hit add we should see the product ID and the action print out so there we go we have a product ID so the next thing we need to do is finish up this logic and actually add some items so we'll go into this will query the customer and start creating the order so the first thing I'll do is just underneath this action and product ID is we'll get the customer so we're going to set customer to request dot user dot customer so we're going to get the logged in customer and then we want to get the product so product is going to be equal to the product ID so that's why we needed to pass that in and that's gonna be product objects get and the ID value is gonna be the product ID right here so that's why we passed that in we can get the product now and now what we want to do is get or create the order so I'll actually just copy and paste what we created up here we're trying to get the same exact thing so we're trying to get an order attached to that customer that has the value of complete to false so order is now going to be the return value and we want to create an order item so for order item we're also going to use get or create so we're gonna say order item and then create or created and for this the return value is going to be order item objects get underscore or underscore create and we're gonna set the order value to the order that we just queried right here and then we're also gonna set the product so the reason why we're using get or create is because we need to change the value of the order if it already exists so if this order item already exists according to the product and the order we don't want to create a new one we simply want to change the quantity of it so we want to add or subtract so if we go to our notes here if we look at this if the action is add we want to get the order item quantity and we want to add to it if it's removed we'll remove it and then we'll save that once we save it we'll check if the quantity is zero or below zero if it is we want to remove that item and we haven't added in that remove in the front end yet but we'll add it and then we'll just be able to use this throughout the template so let's go ahead or throughout the website so once we have that let's go ahead and write that conditional and we'll say if action is equal to add let's go ahead and increase the value so we'll just say order item dot quantity and then we'll just increase the quantity so we'll say order item quantity and we're gonna add one to that so we'll set the value to plus one and then we're just gonna say Elif and I just want to use Elif just in just in case another action gets sent in we want to be able to read that so we'll say remove and then we want to decrease it so let's grab this same exact value and this time we want to remove from the quantity so we'll take that and then we'll save it so we're going to say order item dot save and let's go ahead and remove that order if the quantity is below zero so if order item dot quantity is less than or equal to zero we just want to delete it so order item delete so that should take care of all the logic we need in this page and remember that we're only gonna send data to this view whenever a user is logged in when a guest user is clicking these buttons the action is going to change so let's give this a test right now we won't see anything but we could check our cart and see how it's all working so we'll add a few items I clicked it we're not seeing this car update here we'll work on that in the next step but when we go to our car we'll see seven items let's go back let's add a watch here we'll add two of them I clicked on it twice and we should see a watch here so what we're gonna do on the next step is take care of adding this cart total so what we're gonna do is update this and we're gonna have this update on each click and this is the part where we'll really see the value of using more JavaScript and maybe in the future a REST API but right now what I'm gonna do is get the cart total in the backend with the views and then pass it into each template so this is where again we're gonna see the effect of using more JavaScript and we're gonna make things a little bit better but for now I actually miss this in the last step we want to make sure that our page reloads and then once that new data gets passed in we'll be able to see it immediately so let's go ahead and fix this and to do that we're just gonna just underneath console do location dot reload so this is the way we can do this in JavaScript we're just gonna reload the page and then we're gonna pass in the data inside of each of you so this is where I actually really struggle then trying to make our code more efficient without building out a REST API or using more JavaScript and I actually created a solution last night I came up with one that I'll probably add in a premium module here this is just gonna be another video that I'll add and it's probably gonna be module 6 or 7 and we're gonna enhance how our information gets passed into this cart but for now what we have to do is create some user data inside of every single view that has this car and we have to pass it in so I'll show you what I mean by this and we'll just get started by first getting all of this user information and again our code is gonna get a little bit redundant but we are gonna fix this so if you're one of those people that's more advanced you're probably gonna see where our code is starting to become a little bit inefficient but we will create a solution later so we'll fix it but for now let's just go ahead and create it this way so what we need to do is create a variable called cart items and we need to pass in this variable within every single template here so we need to pass it into the context dictionary so for now what we're going to is set car items to order get car items and we also need to make sure that this variable is available for a guest user so we're gonna set car items to this order now but because it's a dictionary we're just gonna throw in this car items total so again it's not that efficient right now we'll fix it but at this point now that we have car items we can pass it into the context dictionary and we can use it inside of our templates so we'll first go to our main each tml and we'll pass that in so we'll set main here or we'll go to main and we need to go to that navigation bar so where we have car items because we passed it in right here we can use it inside here so let's replace 0 and we'll just set that to Cart items now if I go to my home page we'll see it and we should see the total appear within that within that header bar okay so we have our car total and now as we add items we'll see it update because we are refreshing the page again also not the most efficient way this is where I would normally create a REST API to take care of this but the items get updated the problem here is when we go to cart we are going to be looking for that car items variable there and we're not gonna see it so what that means is we need to set this value for all of the views so again it started to get a little bit redundant but I'm trying to show you that manual process so we can eventually fix it and you'll understand why we're fixing it the way we are so we'll set that to the logged in user the guest user and we need to pass that in so once we throw that in we can now refresh our car page and we should see the total here okay so now we have the total and when we go to our checkout page we also need to add that into this section so let's say car items for the guests and car items for the logged in user so even before we come up with that solution or add in that solution that I was telling you about we're gonna clean up this code a lot in the next few sections we're just trying to go over the manual process so let's throw that into the context dictionary and now within our checkout page we have our total so our totals are being rendered out in every single page and they also update automatically as we do this and within the next step what we're going to be doing is actually working on that update feature so we have part one in module three taken care of and we now need to add some event handlers to this right here to eventually allow us to decrease the quantity and remove items so let's go ahead and go to part two for updating and removing items in our cart most of the logic was already done in part one so what we want to do now is add the event handlers to these which we've actually technically already done so what we need to do is simply add the class of update cart and set some values so we need to add in the Product ID and set some actions so for this one for the down arrow we want to add the action of remove so this is where we'll actually update it and we need to add that class so once we handle this all of the logic was already done inside of cart j/s so let's open that up and carve j/s the second we add in update cart and some values to those buttons or to those images everything should be taken care of so we'll open up cart HTML remember cart j/s is in main HTML so we have full access to it and we want to set these up and down arrows so for the up arrow let's just move this to the left here let's add the class of Update button or update cart so update - cart and we want to do the same for the down arrow so both of them are going to be the same class the only difference is going to be the attributes that we pass in for the type so data - product and we'll throw in the Product ID [Music] and in this case because we're looping through the item it needs to be item dot product ID so we'll set that and then we'll set the data - action and for the up arrow it's going to be ad which we've already done before and let's just copy and paste this to the down arrow and we'll change this to remove so that's gonna be the only difference and when we click that we're just gonna pass in a different action and in this case we're just going to remove it and then the page is going to get reloaded so we'll see that refresh right away so let's try that we'll go to our cart page and now when we click on this we should see the quantity update looks like the product ID was passed in incorrectly so let's fix that so that should be data dash product not equals and now it should work so let's refresh that again and when we hit down the quantity should change and the car will get updated so again for those beginners that are always asking why we need Java Script or where it can become ineffective this is exactly where right now we're reloading the page which is a completely inefficient way and Java Script can completely fix this for us and we'll do this in module 6 or 7 but this is a perfect example on why this this needs to be fixed right now our page is really small so the reload is quick but once we put this up on a server or have bigger pages this is going to be super inefficient to have to reload the page each time so now that we have our cart functionality done our update cart let's go ahead and check out our shipping address so what we're trying to do here is add some logic to our shipping form here to change if the products that we have in our car don't need shipping so if there is a single item in a car that needs Chipping will prompt the user for the shipping address but if it's a digital product there's no reason we need a shipping address so let's go ahead and take care of that and if we go to our website we go to the checkout page this is what we're trying to hide so eventually we'll add in all the digital or one product and we'll remove all of these physical products so our only digital product is a project source code and we'll just set up that functionality so let's go to the steps here and in step one the first thing we want to do is add a shipping method to our order so our order model we want to add a shipping method that essentially loops through all of the order items and if there's a single product in our order that has digital set to false which means that it's a physical item let's go ahead and set shipping to true and that means yes there is an item in here that needs to be shipped and then we're gonna add some logic into our page that's gonna change that value so if we render out that shipping field here so we'll actually query that and then set it to our user that also is not logged in so we'll set both values and then after that we'll add some logic that's gonna hide those form fields or display them depending on what the value is so let's open up our models dot py file and we're gonna have to update our order model so let's go ahead and add shipping between cart total and that string value and we're gonna use a property decorator again so let's set property and we'll call it shipping and by default we're gonna set the variable of shipping to false and then we need to return it so if we don't do anything shipping is always going to be false so now what we want to do is query all of the order items so we have that here instead of typing that out we'll set that and now let's loop through all of the order items and check if any of those items have the value of digital set to false so we'll loop through each item and then we're gonna say if I dot product dot digital is equal to false then what we want to do is set shipping to true so I'll show you what I mean by that when we go to that model so the value gets set to true and then if any of those products need to be shipped now we change the value so if we go up to our product here so digital by default is set to false so that means every item by default is going to be a physical item and then if it's digital that changes so we're saying that if any of those items have digital set to false they need to be shipped change the value so let's go back to our steps here and we'll go up to we have our shipping method now we can go to order item shipping status we need to render this out in the template so by default in our views I'll move this to the right because we might need to reference this in our views we already pass in the order object which has the shipping method right here that we can access in the template we also need to set this for our guest user because we need to manually set that value and make sure that we can access it if the user is not the users not logged in and then we'll actually update the status in a different way in module 4 so let's set shipping to false by default and then let's make sure that this is also added in each dictionary here for all three views so we'll pass that in here and we're gonna pass that down here so eventually these will all be consolidated so we're only gonna do this once but that sets that value so we passed it in and now if we go to step number three in our checkout dot HTML page we want to add some JavaScript at the bottom of the page we're gonna do this inside of our template and we want to first get the value of shipping so if we're querying the model we can do order dot shipping or if we are querying this dictionary in our template we can still do order dot shipping so that's why we needed to set both values and then we're gonna check if shipping is false go ahead and get the inner HTML of that wrapper and remove it so shipping info if we check out let's go go let's go ahead and just remove or close out our views will save our models and go to checkout HTML so shipping info is right here this was that wrapper that we set so I can shrink that and now it opens and closes right here so we're gonna take shipping info and hide in so let's go ahead and just within our HTML here we're gonna write our JavaScript and the reason why we're doing this in because we only need this javascript in this page and we just want to be able to move around back and forth and view our page as we set things so let's set the variable of shipping and this value is gonna be our ordered shipping so order shipping and now we are querying that method that we just created and shipping is either true or false so we can write a conditional and we can say if and we'll just say shipping is equal to false and false is going to be a string value because we are querying that ordered shipping value instead of using JavaScript's false value which is a capital or a lowercase value like that it's just going to be a string so we're gonna say if shipping is equal to false then we can get that value and or get that ID and remove it so or change the value inside of it so let's say document dot get element by ID and we want to get this shipping info ID so we're gonna take that and then we're gonna set the inner HTML so we're gonna say dot inner HTML and that's all capitalized and we can just set that to an empty string and that's going to remove anything inside of that wrapper so if I go to my page here looks like we mess something up on models dot py so let's fix that really quick and line 52 so it looks like we created a space between property there so we'll save that and again if shipping is false let's remove that form field so let's refresh it and right now if we go to our cart we should see it because we have products that need shipping so right now the book watch and headphones need shipping if we go to our car we'll add in project source code so that's the only item in our cart that doesn't need shipping we remove a will remove the watch take out the book here and once I take everything out we should see that form be removed so let's go to checkout and now it's reading it it doesn't show it if we go back to a cart or go back to the store add a new item that requires shipping open it up and there we go so that's the logic we wanted to add if we go to the next step here so we'll go to step four right here payment option and what we want to do here is hide our or open up our payment option here whenever our form gets submitted so we want to hide the button but we also want to open up the wrapper right now we don't have any credit card fields or anything like that but we do want to open those up but also give the user the ability to still edit these form fields so if I go to my page here go to checkout right now when we submit this nothing happens but we do want this button to be hidden and then open up that form wrapper so let's start with that and we can go back to step four here at the top what we want to do is add an event handler so first we will query the form by the ID and then we're gonna say whenever the form is submitted so add event listener on submit go ahead and prevent the form from submitting and then add the class of hidden to our form button and then remove the class of hidden from our payment info wrapper so let's start with that we'll go to checkout HTML and add that in so first we'll set form and that's going to be equal to document dot get element by ID and we simply added the idea of form if you want to see where that's at that's at the top here we added that in and now we can add the event handler so we'll say form dot add event listener and this time we did click earlier now we want to do submit so on submit let's create the function so on submit this is the function that we're going to trigger and the first thing we want to do is e so on event we're gonna pass that into the function we're gonna say prevent default and D is going to be capitalized and this is just gonna stop the form from performing its normal actions we're gonna prevent anything from happening and we want to handle the rest so we first want to console dot log and we just want to say form submitted and once the form is submitted let's go ahead and remove and add those classes so we're gonna say document dot get element by ID so we can just take that right there and the first one we want to hide is gonna be that form button so remember on our form field right here the button has the idea of form buttons so we want to take that by ID we'll pass that in and now we want to hide it so to hide that what we're gonna do is dot class list and L is going to be capitalized and we're gonna take this class list and we are going to add so dot add and we're gonna add the class of hidden so once we do that we're gonna repeat this for our payment wrapper so we'll copy and paste that and we need the ID to the payment info wrapper so payment info right here and right now it just contains this text with paypal options and we need to set this value and for this it already has the class of hidden so if we look at it it already contains a class of hidden so it's already out of the picture in this case we want to remove instead of add so for one we're gonna add the class of hidden for another we're gonna remove it so let's go ahead and try this and open up our page here refresh it and actually just noticed I spelled default wrong here so prevent default won't work until we fix that so make sure there is an L before the T there so prevent default now let's refresh it and I'm just going to throw in some name here and some filler data and when I hit continue now the button is hidden and the payment option wrapper is open so that's what that just did we removed one class we added another so let's go to the next step here and what we want to do is throw in just a default button for now that will trigger a payment so right now we're gonna let a user check out without actually paying that will be added in another module but we're gonna throw in a button here that has the idea of make payment and the text of make payment so we'll close all these out right now and this is what the buttons gonna look like so once the user adds in this information they can click make payment and it'll actually process the or so let's close out the picture here and add that in so go up to our payment wrapper and underneath PayPal option will create a button and the ID of the button will be make - payment and we'll just say make payment here so once we have that button there it'll appear once the form data is filled out so let's just test that we'll add in some data submit it make payment is here what we want to do next is add in an event handler that will actually send the data so right now what we're gonna do is first create this function called submit form data and then we're gonna trigger it and for now all we're gonna do is just console out data is submitted so right now here's our submit form data function payment button clicked that'll trigger and then in the next part we'll actually go through that checkout process so back in our checkout HTML page at the bottom here let's create that function so first thing we'll do is just underneath this an event handler create the function called submit form data so D and F are capitalized there we're not passing any parameters for now and let's console dot log payment button clicked so we have the function and we want to trigger that just after we add the event handler to our payment button so document dot get element by ID and we're gonna get that new button so that button was called make dash payment and let's add the event handler so on click so add event listener and that's gonna be on click here we're gonna trigger that function that we just created so on click we're gonna put that within a function and we're gonna pass in the event here we do want to access that later and we're gonna say submit form data so there we go so we added the event handler to that make payment button we set that click and we're going to trigger this function so let's test it really quick one more time open up our console so we can see it so if i refresh it we'll add in some data here so we'll throw that in click that and then when we submit it payment button click so I think it's just showing up funny because it was small there but now the function is triggering and we want to in the next step actually add in the logic for the rest of our form and that submit form data function so for part four we want to do something similar in step one that we did in the last step which is hide this name and email field for users that are logged in so if a user is logged in there's no need to get this information we already know it and if they are then we can show it so what we're gonna do is write in some logic that's gonna change that and then we're gonna change up how we see that shipping information or the entire form so if we don't need to ship the item or the user name does not need to be there we can hide the entire form and automatically render out the payment button so let's go ahead and take care of that it looks like I didn't provide a screenshot in here but I wrote out a couple of scenarios here and I am just gonna copy and paste the logic and then I'll go over it just because I don't have that image so I think I can just do this slowly and explain as I go so this logic is gonna be added just underneath this if statement so under the shipping statement we're gonna paste in to more conditionals so let's just go over these I'll fix the indentation here and I'll also zoom in to make sure everyone can see this so what we're doing here is first we're checking if the user is not an anonymous user so if the user is logged in we're gonna take this user info wrapper so it's kind of like shipping info and it's the one we created right here and we're gonna say that if the user is not enough an anonymous user so if they're logged in go ahead and hide that wrapper now if the user shipping information is false so if the user does not need an item shipped and the user is also logged in go ahead and hide the entire form wrapper and hide the or open up the payment wrapper so go ahead and remove the payment wrapper information so the source code will be provided with all of this so if you need to look this over go ahead and do that but the logic is pretty simple we're just trying to create some different scenarios here and now as a logged in user the first thing that we should see is this user form be hidden now we're only seeing the shipping information so we're logged in we only see that and if we remove an item here that needs to be shipped so we only have a digital item go to our checkout page now we're seeing this payment option appear immediately and that entire form is open so I'll quickly show you what an unauthenticated users gonna look like so we'll log out really quick we'll go back to the checkout page we don't have any products so that's not gonna show anything but if we go to the cart go to checkout here now that the user is not authenticated we can see the user form we don't have any products so shipping is by default set to false so that's what that takes care of and we can move on to the next step so in the next step what we want to do is set the total value so we actually want to get this data and send it to the backend along with some user information so we actually want to get that name email total shipping information send it to the backend and then eventually in part five will handle processing the order and that will be the end of this video and module so back to our checkout page let's set just under shipping let's get the total so we're gonna set of our total and this is going to be equal to the order total that we passed in through our view and we're going to set that to a string and the value is going to be order get underscore car underscore total and we're gonna set the float format so float format and we want two decimal places to the right so we'll throw in two right there and that needs to be format so we have the total now and what we want to do is within this submit form day function we want to create two objects and then pass in some data with those so we're gonna set VAR user form data and this is going to equal to an object here and we're gonna say name this by default is gonna be set to null then we want to throw in an email this is also gonna be set to no and we'll update all these values once the form is actually submitted so these will be updated in a second here so both will be set to no and we want to pass in the total with the user so each time this is submitted we always want to throw in that total there and finally we want to do the same for shipping address so well let's copy this right here and paste it below and we just need to change these values to our shipping field so for this we're gonna set this to address and they're supposed to be an exact replica of our form field so in our form field we have we've manually created each field so they all have a name so we're just getting these values right here so we have address then we'll bring on city state and zip code so we'll just copy and paste that and then repeat it let's get rid of total and change this to state and zipcode so let's also change the value of this to shipping info and that's gonna be a capital I so we have shipping info user form data and once the form is submitted we want to update these values so there's probably a way we can do this where we can just set the values directly in here but because I already wrote up my instructions this way and I just want to stick with that we're gonna follow along exactly how I set it up there so right now what I do in my instructions is create this conditional where we check the value of shipping and anonymous user and update the values depending on what they are so we're first going to check if shipping is not false so I'll write that conditional here and we're gonna say shipping and in JavaScript we can do not equals to this way and remember false or that shipping value is a string value so it's either false or true and in a string value so if shipping is not equal to false which is what we set up here then we want to update the shipping info object so I'll paste that in and we're gonna say dot address and we're gonna set the value of address to the values within the form field so we have the form right here so that means we can access it this way so we can say form dot address and remember we have all those form fields in there so we need to get the field and then the value of the field and I want to repeat this three more times here so we'll set that up and we're just gonna change these values so shipping city here and state and zipcode so we'll set the zip code and next we want to do the userform data so we're gonna copy this again right here and take in user form data so for the if statement first we want to check if this is an anonymous user so if this user is registered then we don't need to update this because we already have the information so we're gonna say if user and remember user was set in main dot HTML so that's how we're able to access that object so if the user is equal to anonymous user and that's a capital u right there so capital a capital u then let's go ahead and change these values for a user form data so I'll paste in these two we'll remove the bottom two here and we want to change the name and the email so we'll set user now form data a name we'll set that to form dot name value and set the email so we're able to access these from the same variable because form here is all one big form that we set up with just two different sections for our fields so we're accessing the same form and setting the values so for the last part in our modules here in part five we're gonna finish processing disorder so what we're going to do first is create a view and URL pattern that's going to process this we're gonna send some data to that view and then in step three through six we're actually going to send that data and then actually create process this order set the value to complete and take care of everything like that so let's go ahead and handle that we'll go to step one and in step one we're gonna call that function process order here it's just going to return the JSON response here and say payment was submitted and that's URL pattern so we're gonna move checkout HTML to the right here and I'm gonna close out the model and it will open up the views we're gonna create the view just underneath our update item view so just under here let's create the function and we'll call it process order we'll capitalize the oh there throw in a request and I'm actually just gonna copy and paste this return value so we'll set the JSON response and for this we'll just say payment complete so we're gonna send back the string and now let's set the URL pattern so we'll open up URLs py and repeat this process I want to drag this to the right so we can see it and we're gonna take in or paste it in here and then pass in process order so this will be process underscore order and I'm going to change the value here so let's make sure that the view works first so open up our website and paste in process order or just type it out process underscore order so there we go we have our JSON response we'll go back to our checkout page and let's go ahead and finish up everything in checkout dot HTML so now what we need to do is send some post data looks like I messed something up in our check out HTML page and I think that was when we set up this float format and that was supposed to be a colon so I hope you noticed that and fixed it but I wasn't too far back there so we shouldn't have an issue so now that that's fixed let's go back to our steps and in our steps right here in step two we need to send some post data so we're gonna set the URL and we're gonna send the post request we're gonna send in our CSRF token and we're gonna send in those objects for that use form data and shipping info and then we're gonna refresh the page and send the user to our store so whenever the store is complete we're gonna redirect them so we'll finish that up let's go ahead and take care of it I'm gonna close out our URLs dot py file and we'll add in that fetch request inside of our submit form data function just underneath this if statement so first we'll set the variable for the URL and that's gonna be the URL that we just says so that's gonna be processed so forward slash process underscore order so this is where we want to send this data to and we can create that fetch call so fetch we'll pass in the URL and then we want to set the method and the headers so method will be a post and for the headers we're gonna pass in the content type and the CSRF token so that'll be another object right here and we can do content - type and this will be application for slash JSON so we have the content type and now we need to do the CSRF token so X - CSRF capital T and then finish out token and then we can get the CSRF token again because it's in our headers of our main dot HTML file so CSR F token and we can pass that in and we need to throw in our there and finally we'll throw in the body so for the body let's set the stringify value first so json stringify and into stringify we need to pass in our and user information so let's set the value of form and for form we're gonna pass in the general user information so we'll take in this object here that's going to give us a name email and the total price and then for shipping so we'll set that value we're gonna get the shipping info object so we're going to string apply this data we're gonna send it to the backend and then once that data gets sent we want to in response so we want to return that promise and then return this payment complete string here so we want to make sure that's done and then once that's complete we want to send the user back to our home page so what I'm gonna do here is go to this code block and we're first gonna grab this response right here and we'll paste that in just after our fetch call so if you don't have that step-by-step guide go ahead and just type that out it's dot then we have an arrow function we turn that JSON response there and then we have another promise so we're gonna paste this in just after dot then and then we're gonna take that data we're gonna console it out and we're gonna create an alert that's gonna say the transaction was completed once the once that alert is closed we're gonna send the user back to the home page and let's quickly print out some data here just so we can see it and we want to know that the data was sent to process order so we're just gonna say data and we're gonna print out request body and we want to send that data and be redirected so let's test it so back to our website let's make sure we're logged in and we'll go to checkout here and right now because we're logged in we don't need the user information and we also don't need any shipping data because there's no products that need it so we'll minimize this a little bit here and I'm gonna click make payment we're gonna see that data set so transaction complete the data was sent and once that's done we are redirected back to our home page here is a data that was printed out so that worked exactly like we wanted it to so what we want to do now is in the next step is start start working with that data so we're first going to import date time then we want to create a transaction ID so there's many different ways we can create a transaction ID I'm just gonna use a time stamp we're gonna set that value and we're gonna continue from there so let's first import date time into our view and then we'll set the transaction ID with date time and then we're gonna set the time stamp so I want to go back here will just import date time and down interview this is where we can set it now so I'll remove this print statement and we're gonna say transaction underscore ID and that's gonna be date time dot date time and we're gonna get the current value so dot now and then we're gonna say dot timestamp so this will give us that that long character field there so time stamp and that's also a function so I want to make sure we got that right daytime daytime dot now timestamp so we have the time stamp and now we can move on to setting up our conditional for our authenticated users and guest users so remember now an authenticated user and a guest user can purchase an order so we need to create that statement and we're gonna say if request dot user dot is underscore authenticated and once they're authenticated we want to get the customer and we're gonna get the customer by just getting request dot user dot customer and then before we finish this off let's just set the else condition and for this we're just gonna print out user is not logged in so user is not logged in and back to our request we need to get the order so we're gonna use the get or create method so what I'm gonna do is actually copy this value here and we're gonna take that from our update item view and if we don't have the value we want to make sure we create it we set the customer and we need to get the order that has the value of complete to false so we got the order we want to get our total now and we also need to parse the data too so I forgot to do that let's set the value of data and that's gonna be json dot loads and we're gonna throw in request body so we want to parse that data and then we want to access it so now that we have data or fix that we can get data and then we can get that total so we're gonna get the total by setting the variable total to data and then we're gonna get the form so remember how we passed in our data we string to fight it so now that we parsed it we sent the form and that's gonna be the user data so we need to get the form value and then once we have that we can get the user object within it and the total so we want to get this specific value right here so we're gonna say form and then we're gonna access total so our variable of total is now whatever we passed in here and I want to set that to a float field just in case so sometimes it might send it as a string value just to ensure that it's correct we'll set it to a float field and then we can set our order transaction ID so we're gonna say order dot transaction ID or transaction underscore ID and then that's gonna be the value that we just sent here so we set our order value for the transaction ID and now what we want to do is check if the total passed in from the front end is the same as our car total so somebody brought this up as a comment in one of my videos and I had the solution but I figured out show it to you guys here because our paypal information will be processed on the front end but then sent to the back end so right now we want to make sure that a user does not manipulate the data from the front end because in theory if they know a little bit of Java Script and they can figure out how we built our website they can manipulate that and get a product for a value that they want to send so what we want to do is first check if the total that was passed in is the same as our car total if it's true then we'll just go ahead and set complete to true and we'll save that order so let's take care of that it's a pretty simple statement here and that's going to be done right here so we're gonna say if total is equal to order dot get underscore cart total here we want to say order dot complete and that's going to be set to true now so we'll set it to true and regardless of whether the total is correct or not will still save it so if the value was incorrect we'll still save it complete will remain false but now we can save the order and confirm it and then we can set up any other way we want to check if a user has manipulated that data or just check that cart value and make sure everything's correct so the last thing we want to do for an authenticated user and this is the last step in the module is to set the value of our shipping so we want to create some logic so after our cart total we want to check if shipping is true if it's true let's go ahead and create the shipping address and we'll set all of the values so we sent it in from our post request and we want to set that now so we'll say if order dot shipping if that is equal to true let's go ahead and create the shipping address object so shipping address this is the model now so we can do shipping address objects dot create and we can just create all the attributes so first we're gonna set the value of customer and I'm gonna pull up the models dot py file make sure we can see this we need to set a customer an order address city state zip code and date added will be automatic so in here we'll just set customer to the value of the customer then we want to set order and that is going to be the order that we just created so we're just attaching everything and for our address we can just use that form data that we sent in so for the address we set the form data to this object and then we passed it in so we first need to access shipping and then access the fields in here so we'll take in address city and state so we can do that by grabbing this data that we parsed and earlier we grabbed the form so now we want to grab shipping because that is what we called that attribute so we're gonna take and shipping and we want to take in address so let's go ahead and repeat this a couple more times for our their fields here we'll add in the comma and we'll paste us in for city state and zip code and we'll change these values so we'll set city will change the value there we want to take in state so I'll change that up right there and zip code so that should do it for the shipping address so we want to test this by going to our page and checking out and we want to add an item that has the shipping address so we can actually make sure it gets created so if we go to our website here let's refresh it and I want to go to the admin panel and make sure that we don't have any complete orders or a shipping address so right now we have an order here and by default it got created because we need to set up an order with a status of false for now so the status was set to false and or a completely set to false and then we want to go to shipping addresses so we have none right now and we want to add an order with where we want to add an item to our cart that needs to be shipped we'll go to our checkout page now that we're prompted for it we can go to continue hit make payment we should be able to be redirected to our checkout page let's see what's going on here for some reason it's not redirecting us so in our console it looks like we spell from instead of form so for the total this needs to be form and we should be able to give this one more test and we should be able to place that order now so give it a second here let's add in our shipping address continue and make payment so we get sent back to the home page if you look at our cart we should see this reset to zero eventually but I guess that our order total so it looks like we're not updating this cart total correctly so we're not setting the value to complete and that is probably because the order total is different from the cart total because of what we did in our checkout page so right now the numbers go beyond to two decimal points to the right so what we're going to do is remove this because we're not displaying it anyway so there was no need to format that so I'm gonna get rid of that and we'll save it and now when we compare our get cart total they should be an exact match and we shouldn't have an issue with the decimal places exceeding a certain amount so let's save that and I'll make sure to for anybody following the steps I'll make sure to update the steps so we're not showing that float format and we'll fix things like that so let's go ahead and try that one more time we'll go to our cart we'll check out we'll add an address here go through make payment and now our order is complete if we go to our shipping addresses this is the second time we added it so it looks like it added it on the first round and we also completed our order so if we go to our first order the status was set to complete we set the transaction ID and we automatically create a new order when we go back to that home page the reason why we created a new order is because in our store view right here we need to query in order to be able to show a car so if we don't have one we just create it by default and that's how we check out without the payment integration in the next video what we're going to do is handle the unauthenticated users side of things so we want to be able to create our car in the cookies and then allow a user to checkout so all these areas that we left blank here so for these sections right here we actually want to start building that users order and prepping us for checking out

Channel: Dennis Ivy

Views: 136,416

Rating: 4.9215684 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, django, python website, ecommerce

Id: woORrr3QNh8

Length: 79min 3sec (4743 seconds)

Published: Thu Apr 30 2020