1
00:00:00,330 --> 00:00:04,680
Hey, just a few more things that we still need to take care of, another one that we wanted to make

2
00:00:04,680 --> 00:00:11,370
sure that we have done is whenever we're adding to the cart, the cart malfunction and then also constructing

3
00:00:11,370 --> 00:00:14,490
the cart itself that we're adding items into.

4
00:00:14,580 --> 00:00:18,540
And this is we're going to have the same functionality or similar functionality to what we had earlier.

5
00:00:18,810 --> 00:00:22,830
So right now we have Cartney and whenever it gets clicked, we track the mouse event.

6
00:00:23,070 --> 00:00:26,930
So we won't actually pick up the target that initiated the event.

7
00:00:27,060 --> 00:00:30,350
So when we click it, we see that we get the element that triggered it.

8
00:00:30,570 --> 00:00:36,780
So if we had more than one and maybe you want to buy a bear or something like that, so if we had more

9
00:00:36,780 --> 00:00:39,120
than one, it's going to trigger that element.

10
00:00:39,330 --> 00:00:44,970
So that gives us the ability to pick up the element and get content from that element and then deposit

11
00:00:44,970 --> 00:00:49,800
that information into our main cart.

12
00:00:49,930 --> 00:00:55,440
So that's what we're going to do right now, is we're going to add it into the cart from the cart object.

13
00:00:55,770 --> 00:01:02,700
So we've got cart here and we need to create a function within the cart itself in order to add that

14
00:01:02,700 --> 00:01:06,170
item as well as output it and a bunch of other things as well.

15
00:01:06,480 --> 00:01:09,920
So let's create this and we're going to create a list.

16
00:01:10,320 --> 00:01:14,730
So this is going to be basically where we're going to hold all the information contained within this

17
00:01:14,730 --> 00:01:15,090
cart.

18
00:01:15,270 --> 00:01:19,620
We're going to deposit all that information that the user is selecting.

19
00:01:19,620 --> 00:01:26,040
And it's going to be all held within my list, which is sitting into the cart object, which gets constructed

20
00:01:26,040 --> 00:01:27,960
every time we do new cart.

21
00:01:28,140 --> 00:01:30,270
And in this case, we're already using cart.

22
00:01:30,570 --> 00:01:37,260
So we need it to have another function here within the cart itself in order to add it into the cart.

23
00:01:37,410 --> 00:01:42,990
And we already saw that we had this before where we've got Adir and we're going to have a method for

24
00:01:42,990 --> 00:01:50,550
this where we're getting the item and then the cost of that item and we're adding it into the list and

25
00:01:50,550 --> 00:01:55,500
the same as what we saw earlier, where we bring it to the lower case.

26
00:01:55,500 --> 00:02:02,250
So we're going to use the nice thing about objects where we can take the item and to lower case.

27
00:02:02,640 --> 00:02:08,280
And of course, this only really works if you have only one word items.

28
00:02:08,790 --> 00:02:12,450
If they have more than one word, then you've got to do a little bit more clean up of that.

29
00:02:12,600 --> 00:02:17,270
But for the purposes of the demonstration, all of them are going to just be one word.

30
00:02:17,280 --> 00:02:21,630
So those are going to be the object names and then we're going to have values associated with it.

31
00:02:21,780 --> 00:02:24,680
And that's where we're able to get that and make it unique.

32
00:02:24,930 --> 00:02:33,990
So just as we did before, where we had the my list and we were using the square brackets and checking

33
00:02:33,990 --> 00:02:39,270
to see if it exists and if it doesn't exist, then we know we need to create it.

34
00:02:39,600 --> 00:02:47,760
And if it does exist, then we would know that we have a quantity in this object and we can just update

35
00:02:47,760 --> 00:02:51,030
the quantity by updating the value there.

36
00:02:51,030 --> 00:02:56,850
So adding to that quantity and because this is going to be the list that's contained within the cart

37
00:02:56,970 --> 00:03:01,650
and this is where the object is going to sit, we don't have to relist or anything like that.

38
00:03:01,860 --> 00:03:06,390
We're going to create functions in order to do the listing because we want all of this contained within

39
00:03:06,390 --> 00:03:07,260
the one object.

40
00:03:07,380 --> 00:03:09,960
And of course, this is object oriented programming.

41
00:03:09,960 --> 00:03:12,830
So that's where we want to contain everything within the same place.

