1 00:00:00,990 --> 00:00:07,950 Hey, this is the second part to the shopping cart challenge and of course, third lesson in this part 2 00:00:07,950 --> 00:00:14,190 of this exercise where we're going to add to the cart that we can select items so that the items are 3 00:00:14,190 --> 00:00:14,670 visible. 4 00:00:14,700 --> 00:00:18,210 So this is for all of those that don't like to use the console. 5 00:00:18,330 --> 00:00:23,130 So for all of our friends that aren't programmers, if they want to check out this application as well 6 00:00:23,130 --> 00:00:27,230 as we want to update and have the ability to add new items. 7 00:00:27,480 --> 00:00:34,100 So update that and have the option to add in new items and then also get a total at the bottom. 8 00:00:34,140 --> 00:00:39,060 They're going to do some calculations and we've got a total amount that is being offered for all the 9 00:00:39,060 --> 00:00:41,880 items that the person has within their shopping cart. 10 00:00:42,270 --> 00:00:43,170 So let's get to it. 11 00:00:43,980 --> 00:00:48,840 So we're going to need one more function to in order to accomplish this, I'm going to call this function 12 00:00:48,840 --> 00:00:49,560 relist. 13 00:00:49,770 --> 00:00:56,040 And what this will do is this will go through the global cart object and it will output all of the content 14 00:00:56,190 --> 00:00:57,720 visibly on the page. 15 00:00:57,840 --> 00:01:01,170 And for this, we're going to need somewhere to drop that information. 16 00:01:01,440 --> 00:01:05,790 So right on the route, we're going to create an area called output. 17 00:01:06,120 --> 00:01:11,700 And this is document create elements of the same thing that we did before, where we're going to create 18 00:01:11,700 --> 00:01:12,480 a div. 19 00:01:12,780 --> 00:01:16,920 And then within this div, we're going to simply just take that div because right now it's going to 20 00:01:16,920 --> 00:01:19,460 be blank and append it to the body. 21 00:01:19,710 --> 00:01:25,970 So using the append child, append the div object that we just created, or it should be output. 22 00:01:26,250 --> 00:01:27,010 So saving that. 23 00:01:27,030 --> 00:01:34,650 So now we've got somewhere to dump the information that we're relisting and as we loop through and we 24 00:01:34,650 --> 00:01:35,640 recreate the cart. 25 00:01:35,880 --> 00:01:40,800 So every time that there's items added to the cart, that's when we call relist and that's when this 26 00:01:40,800 --> 00:01:41,790 is going to run. 27 00:01:42,090 --> 00:01:46,800 And then taking that output object that we just created, updating its inner HTML. 28 00:01:46,830 --> 00:01:49,530 So just setting that to be empty, to be blank. 29 00:01:50,100 --> 00:01:54,390 We can also console log out the cart so that every time we can see the cart. 30 00:01:54,570 --> 00:01:58,190 So now when we click it, you can see that the cart is being output. 31 00:01:58,440 --> 00:02:03,660 So the objective here is to output the information that's contained within the cart and then also make 32 00:02:03,660 --> 00:02:05,770 all of the calculations as needed. 33 00:02:06,150 --> 00:02:10,920 So let's go down a little bit more and let's make some more space here within the relist function. 34 00:02:11,310 --> 00:02:13,310 And we also did want to get a total. 35 00:02:13,530 --> 00:02:19,650 So I'm going to create a placeholder there and set total to zero so that as we loop through the items 36 00:02:19,650 --> 00:02:23,740 within the object and this is how we can loop through the items within the object. 37 00:02:24,210 --> 00:02:28,200 So this is just whatever the product is in cart. 38 00:02:28,500 --> 00:02:33,600 And I'll show you as we loop through, we can console logout those products. 39 00:02:33,780 --> 00:02:38,070 So every time I click it, you're going to see it's going to loop through all the items that are in 40 00:02:38,070 --> 00:02:38,500 the cart. 41 00:02:38,520 --> 00:02:40,230 So we've got all these products here. 42 00:02:40,470 --> 00:02:42,500 So we've got a number of different products. 43 00:02:42,510 --> 00:02:45,570 We've got milk, we've got apple all sitting within the cart. 44 00:02:45,660 --> 00:02:48,240 And that's all being output here from the console. 45 00:02:48,970 --> 00:02:51,920 And then, of course, we've got the cart being output as well. 46 00:02:52,650 --> 00:02:58,960 So we can take that product that's being contained within the cart and we can use something with it. 47 00:02:58,980 --> 00:03:01,830 So we've got milk, we've got apples there. 48 00:03:01,980 --> 00:03:03,510 So we've got all of these names here. 49 00:03:03,940 --> 00:03:10,380 And let's take outputs and update its inner HTML and we're just going to simply add to it because we 50 00:03:10,950 --> 00:03:12,900 cleared it all out, we blanked it. 51 00:03:12,910 --> 00:03:14,520 So let's add into it. 52 00:03:15,120 --> 00:03:21,330 And as we loop through in order to get the cart information like this cart product. 53 00:03:21,540 --> 00:03:26,130 And so now every time we output, you see we're getting access to the object. 54 00:03:26,310 --> 00:03:30,240 So originally we were just getting the name and then this is the value. 55 00:03:30,250 --> 00:03:34,410 So if we want to get the value, then we can reference it within this format where we're getting the 56 00:03:34,410 --> 00:03:34,890 product. 57 00:03:35,160 --> 00:03:40,590 So now we're ready to use that and we can output that into the HTML and we're almost there. 58 00:03:40,620 --> 00:03:47,880 We're almost ready to go where we've got the cart product using the bracket notation and now we've got 59 00:03:47,880 --> 00:03:50,580 access to the objects so we can get the name if we want. 60 00:03:50,760 --> 00:03:54,760 So we've got milk, we've got apple and let's continue to build this out. 61 00:03:54,960 --> 00:04:00,680 And so for this one, we're also going to have cart products. 62 00:04:00,930 --> 00:04:05,430 There should be square bracket, product and price. 63 00:04:05,690 --> 00:04:08,010 Then we're going to take this and multiply it. 64 00:04:08,130 --> 00:04:09,360 And I'm going to add to this. 65 00:04:09,400 --> 00:04:11,160 I don't have to have another line there. 66 00:04:11,310 --> 00:04:15,450 So we're multiplying it by whatever the product quantity is. 67 00:04:15,750 --> 00:04:18,480 And then we're also going to output a subtotal here. 68 00:04:18,750 --> 00:04:21,380 So let's create that subtotal value. 69 00:04:21,790 --> 00:04:23,790 There's just another variable that we're going to output. 70 00:04:23,790 --> 00:04:25,410 And right now we don't have a subtotal. 71 00:04:25,410 --> 00:04:27,420 So let's create that subtotal. 72 00:04:27,570 --> 00:04:34,350 And we saw when we were constructing it, we can use Kaat so we can use the subtotal from the object 73 00:04:34,500 --> 00:04:37,170 in order to return back that subtotal amount. 74 00:04:37,410 --> 00:04:39,470 So that's a really easy one that we can get back there. 75 00:04:39,930 --> 00:04:41,100 So let's see what happens. 76 00:04:41,340 --> 00:04:43,080 And we're outputting. 77 00:04:43,230 --> 00:04:48,870 So we still need to update and make a few other tweaks and adjustments, doing a new line break. 78 00:04:49,230 --> 00:04:52,590 So we see we're getting all of the subtable is being subtotal there. 79 00:04:52,590 --> 00:04:53,910 So whatever products. 80 00:04:54,090 --> 00:04:59,910 So we've got the apple, how much it costs, how many there are so multiplied so that. 81 00:05:00,360 --> 00:05:06,030 It's a multiplication and you can make it look better, of course, some multiplied by seven is seven 82 00:05:06,030 --> 00:05:08,780 dollars, three times six is 18. 83 00:05:09,070 --> 00:05:12,840 This is a really simple way to kind of get this cart going here. 84 00:05:13,260 --> 00:05:17,060 And other thing we needed to add in and output is the total. 85 00:05:17,250 --> 00:05:19,140 So we're to set a placeholder for the total. 86 00:05:19,290 --> 00:05:22,350 So taking total and we're going to add to the total. 87 00:05:22,510 --> 00:05:27,480 And because we've got that subtotal so easy with the object, we can add it in. 88 00:05:27,510 --> 00:05:31,790 And then lastly, we just need to add in the total there at the end. 89 00:05:32,250 --> 00:05:38,460 So after we've finished looping through, I'm going to add in whatever the total is and add that as 90 00:05:38,460 --> 00:05:42,720 a new line that maybe we can be more specific or we can say total equals. 91 00:05:43,290 --> 00:05:49,380 So now it's taking all of these values that we're getting from the subtotal and it's adding it in as 92 00:05:49,380 --> 00:05:49,830 a total. 93 00:05:50,970 --> 00:05:53,910 And maybe you want to make this darker as well. 94 00:05:53,910 --> 00:05:54,630 So bolded. 95 00:05:55,290 --> 00:05:56,180 So it stands out. 96 00:05:56,520 --> 00:05:58,770 So however you want to format it, that's up to you. 97 00:05:59,610 --> 00:06:01,920 But we've got all of the functionality that we set out. 98 00:06:02,070 --> 00:06:08,640 And now because it's within this nice object format, if, for instance, all of a sudden we get a whole 99 00:06:08,640 --> 00:06:13,260 bunch of new things that we're selling, like maybe we want to extend it, we want to have a book. 100 00:06:13,470 --> 00:06:15,260 And this book is twelve bucks. 101 00:06:15,270 --> 00:06:20,340 So we have the flexibility to add in new products all the time into our cart. 102 00:06:20,340 --> 00:06:22,020 And the user can just go in. 103 00:06:22,230 --> 00:06:28,410 And because the structure of the object, it's just taking this bit of information and it's creating 104 00:06:28,410 --> 00:06:35,190 all of this functionality, all with JavaScript and have some fun with it, try it out and add in additional 105 00:06:35,190 --> 00:06:42,090 products as well, additional items within your store and really get familiar with what you can do with 106 00:06:42,090 --> 00:06:42,720 objects.