Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #13 Cart Views

  • 00:00:00 in order to see our card on a page
  • 00:00:03 anywhere well I need to work on some
  • 00:00:06 views of course I want to display it in
  • 00:00:10 my header where I have my shopping cart
  • 00:00:13 link this one here I want to have a
  • 00:00:15 badge next to it where I see how many
  • 00:00:17 items are in the shopping cart or if it
  • 00:00:19 is empty and of course only the new view
  • 00:00:22 – well see my overall shopping cart so
  • 00:00:27 I'll do both I'll start with the batch
  • 00:00:30 in my header I'll bring down my console
  • 00:00:35 for that so that we have more space here
  • 00:00:37 and of course all first reformat us a
  • 00:00:42 bit so that we can see this a bit
  • 00:00:44 clearer
  • 00:00:46 so offer the shopping cart text I want
  • 00:00:49 to have my batch and I can use the
  • 00:00:51 bootstrap batch class for this and I can
  • 00:00:55 access my session if you remember this I
  • 00:00:57 was exposing it in the app chess here
  • 00:01:01 I'm setting session to be available in
  • 00:01:04 all my views so I can access my overall
  • 00:01:07 session I can of course therefore access
  • 00:01:10 my cart
  • 00:01:10 and in this cart I have to total
  • 00:01:12 quantity and that's all and now if I
  • 00:01:15 reload my page
  • 00:01:16 you already see we have three items if I
  • 00:01:19 add a new one we get four so that
  • 00:01:21 already works great but of course I also
  • 00:01:23 want to make this link work that we're
  • 00:01:25 taking to the shopping cart and see
  • 00:01:26 something there so back in my editor
  • 00:01:30 I'll add a new view in my shop file here
  • 00:01:33 a folder and I'll name it shopping cart
  • 00:01:36 HBS now in this shopping cart I'll first
  • 00:01:42 grab my bootstrap rows here or my
  • 00:01:47 bootstrap classes all to close them of
  • 00:01:50 course some help from my IDE here and
  • 00:01:53 I'll make this a bit bigger here let's
  • 00:01:57 make this like that and also provide
  • 00:02:00 some offsetting to have it nicely
  • 00:02:02 centered and that's all styling here are
  • 00:02:04 some basic bootstrap styling now in here
  • 00:02:07 I want to have my product so I want to
  • 00:02:11 have
  • 00:02:11 a list group this again is a bootstrap
  • 00:02:14 class and each list item should get the
  • 00:02:19 list group item bootstrap class to give
  • 00:02:21 it some nice styling and then each item
  • 00:02:24 in my list should have a badge so this
  • 00:02:28 will always appear on the right here
  • 00:02:29 even if you specified somewhere else or
  • 00:02:31 even if you specify it no matter where
  • 00:02:34 you specified that's all I'm trying to
  • 00:02:35 say here next I'll not only have my
  • 00:02:39 badge but I also will have an average
  • 00:02:44 span where with the title of why item
  • 00:02:48 and I'll just give this some inline
  • 00:02:50 style or I'll just make it strong let's
  • 00:02:53 make it bold here and it should be the
  • 00:02:56 shopping cart item title this should be
  • 00:02:59 the number like two for example just in
  • 00:03:01 dummy text here then I'll have a span
  • 00:03:04 where the class label and then label
  • 00:03:08 success as well just said this is a nice
  • 00:03:12 little green label these are all
  • 00:03:14 bootstrap items here so here what you
  • 00:03:17 have the price in dollar like 12 for
  • 00:03:20 example and then I'll have a button
  • 00:03:23 group here so that's again bootstrap and
  • 00:03:27 this button group allows me to create a
  • 00:03:30 button which will act as a drop-down now
  • 00:03:32 this button here should get the class
  • 00:03:35 button button primary and button access
  • 00:03:39 as well as the class drop-down chaga and
  • 00:03:42 I'm using a mat which is a plugin which
  • 00:03:45 allows me to quickly create all my
  • 00:03:47 elements like this just by typing them
  • 00:03:50 with the like you saw and that hitting
  • 00:03:53 tab to create a readily configured
  • 00:03:55 element and well this will be my
  • 00:03:59 drop-down button just give it a label of
  • 00:04:03 action make it of type button and this
  • 00:04:10 looks good and I also want to have
  • 00:04:12 another bootstrap thing your I want to
  • 00:04:16 have this little down pointing arrow
  • 00:04:19 which I get with this spammed class
  • 00:04:22 carrot here curry I don't know how it's
  • 00:04:24 pronounced so
  • 00:04:25 this will just be the error pointing to
  • 00:04:27 the bottoms to indicate that this is a
  • 00:04:29 drop-down button so that's all bootstrap
  • 00:04:32 and you can copy that right from the
  • 00:04:33 bootstrap page by the way so that's my
  • 00:04:36 button here and of course I also need to
  • 00:04:39 define what should be the drop-down so
  • 00:04:42 drop down menu here and here I'll then
  • 00:04:48 have list item with a link and I'll add
  • 00:04:51 those links later in the series
  • 00:04:54 and basically I want to be able to
  • 00:04:56 either reduce the quantity by one or
  • 00:04:59 remove all so that are just some quick
  • 00:05:02 links in my shopping cart
  • 00:05:04 to quickly change the amount of a
  • 00:05:06 certain item or get rid of it entirely
  • 00:05:08 so that's that the next part is now just
  • 00:05:12 copy all of that but then strip out
  • 00:05:15 everything the whole unordered list just
  • 00:05:17 have the row in the columns so the next
  • 00:05:19 thing is I want to have a total price
  • 00:05:22 again with a strong tag this should be
  • 00:05:25 give me my total price then copy that I
  • 00:05:30 have another line where I want to let's
  • 00:05:34 first say we have a horizontal line here
  • 00:05:37 with the HR tag and then I want to have
  • 00:05:40 a line with a checkout button so this
  • 00:05:42 will be a button off type button and
  • 00:05:45 with a class of button button success
  • 00:05:49 check out and that didn't work the way
  • 00:05:52 it should no not a problem so I'll add
  • 00:05:56 it by hand type button and lastly I'll
  • 00:06:02 have another part on this view here
  • 00:06:06 where I want to be able to say no items
  • 00:06:11 in cart because you might click on
  • 00:06:13 shopping cart when it is empty and of
  • 00:06:15 course I'll wrap this with some if
  • 00:06:17 conditions later on to only show the
  • 00:06:19 right portion good so that is the view
  • 00:06:23 and with that I can create a new route
  • 00:06:25 in my index.js file so I'll create it
  • 00:06:30 here route forget and I'll just name it
  • 00:06:32 shopping cart
  • 00:06:35 half the well-known function here and
  • 00:06:44 I'll first check if I do have a card or
  • 00:06:48 to be precise a check if it is not set
  • 00:06:51 in a session because in this case I want
  • 00:06:53 to render the shop shopping cart view
  • 00:06:58 yes but I'll pass products to be null
  • 00:07:04 so that will later be that what I
  • 00:07:07 checked with my if condition to know if
  • 00:07:09 I actually do have products in my cart
  • 00:07:11 or not if we pass this check so we seem
  • 00:07:16 to have a cart then I'll create a new
  • 00:07:19 cart off the card stored in my session
  • 00:07:25 and of course the card should be
  • 00:07:28 existing here since I checked if it is
  • 00:07:30 set and then I'll also render this shop
  • 00:07:36 shopping cart view here but I'll pass
  • 00:07:40 some things as arguments I'll have my
  • 00:07:43 products which should be using my
  • 00:07:47 generate array method so I'll get a list
  • 00:07:51 an array of my product in the cart of
  • 00:07:53 the product groups to be precise and
  • 00:07:55 I'll pass my total price as cart total
  • 00:08:00 price of course and that is all I need
  • 00:08:03 in my cart
  • 00:08:04 so with that the route is set up and I
  • 00:08:08 can try this out if I restart my stirrup
  • 00:08:15 and I head over there reload my page and
  • 00:08:18 I click on shopping cart this one worked
  • 00:08:22 because maybe I should also go to my
  • 00:08:24 header and wire this up so here I'll add
  • 00:08:30 the link and I was naming this shopping
  • 00:08:33 cart right so let's save this reload
  • 00:08:37 everything click on it and we see the
  • 00:08:39 shopping cart though of course only with
  • 00:08:41 our dummy text not the real shopping
  • 00:08:43 cart so I'll take care about this next
  • 00:08:45 to add items to our shopping cart and
  • 00:08:48 now
  • 00:08:48 only display those dummy well text and
  • 00:08:51 and items here and so on
  • 00:08:53 I need to do some extra steps so I'm
  • 00:08:57 already retrieving all my data and I'm
  • 00:09:00 passing it to this view but I'm not
  • 00:09:02 displaying it here of course that
  • 00:09:05 shouldn't be the hardest part right so
  • 00:09:07 I'll go back to my shopping cart view
  • 00:09:09 but the first thing I'll do is I'll
  • 00:09:12 check if I have products because just a
  • 00:09:17 second remember that in my routes fall I
  • 00:09:21 was passing products be null if we don't
  • 00:09:24 have a shopping cart so if we have
  • 00:09:28 products here then I know we seem to
  • 00:09:31 have a shopping cart it's not null
  • 00:09:33 otherwise and that's why I'll have an
  • 00:09:36 else statement here well I'll do
  • 00:09:38 something else so the part if we do have
  • 00:09:43 a shopping cart is of course this code
  • 00:09:45 so I'll insert it here and I'll only
  • 00:09:49 display this part here if we don't have
  • 00:09:52 products in our shopping cart so that's
  • 00:09:55 great and now also need to loop here in
  • 00:09:58 my unordered list I'll do this with a
  • 00:10:01 each loop of course products so loop
  • 00:10:04 through all my products and I will trade
  • 00:10:07 a list item so it lists entry for each
  • 00:10:10 product then I can access the quantity
  • 00:10:16 of each product and remember product
  • 00:10:19 always means a group of that product so
  • 00:10:21 the quantity will be the quantity of
  • 00:10:23 that single product and so on I can also
  • 00:10:27 access my title so this title or this
  • 00:10:32 item title to be precise because
  • 00:10:34 remember in my card here we have our
  • 00:10:39 items that is what we're looping through
  • 00:10:41 but each item or if this items thing
  • 00:10:45 there again then has the quantity the
  • 00:10:49 price and given the individual item
  • 00:10:52 itself so that's important to keep in
  • 00:10:54 mind so I'll have to access the item to
  • 00:10:59 get the title
  • 00:11:00 the price is available on my top level
  • 00:11:06 on this items array itself so this price
  • 00:11:10 I move that I'm filling out only product
  • 00:11:13 specific or entry per specific data the
  • 00:11:16 next part is of course down here where I
  • 00:11:18 have my total price I want output that
  • 00:11:21 as well and I can output total price
  • 00:11:23 since I'm passing that here so since I
  • 00:11:30 haven't changed any server-side code if
  • 00:11:32 I now reload my shopping cart that looks
  • 00:11:34 pretty good we see call of duty with a
  • 00:11:37 price of 120 free items off it and if we
  • 00:11:42 checked is 3 times 40 is 120 sounds
  • 00:11:46 right if I add a new one and go back we
  • 00:11:48 have 164 items all of warcraft 1 times
  • 00:11:51 and so on so that is our working
  • 00:11:54 shopping cart and if I now remove my
  • 00:11:58 session again like that reload my page
  • 00:12:04 if I go to shopping cart we see no items
  • 00:12:06 in cart because now it's empty and if I
  • 00:12:09 start to add items again we again see
  • 00:12:12 them here and oh in order to get this
  • 00:12:16 drop down to work here I'll still not be
  • 00:12:20 to add something here forgot that
  • 00:12:23 so back in your shopping cart view one
  • 00:12:28 important thing I need to add to this
  • 00:12:30 button here is the data
  • 00:12:32 toggle attribute which will basically
  • 00:12:34 tell bootstrap to well use the
  • 00:12:37 appropriate JavaScript to make this
  • 00:12:39 clickable and display it as a drop-down
  • 00:12:42 so now if I reload here yes now this
  • 00:12:45 works so that's the working shopping
  • 00:12:48 cart with the working shopping cart view
  • 00:12:50 and of course checkout is not included
  • 00:12:52 we're not able to manage if you can't
  • 00:12:54 click they were slayings but that'll all
  • 00:12:56 things that do in the next step but the
  • 00:12:58 first step here was very important we're
  • 00:13:01 able to build a shopping cart to fill it
  • 00:13:03 and you know the logic how this was done
  • 00:13:06 and this of course is something you
  • 00:13:08 should be able to apply to whatever
  • 00:13:10 project you need something comparable so
  • 00:13:13 I'll see you
  • 00:13:14 the next videos and will show good day
  • 00:13:16 bye