42
00:03:13,230 --> 00:03:17,700
So if we don't have this particular element, we want to list that out.

43
00:03:17,970 --> 00:03:22,110
And the way that we're going to list it out is will equal it to an object.

44
00:03:22,440 --> 00:03:25,020
And then we need to just simply construct that object.

45
00:03:25,260 --> 00:03:27,240
So each one of them is going to have a name.

46
00:03:27,420 --> 00:03:31,040
And this is going to be getting that item information that's being passed in.

47
00:03:31,440 --> 00:03:33,860
Also, there's going to be a price for it.

48
00:03:34,110 --> 00:03:40,200
So this is whatever the cost is of that item and quantity by default, we're setting that to one.

49
00:03:40,890 --> 00:03:44,480
And then you can also add in things like subtotal if you want.

50
00:03:44,700 --> 00:03:46,430
So we had that last time as well.

51
00:03:46,440 --> 00:03:47,670
So it's the subtotal.

52
00:03:48,000 --> 00:03:53,190
And so this is going to be a method within here where what we're going to do is we're going to take

53
00:03:53,520 --> 00:04:01,740
and return back whatever this price is, and multiply it by this quantity.

54
00:04:02,010 --> 00:04:04,530
And so these values are going to be actually changing.

55
00:04:04,530 --> 00:04:10,590
So just as we saw before with our other shopping cart, which wasn't object oriented programming, but

56
00:04:10,590 --> 00:04:14,160
was based on objects that we're able to return back subtitles.

57
00:04:14,310 --> 00:04:19,140
And before we continue, we can actually clean this up where we can remove out that cart because we

58
00:04:19,140 --> 00:04:26,420
don't necessarily need that as we can utilize the object directly as we're adding in the item.

59
00:04:26,430 --> 00:04:28,560
So we've got all of these values here.

60
00:04:28,590 --> 00:04:34,470
Instead of cart me, let's add an anonymous function here so we don't have to posehn that object.

61
00:04:34,710 --> 00:04:40,080
And we can here we can add in cart atter using that one that we just created.

62
00:04:40,290 --> 00:04:46,080
And we've already got the temp name as well as the temp value at this point.

63
00:04:46,200 --> 00:04:49,110
And we also need to have a way to list out from the cart.

64
00:04:49,110 --> 00:04:54,660
So a crate and we can just call this one cart Lyster and then going back into our cart object, let's

65
00:04:54,660 --> 00:04:57,930
add in that method or we've got one Lyster.

66
00:04:57,930 --> 00:04:59,850
And this is going to be equal to a function.

67
00:05:00,030 --> 00:05:06,770
And we'll output whatever is contained within my list, so ecocide, so refresh and try that.

68
00:05:06,930 --> 00:05:11,430
So now whenever we click it, we can see that we can list out the contents of the cart.

69
00:05:11,460 --> 00:05:12,810
We've got two in there.

70
00:05:13,210 --> 00:05:15,240
Let's add in a test item here.

71
00:05:15,450 --> 00:05:17,940
So if I add that one, we can see that now.

72
00:05:17,940 --> 00:05:21,000
We've got within there, we've got three test items.

73
00:05:21,240 --> 00:05:22,850
We've got two milks.

74
00:05:22,860 --> 00:05:26,130
We can keep clicking the milks and listed out again.

75
00:05:26,280 --> 00:05:31,920
So everything is adding in properly, just as we saw before, where we've got the quantity, we've got

76
00:05:31,920 --> 00:05:32,460
the price.

77
00:05:32,460 --> 00:05:34,530
We can calculate subtotal if we want.

78
00:05:34,740 --> 00:05:36,600
We can get the test one as well.

79
00:05:36,600 --> 00:05:38,900
So all of these objects are behaving the same way.

80
00:05:38,910 --> 00:05:44,580
So there's a few final steps in order to complete our project where we need to output the information

81
00:05:44,580 --> 00:05:45,840
visibly for the user.

82
00:05:46,140 --> 00:05:49,590
So that's some additional methods that we're going to add in to the cart.

83
00:05:49,740 --> 00:05:54,160
And then we'll also add in a button so the user can simply list that out whenever they want to.

84
00:05:54,240 --> 00:05:56,610
So all of that is still yet to come in the upcoming lesson.

85
00:05:56,790 --> 00:06:02,040
So go ahead and add in the ability to add to your cart object.