DetailsPage Component

[00:00:00]
>> So the next step is to fill DetailsPage.js, okay? That right now is empty, but this is another case where we can copy and paste, because it's more of the same thing. So we can go forward. This is the one where we can copy this code and then maybe analyze the code, that's details page code.

[00:00:30]
So they see because it's a page, we're going to use shadow DOM. We are reading the template, cloning the template, loading the style. So you can see this is the same code as we did for the menu page. And then what I have in connectedCallback, is a call to renderData and render data is just this code, that will check if we do have a product ID set in dataset.

[00:00:59]
We are going, and by the way let's check if we call this product ID or ID. How do I check that? When we verify the body here. Let's go to the home, I think it's the default one, I don't know why it's-
>> I think it's an app.js go to the brackets we import.

[00:01:23]
>> Yeah, I don't know why I have it a different way, but I just can delete the default as well. Let me check if that works. Yep, so I'm going to paste the code, and in this case, because I didn't use default export, I will just delete that.

[00:01:40]
If not, I need to change my app.js, it's not a big deal. And the code seems pretty straightforward. This constructor, even if it feels like a lot of code, it's the same code that we had in menu page for, in this case, creating a shadow DOM, loading the template, and loading the CSS.

[00:01:59]
And then we have a renderData that is verifying for a dataset.productId, that we can check if we have it. So you can see it's giving me an invalid product ID in an alert, that is kind of this alert. Why is that? Because we didn't call it product ID.

[00:02:19]
If you remember when we were inspecting the DOM, this was actually ID. How do I know that? Well, you can actually inspect here and see that it says data-id. That's actually set in the router. If we want to define this as product ID, well we go to the router, And we match that instead of ID, productId.

[00:02:51]
Make sense? So now, when we are here. We can click in the details and we get into a details page. The details page has a button, Add to Cart that right now is doing nothing more than sending us to the order. In fact, it has at one point, when we get into the details page, it has here a todo.

[00:03:24]
So now we have a homepage with a list of products, and we can get into the details.