- [Instructor] It's time to work
on enhancing our application
so that we can feel more comfortable
with the application API.
Now, here's our plan,
we're going to start out by deleting the HelloWorld,
as well as the About file,
we don't really need those in this project.
And then we're going to create a new file
that we are going to use to show a Checkout page
for the user once they filled items in the cart.
I'm also going to fix the route to use that
instead of my About page,
which is where currently the route is pointing to.
And then finally, we're going to scaffold the views
and components that we're going to need for this project.
That is actually pretty typical,
I usually map out the structure of the application
and make a plan as to how I'm going to split out
the different components.
Now, here's where you can find
the beginning version of this,
as well as the ending version.
And now there's going to be a difference
between the two here, which you've seen before.
But now these links are going to point to GitHub projects,
instead of CodePen.
So let's take a look at our project.
And I've got this application,
you can see that it does have an About page
that points to this sort of blank thing.
And it also has a Homepage.
And this Homepage is where most of our application lives.
If you were to analyze the different pieces
of this application,
you would know that we have this alert right here,
we don't really need that alert.
So we can get rid of that as well.
But then we have this section on top of that,
that is a range selector.
And then we have this section down here with the products.
And I know that I have a component already built
for an individual item within the product,
I also have the currency component.
And then I have sort of this drop down section right here,
that displays the drop down within the larger navigation.
Actually, it would be nice for that
to be all in the navigation.
And so what we're going to do is split all that up,
and then get rid of the things that we don't need.
Let's make the window bigger here.
And as I mentioned, I'm going to get rid of the About view,
I'm actually go to the About view.
And I'm going to actually copy this code right here.
I could rename this, but let's go ahead and delete it.
And I'm going to create a new view called Checkout.
And I'll paste that,
I think I can also use this view template, actually
and I'm going to put in the text Checkout right there.
So I'll save that.
And I'm just going to use this same piece of code
to do the rest of the files that I'm going to create.
All those are going to be components.
I'm going to get rid of this HelloWorld as well.
So let's do that.
And then in Components,
I'm going to create a component for the navbar,
which will have my navigation.
I'll just paste this in there.
And just add navbar for now,
just adding the names of each one.
Then let's go ahead and make a new one,
we'll create a component for the product list.
And that is going to hold our product
which we've already built or started to build right here.
So then in addition to that,
we want to add the cart drop down.
And again, we'll just call this Cart Drop down here.
Let's see Checkout, Product List.
Oops, looks like this one needed a label here.
Not that it really needs it.
Eventually, we're going to replace all this.
And then this one's the navbar.
So let's see navbar, Cart Drop down,
we needed the Product List.
And I think I also need the range selectors.
Now I'm not sure why things are going everywhere in here.
So this actually should all be in the Components section
except for the View.
So let's just make sure that everything's in there.
Sometimes it depends on where you click
on in Visual Studio code.
So Cart Drop down, or anything, we need the range selector,
that View file can also be in there.
Alright, so now let's work on fixing our route.
So in our app, that View file,
right now, we don't have an About page.
So we'll switch that to point to Checkout
and re label this for now.
Eventually, we'll actually build this whole thing
in the navbar.
So let's go ahead and save this.
That means that we're going
to have to update this route right here.
So in our Route file, that's not our Route file.
This one is it right here.
I'm going to get rid of this sort of weird route
and just make a copy of this top one.
And that is going to be the Checkout route.
And it's going to point to the Checkout component.
And that means that I do need to import
the checkout Component
just like I did the Home component here,
I also need to import Checkout.
And this needs to be from Checkout as well.
That is in our Views folder.
So let's see.
If now, when we go to Checkout,
we should be seen checked out.
Okay, well, that doesn't sound good.
So see, we did Checkout here,
we also need to make sure that in our app.view,
Checkout definitely not checked out.
So should be Checkout right here.
So Home and then Checkout.
Checkout is going to the Checkout route.
Let's make sure that in our Checkout view,
we have a label and we do have a label right there.
But somehow it's not showing up.
Let's check our error section.
It's saying that no match found for location
with path check out, let's check that out.
So maybe I did something wrong in my router.
Oh, yeah, so the path right here should also match.
Since I copied it from this path right here,
it actually copied the Route Route again.
So that's not good.
Yeah, that means that now if I go to Checkout or Home,
it's going to take me to the right place.
Everything's still working well.
And I scaffolded the app so that I had all the pieces
that I'm going to need eventually.
I think that's really great.
And we'll start filling them out in the next video.