(upbeat music)
- [Instructor] Okay, now that you've had a chance
to try this for yourself,
let's take a look at how I solved this challenge.
So the first thing I did
was open up CartPage.vue for reference.
And then I went and created two new components
inside the components folder.
The first one was called ProductsList.vue,
and the second one was called ProductsListItem.vue, okay?
And the first thing I did
was I implemented this ProductsListItem.vue.
So just like when we implemented our products grid item,
basically what I did is I went in here
and found the corresponding div that I want to copy and paste
inside this product's list item file, okay?
So that in fact was this div here
that we're calling V for on.
So I just copied that,
and it's going to stop right here underneath the remove button.
So I copied that and pasted that
into the ProductsListItem template,
just like that.
And the next thing I did was I deleted the V for
and key attributes from this div
since we no longer want it to display multiple products
just inside this component alone anyway.
And then I created the component script tags
and inside there, what I did was I said, export default,
and for the components name, I said, ProductsListItem.
And just like with our products grid item,
I gave this a props property
with the prop product in it.
And then for the styling, I just went back to CartPage
and copied and pasted all of the relevant
styling from there, which is everything
from product container on.
just copy that and put that inside style tags,
which of course we want to be scoped.
Paste and style,
and that is about it for the ProductsListItem.
So the next thing I did
is I opened up the ProductsList component
and started adding a template for that.
So just like for the products grid,
what this component is basically going to do,
is it's going to display a list of products list items.
So it's as simple as that,
we're just going to display ProductsList
and we're going to use the V for directive
to map over our products
and pass one product to each products list item.
So we're going to say V for equals product in products.
Then we need to use V bind for the key as well.
So we're going to say product.id
and then we pass the product property through
by using the V bind directive again.
So we say colon product equals
product and that's all we need to do for that.
Now one little extra thing that I added in,
is when we don't have any products in our products list,
what we want to display instead is probably
a message that says something like
you haven't added anything to your cart yet, right?
And the way that we can do this in view,
is using the V if directive, which we saw a little earlier.
So what we're going to do is we're going to wrap
this list that we're displaying
in a div with the V if directive.
So we're going to say V if equals products.length
is greater than zero
and we're going to wrap our products list in that.
And we're going to close that tag.
And then underneath that we're going to have a V else tag
which is going to be on a paragraph tag.
So we're going to V else,
and what this is going to say is something like you haven't
added anything to your cart yet, okay?
And that's about it for the template.
The next thing I did was I defined this script
which looks like this (indistinct) say script.
And then we're going to say export default,
the name of the component is going to be ProductsList,
and the props this is going to take a prop called products
from the CartPage itself, okay?
And what we need to do is register
since we're using it up here
we need to register the products list item
which I actually typed that wrong.
Sorry about that.
So we're going to import the products list item component
by saying import ProductsListItem
from dot slash ProductsListItem.vue.
And then inside our components here
we're going to register that component
by saying ProductsListItem,
and that should be about it.
So now if we go into CartPage
we're going to have to import our ProductsList.
So we're going to add a components property here
and say ProductsList.
And we're going to have to import that up here.
So we're going to say import ProductsList from
dot dot/components/ProductsList.vue, okay?
And then what we're going to do is we're going to delete
everything inside this div here,
which used to be our products list.
And we need to be careful not to remove
the total price and the checkout button.
And what we're going to do instead
is we're going to display our ProductsList here,
passing the products prop as our products data,
which remember we're doing here.
And actually that's not going to be products at all.
That's going to be cartItems.
So we're passing our cart items
to our products list as the products prop.
And that should be pretty much all we need to do.
So now, if we go back here,
it looks like I did something
a little wrong with the stylings.
So let me take a look at that.
Oh, that's what I did is I just
didn't type the script tag correctly.
So if we save that,
we should be able to go to our shopping cart now
and it should look exactly the same except now,
it's using reusable components behind the scenes.
So our app is much more modular now.
Congratulations, if you figured that out for yourself
and if you just gave it a good try congratulations as well.