Thired

Download as pdf or txt
Download as pdf or txt
You are on page 1of 15

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

You might also like