Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #19 Displaying Orders in the User Profile

  • 00:00:00 so in order to show all the orders on
  • 00:00:03 this profile page I'll go back the
  • 00:00:05 application in the users routes file
  • 00:00:09 here at the bottom or not at the bottom
  • 00:00:13 here at the top actually where I get the
  • 00:00:16 profile I want you well retrieve the
  • 00:00:20 order data for that user well in order
  • 00:00:23 to do that I'll needs this order import
  • 00:00:27 that are a lot of orders are that so
  • 00:00:30 like this this order model and then I
  • 00:00:33 could use the model here to directly on
  • 00:00:36 it use the find method which is just a
  • 00:00:39 mongoose way of querying the database
  • 00:00:41 basically doing the same thing I was
  • 00:00:43 doing here in the shell client with DB
  • 00:00:46 dot orders dot find I'm doing it here in
  • 00:00:48 my net J's code now I don't want to find
  • 00:00:52 all orders though I only want to find
  • 00:00:56 orders for D locked in user and you see
  • 00:00:59 them that I'm checking for the user
  • 00:01:01 being locked and here by adding the
  • 00:01:03 middleware so I can be safe where I can
  • 00:01:05 be sure that the user will be logged in
  • 00:01:07 if I reach this code therefore I'm a
  • 00:01:10 passing an object to the find method
  • 00:01:13 where I say the user field remember my
  • 00:01:15 order model has this user field here
  • 00:01:18 which will be a user ID in the end this
  • 00:01:20 user field should well be the same as my
  • 00:01:25 locked in user and that's the cool thing
  • 00:01:28 I can use the logged in user passport
  • 00:01:31 stores on my request to compare it with
  • 00:01:34 the user field in the database and
  • 00:01:37 Mongoose will do all the rest of course
  • 00:01:39 my locked in user here probably has more
  • 00:01:42 than just the ID but was clever enough
  • 00:01:45 to figure out that it needs the ID from
  • 00:01:47 this logged in user and compare it to
  • 00:01:50 the well user which the user field which
  • 00:01:53 just stores an ID in the end so with
  • 00:01:55 that I'm finding only the orders of the
  • 00:01:58 user then I'm setting up my callback
  • 00:02:01 where I ever get an error or all the
  • 00:02:04 relevant orders and I'll quickly check
  • 00:02:09 if I do get an error
  • 00:02:10 here in this case I'll make it simple
  • 00:02:14 and just return a response where I write
  • 00:02:20 error to the screen so really not the
  • 00:02:23 best error handling here but well it
  • 00:02:26 really shouldn't fail and well I want to
  • 00:02:28 focus on the success case here so we
  • 00:02:31 were successful we retrieve the order
  • 00:02:34 what's next well I want to get the card
  • 00:02:38 from that order I will therefore create
  • 00:02:41 a new variable card and then I will loop
  • 00:02:44 through all my orders why do I need to
  • 00:02:47 do that you'll see in a second I'll use
  • 00:02:50 a foreach loop to do something with each
  • 00:02:53 order in this array of orders because of
  • 00:02:56 course I get or at least theoretically I
  • 00:02:58 can get more than one order if the user
  • 00:03:00 well ordered more than or made more than
  • 00:03:03 one purchase so here I'm looping through
  • 00:03:07 all the orders and then I want to
  • 00:03:09 manipulate each order I want to change
  • 00:03:11 something there I want to fetch my cart
  • 00:03:15 and I want to create a new card on each
  • 00:03:19 new or on each order remember I have it
  • 00:03:22 stored in the database but I want to
  • 00:03:26 create a card based on my card object
  • 00:03:28 here and that's the same approach I used
  • 00:03:31 here in the index chess file and the
  • 00:03:32 routes folder all over the place where I
  • 00:03:35 generated a new card every time we were
  • 00:03:37 reaching in you're out I want you to
  • 00:03:40 generate a new card for each order here
  • 00:03:42 too because I will need access to the
  • 00:03:44 generate array method which is set up in
  • 00:03:47 this card object or model here and I
  • 00:03:50 need this generate array method you give
  • 00:03:52 me an array of items which I will then
  • 00:03:55 need in my user profile where I want to
  • 00:03:57 output my order order data which should
  • 00:04:01 not only be the total price of the order
  • 00:04:03 but also the items of the order exactly
  • 00:04:07 that like they were stored in a cart
  • 00:04:08 that is why I need the same behavior as
  • 00:04:10 I need it in the cart related routes
  • 00:04:13 India next or chase file so enough the
  • 00:04:17 talking card will be a new card here for
  • 00:04:19 each iteration and for the
  • 00:04:21 new card I will pass order top card
  • 00:04:25 because again I'm storing this card on
  • 00:04:28 each order in the database then I want
  • 00:04:32 to set order items this is in you field
  • 00:04:35 I'll add to have some convenience to
  • 00:04:37 conveniently access all my items I'll
  • 00:04:40 set this field equal to Cart generate
  • 00:04:44 array like this so this method here will
  • 00:04:49 return me an array of the items in a
  • 00:04:51 cart and then I'm storing them in a new
  • 00:04:53 field items on the order so with that in
  • 00:04:58 place I can then render my response and
  • 00:05:03 I want to render the user slash profile
  • 00:05:08 view here basically this one so I'm just
  • 00:05:14 pulling this into my callback and of
  • 00:05:16 course I need to pass an object to that
  • 00:05:18 view and the object should hold my
  • 00:05:21 orders which I can then use there so
  • 00:05:26 back to the profile view to the profile
  • 00:05:29 HPS file pretty empty right now well
  • 00:05:32 we're going to change this first I'll
  • 00:05:35 add a bootstrap row here then I'll add
  • 00:05:40 some bootstrap columns to give this some
  • 00:05:42 well nicer look or a better look so
  • 00:05:47 let's do this like this maybe of course
  • 00:05:50 you can stall this however you want to
  • 00:05:53 style it then here yes this will still
  • 00:05:56 be my user profile then add a horizontal
  • 00:05:58 line and then let's say add a heading
  • 00:06:00 which says My Orders something like that
  • 00:06:03 now here I want to loop through all my
  • 00:06:06 orders and I want to display them in a
  • 00:06:08 certain way I'll head over to get
  • 00:06:10 bootstrap come to pick the right styling
  • 00:06:15 basically and I want to make each order
  • 00:06:18 a panel and to be precise a panel with a
  • 00:06:22 footer we're here in the footer I want
  • 00:06:24 to have the total price and in the
  • 00:06:27 content field here I want to have the
  • 00:06:29 individual items off that order so I'm
  • 00:06:32 copying this panel
  • 00:06:33 here from the bootstrap page and I'll
  • 00:06:36 and I'll enter it here below denied my
  • 00:06:41 orders heading and as I said here for
  • 00:06:43 the content I want to have the items of
  • 00:06:45 the order so this shall be a list group
  • 00:06:48 and I want to have a list troupe with a
  • 00:06:50 badge because in the badge I want to
  • 00:06:52 display the overall price of the items
  • 00:06:56 here these items will be grouped as they
  • 00:06:59 were in the shopping cart so if I
  • 00:07:01 purchased a certain book twice then here
  • 00:07:04 will be the price for two items off the
  • 00:07:07 book but we will only have one row for
  • 00:07:09 the book so I'm placing that in here and
  • 00:07:13 with that it's time to add do you
  • 00:07:16 required loops I'll first add a loop
  • 00:07:19 around the panel because again each
  • 00:07:21 panel should be one order so I'll enter
  • 00:07:25 the each block here and then quickly
  • 00:07:29 just copy all that code cut it enter it
  • 00:07:41 here like so and thereafter I'll add or
  • 00:07:47 here first I want to loop through all my
  • 00:07:50 orders of course and then I want to loop
  • 00:07:52 here inside man or the list
  • 00:07:54 I want to loop through all my what all
  • 00:07:58 my items of course so this is the
  • 00:08:01 keyword I can use for the currently
  • 00:08:03 active ordered since that is my outer
  • 00:08:05 loop and looping through all the orders
  • 00:08:06 and I'm here in the items field remember
  • 00:08:09 the items field that's this field I
  • 00:08:13 created here in the user chess file so
  • 00:08:17 here I'm looping through all these items
  • 00:08:19 have my new for each loop here also coop
  • 00:08:24 view all of that cut it and paste it in
  • 00:08:28 here like so and then I can go here
  • 00:08:32 while adding the relevant data so here
  • 00:08:34 in the footer as I already said I want
  • 00:08:37 to output the total price so this will
  • 00:08:39 be dollar and then well the price and I
  • 00:08:44 can access the price on my order
  • 00:08:46 so using this
  • 00:08:47 again because I'm in need for each loop
  • 00:08:49 here this cart and then the total price
  • 00:08:53 field on the cart I also want to enter
  • 00:08:57 the total price for each item group and
  • 00:09:00 dispatch here so I'll also do that here
  • 00:09:04 again I can use this now I'm in the
  • 00:09:05 inner for each loop but this is still
  • 00:09:08 available here so this will be this
  • 00:09:10 price and then here I also want to
  • 00:09:14 output the title so this shall be this
  • 00:09:19 item title and thereafter I also want to
  • 00:09:23 output the quantity so the last field I
  • 00:09:26 want to enter here shall be this
  • 00:09:28 quantity and these are all fields
  • 00:09:32 available on my items you asked setup
  • 00:09:34 here in my cart model right so here I'll
  • 00:09:39 just add units after it with that I'll
  • 00:09:44 restart my server again go back to my
  • 00:09:47 application reload my profile page and
  • 00:09:50 get an error because yeah because cart
  • 00:09:57 is not defined well that's certainly
  • 00:09:59 something we should do so in the user
  • 00:10:01 chess file I'll also need to import my
  • 00:10:05 cart model here because I'm using it in
  • 00:10:09 the any profile route here here where I
  • 00:10:13 create a new cart
  • 00:10:14 so yeah good catch restart the server
  • 00:10:19 reload the profile and we see the order
  • 00:10:21 here $60 and then the individual items
  • 00:10:25 as we bought them just some fine-tuning
  • 00:10:28 maybe here the total price we could also
  • 00:10:34 wrap this in strong tags maybe like this
  • 00:10:40 oops
  • 00:10:42 just to make it a little bit nicer and
  • 00:10:46 then put total price in front of it
  • 00:10:50 maybe something like that but that's
  • 00:10:53 just Eiling great so let's make another
  • 00:10:57 purchase let's say we buy each game once
  • 00:11:00 like so go to the checkout page copy
  • 00:11:07 that
  • 00:11:07 dami credit card data enter all the
  • 00:11:10 dummy data here fill out the form submit
  • 00:11:15 it your card num oh yeah dad is not a
  • 00:11:20 card number I do agree with that
  • 00:11:22 so maybe add or correct court card
  • 00:11:26 number here is submitted go to the user
  • 00:11:28 profile and we see these second purchase
  • 00:11:31 who made here great so with that we got
  • 00:11:34 the working shopping cart we're able to
  • 00:11:36 add items to the cart to then checkout
  • 00:11:40 we ensure that only logged in users
  • 00:11:42 can't check out we're actually saving
  • 00:11:44 the orders to the database of course we
  • 00:11:48 do make charges using stripe and finally
  • 00:11:51 we also display all the orders a user
  • 00:11:54 made on his profile page