Transcript from the "DetailsPage Component" Lesson
[00:00:00]
>> So the next step is to fill details page.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 manual page. And then what I have in connected callback, is a call to render data and render data is just this code, that will check if we do have a product ID set in data set.
[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't 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 rendered data that is verifying for a dataset product ID, 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 setting the router. If we went to find this product ID, or we go to the router, And we match that instead of product ID.
[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.