Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #20 Finishing Touches

  • 00:00:00 welcome back everyone time for word
  • 00:00:03 finishing touches of this serious and
  • 00:00:06 yes you could add many more features I'm
  • 00:00:10 aware of that but it's called shopping
  • 00:00:12 cart after all I think we really got
  • 00:00:14 there you saw how to create a shopping
  • 00:00:16 cart who to store it in a session how to
  • 00:00:18 manage it how to store orders how to
  • 00:00:21 make charges and that really is a lot
  • 00:00:24 I prefer making new series instead of
  • 00:00:27 stretching this series out endlessly but
  • 00:00:29 I'll come back to this at the end of the
  • 00:00:31 video of at first well let's finish this
  • 00:00:33 so where are we at right now well
  • 00:00:36 together a shopping cart here and we can
  • 00:00:39 add our items to the shopping cart now
  • 00:00:42 we can go to the shopping cart we can
  • 00:00:43 check out there's one thing we can't do
  • 00:00:46 these actions here won't work
  • 00:00:49 reduce by one remove all that doesn't
  • 00:00:52 really work the way it should right so
  • 00:00:54 or currently doesn't work at all so we
  • 00:00:57 should wire that up so that we're able
  • 00:00:59 to manage the shopping cart and remove
  • 00:01:02 items or reduce the quantity of an item
  • 00:01:04 by one so that is what I'll do in this
  • 00:01:07 series or in this video back in my code
  • 00:01:11 I'll start my cart model for that
  • 00:01:13 currently I get my function here to add
  • 00:01:18 new items but I don't have any methods
  • 00:01:21 to reduce the quantity of an item or
  • 00:01:24 remove it totally I'll start with the
  • 00:01:27 reduced by one functionality so add a
  • 00:01:29 new method to this model here I'll name
  • 00:01:34 it reduce by one the supporter should be
  • 00:01:38 a function and this function will get
  • 00:01:40 the idea of the item of which I want to
  • 00:01:42 reduce the quantity and what do I want
  • 00:01:45 to do in here well basically this
  • 00:01:48 function should be kind of the opposite
  • 00:01:50 of the add method here it should reduce
  • 00:01:53 the quantity of this items of this item
  • 00:01:56 group of the aggregated amount of items
  • 00:01:59 here it should reduce the price by the
  • 00:02:02 price of one single item so it should
  • 00:02:04 adjust the price at the end and it
  • 00:02:07 should also remove or reduce the total
  • 00:02:10 quantity
  • 00:02:11 the card items as well as the total
  • 00:02:13 price so that is what I want to do
  • 00:02:16 really just the opposite of the add
  • 00:02:17 method well as it is the opposite it
  • 00:02:20 shouldn't be too difficult I can access
  • 00:02:23 my items and that access the item I want
  • 00:02:29 to change by ID add I can remove or
  • 00:02:32 subtract decrement the quantity by 1 so
  • 00:02:36 now I removed one well amount off that
  • 00:02:38 item I also want to adjust the price so
  • 00:02:42 ID and then prices the next field I want
  • 00:02:45 to take care about and here it can
  • 00:02:48 either simply recalculate recalculate it
  • 00:02:52 or I can also reduce it by the price of
  • 00:02:55 one single item and I'll choose the
  • 00:02:58 latter approach so Alves again selected
  • 00:03:01 then select the signal item which we do
  • 00:03:04 store in this item group keep that in
  • 00:03:06 mind we have the information about one
  • 00:03:08 single item and then I want to subtract
  • 00:03:11 the price of one single item so with
  • 00:03:14 that I'm setting D or I'm adjusting the
  • 00:03:18 overall price of this item group let's
  • 00:03:21 say the Gothic video game for example
  • 00:03:25 I'm setting this total price to D well
  • 00:03:28 old price minus the price of one single
  • 00:03:32 item since I'm removing one single item
  • 00:03:34 with that we're halfway there but I also
  • 00:03:37 need to adjust the card totals so the
  • 00:03:42 total quantity of the card should also
  • 00:03:46 be decremented and D total price of the
  • 00:03:50 card should also be adjusted by the
  • 00:03:53 price of one single item here in the end
  • 00:03:56 because well it changes by exact same
  • 00:03:59 amount as the aggregate of this item
  • 00:04:01 group does change so with that we're
  • 00:04:03 almost there and I want to implement
  • 00:04:05 this functionality right now so the
  • 00:04:08 place to implement it of courses in my
  • 00:04:10 index chairs file where I have my routes
  • 00:04:12 here I'll go to my add to cart route and
  • 00:04:16 well the place is totally up to you I'll
  • 00:04:19 enter my new route load
  • 00:04:21 the route should be a get route now
  • 00:04:24 we'll just call it reduce slash and then
  • 00:04:26 the idea of the item which I want to
  • 00:04:28 reduce of course I have my middleware
  • 00:04:32 function here in this action here in
  • 00:04:36 there's function here I want you well
  • 00:04:39 call my reduced by one method I just
  • 00:04:41 created on my card model however for
  • 00:04:44 that I first also want to retrieve my
  • 00:04:47 card as I always did so I'll just get my
  • 00:04:52 card here and then I can call card
  • 00:04:56 reduce by one and pass the ID to it
  • 00:04:59 since this action or dysfunction expects
  • 00:05:02 to get an ID keep that in mind
  • 00:05:04 thereafter I can store my card in the
  • 00:05:09 session again like so and then I want to
  • 00:05:14 redirect the user and I want to redirect
  • 00:05:20 a user to D shopping card route so with
  • 00:05:25 that in place I will restart my server
  • 00:05:29 here and I also need to go to my
  • 00:05:34 shopping cart view and hook up this
  • 00:05:36 route so this should be reduce and then
  • 00:05:40 I need to insert the ID of that and I
  • 00:05:42 want to reduce and I can access this ID
  • 00:05:45 on my item and then on the underscore ID
  • 00:05:49 field since underscore ID is just e ID
  • 00:05:52 field I get back from my MongoDB with
  • 00:05:55 that if I save this and reload my
  • 00:05:58 shopping cart page here if I hover over
  • 00:06:00 reduce the one you already see that
  • 00:06:02 while we're querying this new route and
  • 00:06:06 if I click on it I get the error that
  • 00:06:08 IDs not defined ok that was unexpected
  • 00:06:10 so let's have a look i de clearly is
  • 00:06:15 undefined because I'm calling a product
  • 00:06:17 ID here so little must take certainly
  • 00:06:20 show to watch out for that so restart
  • 00:06:22 the server now
  • 00:06:23 and then go back here try this again now
  • 00:06:27 it worked but you all did see something
  • 00:06:30 I don't like here we get this zero
  • 00:06:36 pricier and a quantity of zero but it
  • 00:06:39 should disappear if everything is zero
  • 00:06:42 right I don't want to have it in the
  • 00:06:44 shopping cart if the overall amount is
  • 00:06:47 zero because what sense does it make to
  • 00:06:50 have this item in a shopping cart if we
  • 00:06:52 don't have anything here and the worst
  • 00:06:54 is I could reduce it even more and now
  • 00:06:56 we would have a negative quantity at hey
  • 00:06:59 now we can shop for free or now we even
  • 00:07:01 get money back so that certainly is not
  • 00:07:04 the behavior I want and I do need to
  • 00:07:06 adjust this here in my reduce action
  • 00:07:09 specifically I'm not changing it here
  • 00:07:12 but in my cart model here in here in D
  • 00:07:16 reduce by one action or function here I
  • 00:07:18 need to check if the quantity is equal
  • 00:07:21 to or smaller than zero in which case I
  • 00:07:24 want to remove this item and not reduce
  • 00:07:26 it any more so therefore I will check if
  • 00:07:28 this items select by ID quantity is
  • 00:07:34 smaller or equal than 0 in which case I
  • 00:07:37 want to get rid of it and I can get rid
  • 00:07:39 of it by simply calling the or using the
  • 00:07:41 delete keyword and then deleting this
  • 00:07:44 items ID that will delete the item if we
  • 00:07:49 have a quantity which is zero or smaller
  • 00:07:52 so if I restart the server with that in
  • 00:07:55 place and I reload my page here and
  • 00:07:58 click reduce again now it's gone and now
  • 00:08:01 that's gone to you and I got no items in
  • 00:08:03 cart which is great which is what I want
  • 00:08:05 though of course this is still wrong
  • 00:08:08 here on the right because well I messed
  • 00:08:11 this up early on so I'm just going to
  • 00:08:13 clear my session for now to start at a
  • 00:08:18 fresh cart again or a fresh app again so
  • 00:08:23 with that I'm able to reduce the amount
  • 00:08:25 by one but of course I also want to be
  • 00:08:27 able to remove and I
  • 00:08:28 entirely right so not just reduce but
  • 00:08:31 one but also have this remove all button
  • 00:08:33 work that's what I need to work on next
  • 00:08:36 so time to add the remove item method to
  • 00:08:41 it so remove item should be a function
  • 00:08:43 which also gets an ID because I need the
  • 00:08:45 ID of the item I want to remove and then
  • 00:08:47 for one I want to delete the item but
  • 00:08:52 before I do that I also want to adjust
  • 00:08:54 the shopping cart so I can't almost just
  • 00:08:58 copy that but that would not work
  • 00:09:01 correctly the reason why this will not
  • 00:09:03 work correctly as that right now I'm
  • 00:09:06 reducing my quantity by one but I need
  • 00:09:09 to reduce it by whatever quantity I had
  • 00:09:11 on this item before since I want to
  • 00:09:13 remove the item entirely therefore the
  • 00:09:16 right approach here is to select the
  • 00:09:18 item by ID here and then take the
  • 00:09:22 quantity off that item off detail the
  • 00:09:25 quantity so if we have three copies of
  • 00:09:27 the gothic in the shopping cart
  • 00:09:29 and we remove it well then we should
  • 00:09:31 have no copies left the same is true for
  • 00:09:34 the price I'm not interested in the
  • 00:09:36 price of a single item but in the
  • 00:09:38 aggregate price here so with that I'm
  • 00:09:41 adjusting the shopping cart correctly
  • 00:09:43 and then I'm removing the item from the
  • 00:09:46 cart it's all the times you hooked it up
  • 00:09:48 and you're out followed that so I copy
  • 00:09:51 mine reduce route here because it is
  • 00:09:55 very similar I call it removed here
  • 00:09:57 though and I'll still fetch the cart
  • 00:09:59 that's all fine but then here I want you
  • 00:10:02 remove an item of course then I'm good
  • 00:10:05 to go so with that I can go to my
  • 00:10:09 shopping cart view I will copy the route
  • 00:10:12 from the reducer out here and just
  • 00:10:14 replace this with remove very simple
  • 00:10:17 restart by server after that reloaded
  • 00:10:20 here looks good and then I'll add a
  • 00:10:22 couple of items to my shopping cart like
  • 00:10:25 so and then let's see I reduced is it's
  • 00:10:29 gone I removed this entirely it's gone
  • 00:10:33 you also saw that totally updated
  • 00:10:35 accordingly and then remove this and
  • 00:10:37 it's also gone and
  • 00:10:39 see no items in card which is what I
  • 00:10:41 want to see here excellent
  • 00:10:43 so that really looks great and with that
  • 00:10:46 we got our shopping card finished now of
  • 00:10:50 course there are improvements you could
  • 00:10:52 put into place and of course you can
  • 00:10:54 enhance the son of courses will not
  • 00:10:56 suffice the needs of a very complex shop
  • 00:10:58 but it does show you how a shopping card
  • 00:11:01 works in its core how you can use note j
  • 00:11:05 s to set up such a shopping cart how to
  • 00:11:08 use an external library like stripe to
  • 00:11:13 make charges and to easily hook up your
  • 00:11:16 shopping cart to the capabilities you
  • 00:11:18 need to actually earn money with it and
  • 00:11:20 well to charge customers you also how to
  • 00:11:23 store orders now to retrieve it how to
  • 00:11:26 manage your card and from that point on
  • 00:11:29 it's really up to you to take this
  • 00:11:31 challenge and expand this card expand
  • 00:11:34 this application add new features make
  • 00:11:37 it more robust find potential errors
  • 00:11:40 this application might have or where you
  • 00:11:42 can improve it that is where you really
  • 00:11:45 learn the most I wish you a lot of fun
  • 00:11:48 with that but of course I'll be back for
  • 00:11:50 future series on no GS and so on and
  • 00:11:54 we'll learn much more but I really have
  • 00:11:57 to have state of this series I'm happy
  • 00:11:59 to see you in all the future videos bye