1 00:00:02,340 --> 00:00:07,650 So now that the shopping cart extends component and therefore uses that logic, we can do the same on 2 00:00:07,650 --> 00:00:09,090 the other classes as well, 3 00:00:09,090 --> 00:00:16,080 for example on product item. There we also start by adding extends and then component 4 00:00:16,080 --> 00:00:22,380 and now here in render, again instead of creating the element like this, we can get access to the product 5 00:00:22,410 --> 00:00:26,790 element by calling this create root element, pass in the tag 6 00:00:26,790 --> 00:00:33,810 we want to create which here for a single item is a list item element and then any class we want to 7 00:00:33,810 --> 00:00:36,180 add which in this case is product-item. 8 00:00:36,180 --> 00:00:41,550 I don't need any attributes here, just as we didn't need any on the cart and therefore I'll not add that 9 00:00:41,550 --> 00:00:43,450 third argument here, 10 00:00:43,550 --> 00:00:50,150 that line is no longer required because the class will be added here inside of createRootElement. I 11 00:00:50,150 --> 00:00:55,820 definitely want to set innerHTML, that is the logic which has to remain in this render method 12 00:00:55,820 --> 00:01:04,590 here and then here, I want to get access to the button, add the event listener but no longer return product 13 00:01:04,590 --> 00:01:08,160 element, instead the created element will be hooked into the DOM 14 00:01:08,160 --> 00:01:15,660 by my logic here in createRootElement here and we just have to make sure that we call its constructor, 15 00:01:15,840 --> 00:01:21,360 so the constructor of component and forward the ID of the element in our DOM where we do want to 16 00:01:21,360 --> 00:01:22,500 add the item. 17 00:01:22,500 --> 00:01:29,220 Now of course, that now is not this div's ID here because we're working on a single product item, 18 00:01:29,220 --> 00:01:34,240 this should be part of our product list and previously it's here in the product list where I called 19 00:01:34,240 --> 00:01:41,000 render and then I appended the return product element. Now since render doesn't return it anymore 20 00:01:41,040 --> 00:01:45,000 and of course we still could return it but I always want to use the same approach, 21 00:01:45,000 --> 00:01:46,880 I'll not do it like this anymore, 22 00:01:46,980 --> 00:01:53,730 remove that instead and instead here when we create a product item besides, passing in product, I also 23 00:01:53,730 --> 00:02:01,000 want to pass in an ID of the element where this item should be added to and that ID is in the end 24 00:02:01,170 --> 00:02:04,650 an ID which should be assigned to that product list. 25 00:02:04,650 --> 00:02:08,840 So for now, we'll also change this to use the base class 26 00:02:08,850 --> 00:02:14,220 but for now, I'll go to product list and add an ID, prod list or anything like that, 27 00:02:14,220 --> 00:02:20,940 totally up to you and then use this ID here, prod list which I pass as a second argument to the product 28 00:02:20,970 --> 00:02:26,850 item constructor. Now in the product item constructor, we have to work with that second argument, 29 00:02:27,000 --> 00:02:31,290 so the render hook ID is the second parameter we should accept there 30 00:02:31,290 --> 00:02:33,600 so that here we can all be called super 31 00:02:33,600 --> 00:02:38,970 and it's a good convention to do this first so that you make sure that your base class is fully initialized 32 00:02:39,210 --> 00:02:42,000 before you start working in your subclass 33 00:02:42,000 --> 00:02:48,030 and here to super, I forward the render hook ID so that the base class has everything it needs to make 34 00:02:48,030 --> 00:02:55,120 createRootElement work. Therefore now if we save that and we again reload here, we'll get an error. 35 00:02:55,140 --> 00:02:59,700 Now this one can be tricky to spot but it's important to understand where it's stemming from, 36 00:02:59,700 --> 00:03:07,070 do you have an idea what could be causing this? Well we're having problems appending our item in line 37 00:03:07,090 --> 00:03:14,060 37 which is that line here in createRootElement, so we probably have problems finding an element with 38 00:03:14,060 --> 00:03:14,910 that ID. 39 00:03:16,140 --> 00:03:26,520 Now the problem is that of course in prod list, I assign this ID here to prod list and then I do 40 00:03:26,790 --> 00:03:29,190 pass that same ID to product item 41 00:03:29,190 --> 00:03:31,250 but what happens thereafter? 42 00:03:31,320 --> 00:03:34,020 we create a product item object, 43 00:03:34,020 --> 00:03:39,600 we forward our ID to it and then I call render on product item. 44 00:03:39,600 --> 00:03:42,960 Now when I call render here, what's the implication of that? 45 00:03:42,960 --> 00:03:48,960 The implication is that in the product item class here or in the object created based on the class, this 46 00:03:48,960 --> 00:03:55,170 method executes. There I call the createRootElement and createRootElement will create me a list item 47 00:03:55,350 --> 00:03:57,420 and try to add it to the DOM. 48 00:03:57,420 --> 00:04:02,220 Now that's the part that will fail because if we have a closer look at product list, we see that yes 49 00:04:02,250 --> 00:04:08,190 we set the ID on product list but product list itself hasn't been added to the DOM yet, 50 00:04:08,280 --> 00:04:10,740 I return product list here in render 51 00:04:10,740 --> 00:04:12,200 after I went through the loop, 52 00:04:12,360 --> 00:04:17,250 so after I tried to create my product items and add them to the DOM, 53 00:04:17,250 --> 00:04:23,250 so until this point nothing has been added to the DOM and that's the problem. Now to make that work, 54 00:04:23,610 --> 00:04:30,280 let's already adjust this function here in the product list class to also use the base class. 55 00:04:30,330 --> 00:04:33,690 So here product list should also extend component 56 00:04:33,840 --> 00:04:39,090 and with that extended, here where I create the product list, I want to use this createRootElement and 57 00:04:39,090 --> 00:04:41,110 create an unordered list here, 58 00:04:41,310 --> 00:04:45,880 give it a class name of product list and now also, 59 00:04:45,930 --> 00:04:52,140 now I'll utilize that third argument, an array of attributes where I want to create a new element attribute 60 00:04:52,410 --> 00:04:57,590 using that class we added earlier and there, we can pass in two arguments - 61 00:04:57,600 --> 00:05:03,960 the first one is the name of the attribute, that will be ID so that we in the end add that ID here 62 00:05:04,020 --> 00:05:11,350 inside of createRootElement and the value for that attribute will be prod list for example, 63 00:05:11,360 --> 00:05:16,060 so what I use as ID here. Now this will create that element there, 64 00:05:16,070 --> 00:05:22,190 now we can get rid of that and also of that line where I assign my class name here. we also no longer 65 00:05:22,190 --> 00:05:24,710 need to return product list here, instead 66 00:05:24,710 --> 00:05:25,500 now, well 67 00:05:25,670 --> 00:05:30,830 we can get rid of that but instead now we have to make sure that in the constructor of product list. 68 00:05:31,310 --> 00:05:38,030 We call the parent constructor of component and we tell that constructor where to render the product 69 00:05:38,030 --> 00:05:39,230 list 70 00:05:39,230 --> 00:05:45,520 and that would be the app ID or the element with the app ID but to be a bit more flexible, let's 71 00:05:45,530 --> 00:05:53,260 just again accept an argument here and forward that to super so that in the place where we create product 72 00:05:53,260 --> 00:05:58,210 list, we can decide where to render the list instead of doing it inside of product list which can make 73 00:05:58,210 --> 00:06:01,090 your code harder to reason about. 74 00:06:01,120 --> 00:06:07,390 So now in the place where I use product list, which is here where I create the shop, I create my new product 75 00:06:07,390 --> 00:06:13,480 list like this and I want to call render there, I'm not interested in the return value though because 76 00:06:13,480 --> 00:06:19,330 there will be no return value, I don't want to append anything anywhere, I don't need to get access to 77 00:06:19,330 --> 00:06:22,390 my element by ID here anymore, 78 00:06:22,390 --> 00:06:29,990 instead to product list, I also forward app, this ID and now product list will be rendered and it 79 00:06:29,990 --> 00:06:35,900 will therefore then only try to add current items after it has been rendered itself. And with that if 80 00:06:35,900 --> 00:06:41,510 we now reload, this is gone, this works again and if I now add items to the shopping cart, 81 00:06:41,510 --> 00:06:48,260 this also works and now we're embracing this concept of inheritance and of having a base class to share 82 00:06:48,260 --> 00:06:49,340 some common logic.