ProductItem Component

[00:00:00]
>> So I need to create then product item within components, I'm going to create ProductItem.js. And this is one of the part where I don't need to type it manually because it's a lot of things that we have already seen before, so I will just jump into the course documentation and copy and paste this one, okay?

[00:00:29]
In this case, we are in chapter 5, lesson 3, it's the product item, items component and we have one ready for copy and paste and we can analyze the code anyway. So, we have it's an HTMLElement, so it's a custom element and we are registering that at the bottom, which we know what that's doing.

[00:00:58]
Constructor is actually doing nothing at this point. I'm not creating a Shadow DOM, okay? Then on connectedCallback I'm getting the template, cloning the template, appending the template, we know how to do that. Then I'm parsing the JSON that we set in the dataset, so we have the object back, and I'm querying different parts of the template and setting the textContent.

[00:01:28]
Nothing too fancy, just fill in the gaps. This is not the template HTML, no, we are filling each part individually. And then we have these event handlers that I will explain in a minute, so why it's so complicated, okay? But let's save this and see what happens now, oops.

[00:01:57]
By the way, nothing happens. Does anyone know why? I need to import somewhere in the execution chain ProductItem.js, if not the browser will never execute that. So I need to find app.js and add another import for ProductItem. So, now we have something different. Okay, so automagically we have a list of categories with products inside, that looks good.

[00:02:40]
>> Why aren't you parsing the product via an attribute?
>> I could-
>> You realize-
>> Just to show you a different ways to do that. So, what are the other ways to pass these as an attribute? For that the solution will be to go to my ProductItem.js and create the property.

[00:02:59]
Basic JavaScript, not TypeScript, so yeah, how do you set up a property? Like you don't unless it's private with a hash, I'm not sure if you've seen that, we will use that later, and then create a setter and a getter, but not through data set. If you're using data set, you must use a string.

[00:03:19]
But if it's a property, it's fine, you can pass it. Yeah, sure, just to show you a different techniques. So what about the, if it says click? And this is something that we haven't seen before. I mean, we've seen how to detect click because it's an event listener.

[00:03:37]
So we are taking the anchor of my template and let's look at the templates first, let's inspect it here. It's actually the anchor, it's actually wrapping the image and the section that has a div with all information. So actually the link is a whole row, okay? The whole row is a link, okay?

[00:04:04]
So the thing is that I can click like there and it's actually doing something. Look at the URL, it's going to product-11. So it's going to the details for some reason. Okay, so it's working that part. So, But we also have a button here and we have a problem, the button is also within the same link.

[00:04:38]
So when you click on the button, the link event handler fires. Do you understand the problem? So the link is actually, in this case, an element that includes a button. It doesn't seem like right initially, but this is a pretty common pattern. So how to solve the problem with the DOM?

[00:05:02]
Well, we could check event.target. So remember I mentioned before that we do have two things, target and current target. I mentioned we will see that later. So, we are attaching an event listener over the link, over the anchor, okay? That's actually current target, it's going to be a link.

[00:05:28]
And what about target? Target is actually the lower level element where you clicked on. So if I click on Black Americano, it's an H4. So the current target is still a because it's actually the object where we are binding the event to. But this one, it can be anything, so just the button.

[00:05:53]
So then I'm very fine if the tag name of the target is button. And if it's button we need to add it to the cart, not go to the details. Does it makes sense? But that's that part, Okay? Cool, now the details is empty. So if I click here, it's empty.

[00:06:21]
So we also need to create the web component for that. But before a web component, in fact, if we inspect this and we look into the body, main, we see that in this case we are using a different technique. We are not passing the whole object, we are passing the ID.

[00:06:39]
Again, just to show you different ways to work with this. So we received the ID, we need to find the ID somewhere. So what we need, it's within Menu.js, a function, That will get a ProductById, okay? I'm using an async function and you say, hey, that's a look like something for an async function, it's verifying in a local array.

[00:07:11]
Well, the thing is that what happens if you're loading the details page initially by default, you didn't pass through the whole homepage, for example, so maybe we don't have yet the menu. So maybe we can check if we do have a menu or if the menu is null, we can maybe await for what?

[00:07:35]
For raw data, that is our other function. Or we can use a getter with lazy load, another way to solve the problem. And here we can use different techniques to go faster with this, but just plain programming solving is we are going to make this, we go through every category and every product in that category, and we check if the ID is the one that we are looking for.

[00:08:13]
And in that case, we return that. And if not, we return null. Meaning, yeah, I don't have it, pretty simple algorithm.