1
00:00:02,450 --> 00:00:05,810
Thus far every class works kind of standalone.

2
00:00:05,840 --> 00:00:06,280
Yes

3
00:00:06,290 --> 00:00:09,880
we returned the created element and use that in other classes

4
00:00:09,950 --> 00:00:12,790
but for example, that event listener on the add cart

5
00:00:12,800 --> 00:00:16,580
button, it triggers this method and there, nothing happens.

6
00:00:16,580 --> 00:00:22,760
Well now we have to make sure that when this method is executed, we actually do something which leads

7
00:00:22,760 --> 00:00:31,400
to our cart class, to update our cart class we'll need to re-render. Now,

8
00:00:31,460 --> 00:00:37,810
as it turns out, that's rather difficult right now. In our cart, in our shopping cart class,

9
00:00:37,820 --> 00:00:44,270
you could certainly add an add item method or something like that where we expect to get a new product

10
00:00:44,270 --> 00:00:50,480
in the end, we could of course therefore also name this add product, probably a better name and then we

11
00:00:50,480 --> 00:00:51,950
could refer to this item,

12
00:00:51,950 --> 00:00:55,010
so to this field which we initialize to be an empty array,

13
00:00:55,190 --> 00:01:00,650
so to this property which initially is an empty array and push our product onto that array, that's something

14
00:01:00,680 --> 00:01:09,740
we could do for sure. Thereafter, we could call render again to re-render this but that for example wouldn't

15
00:01:09,740 --> 00:01:14,400
work because it returns a new cart element, not something we want here,

16
00:01:14,420 --> 00:01:18,220
we want to update the existing content instead.

17
00:01:18,320 --> 00:01:20,880
Well that's something that could be done though,

18
00:01:21,170 --> 00:01:29,600
we could go to render where we render our content and simply make sure that we store this place where

19
00:01:29,600 --> 00:01:34,990
we output that number, so that we get access to this h2 element.

20
00:01:35,160 --> 00:01:43,110
Here we could say this total output or however you want to name it and therefore add a new property

21
00:01:43,200 --> 00:01:50,700
and you can add new properties anywhere in your class, in your object, doesn't have to be inside of the

22
00:01:50,700 --> 00:01:51,460
constructor

23
00:01:51,510 --> 00:01:57,170
as you learned earlier in the course, you can always dynamically add new properties to an object.

24
00:01:57,180 --> 00:02:03,720
So here we add a new total output property to the object which is created based on this class and set

25
00:02:03,720 --> 00:02:06,280
the value equal to cart

26
00:02:06,290 --> 00:02:13,590
el referring to that element we're creating here and then query selector h2, so we get access to that

27
00:02:13,650 --> 00:02:20,120
h2 element and store a reference to this element here in the total output property.

28
00:02:20,160 --> 00:02:29,310
Now here in add product, we could then set this total output equal to and now basically copy that code

29
00:02:29,310 --> 00:02:30,210
here,

30
00:02:30,210 --> 00:02:37,110
therefore use this template literal notation here with the back ticks and now set this to the

31
00:02:37,170 --> 00:02:45,600
old total plus the new total based on the items we have here. For the moment, I'll just set it to 1 and

32
00:02:45,600 --> 00:02:47,700
we'll add a real dynamic solution later,

33
00:02:47,700 --> 00:02:51,640
for now I just set it to 1 so that we see that it changed at least.

34
00:02:51,730 --> 00:02:57,240
So now we would have an add product method that probably should update what we see on the screen,

35
00:02:57,250 --> 00:03:02,320
the problem is how can we call that add product method from inside of product item?

36
00:03:02,320 --> 00:03:06,510
Well you could think, I just call cart add product,

37
00:03:06,520 --> 00:03:08,030
well that won't work,

38
00:03:08,190 --> 00:03:15,600
cart here is not a variable you have available here, cart like this or to be precise, shopping cart

39
00:03:15,610 --> 00:03:18,300
so referring to the class itself like this won't work,

40
00:03:18,310 --> 00:03:20,320
you have to instantiate it to work with it,

41
00:03:20,350 --> 00:03:23,230
you can't work with a class just like this,

42
00:03:23,260 --> 00:03:25,210
at least not in that way here.

43
00:03:27,270 --> 00:03:29,610
Now we do create the cart here in the shop,

44
00:03:29,610 --> 00:03:35,100
here we have a cart, a cart instance where we could call add product

45
00:03:35,100 --> 00:03:39,660
but here unfortunately we're not adding that product.

46
00:03:39,720 --> 00:03:42,410
Now how can we solve that?

47
00:03:42,420 --> 00:03:48,480
Well turns out there is a way we can actually make a syntax like this here work and that will help us

48
00:03:48,660 --> 00:03:49,540
solve that,

49
00:03:49,560 --> 00:03:51,660
let's have a look at that in the next lecture.