So we've now got three components configured that could be improved a little bit, but we'll deal with
that shortly.
For now, what we'll do is we'll add the buttons so that we can move forwards and backwards underneath
each of these elements as well.
And to do that, what would you go back to the code?
And once again, I'm just going to clean up all of this.
And we'll start with our check out.
Address components and underneath this form.
What we'll do is we'll get innovative and we'll give it a class of float that Qanun.
And display, flex, flex.
And then we want to justify the content between the buttons.
So you justify contempt between and then you say flex dash column.
And then we'll say flex dash algae, dash ro.
And just to add, yet another class in here will also add margin bottom of five as well.
And what we'll do is we'll add a button and we'll give this a class as well and say beaten and beaten
dash outline the primary.
And this is going to be a route to link back to our Baskett.
So we'll see which link, forward slash and basket's.
And inside the button, text, what will do?
Is will add an icon to say I and will replace a class of F.A., F.A. Dasch, Àngel.
That left and to the right of the icon and will other space and say back to Basket's.
And below this button will add another one, so I'll just copy this.
And to give this a bit more emphasis, we'll just take out the outline of this one.
And instead of a brutal link here, what we use is a CDK step, a function, and we'll say CDK Stepa
next, and this is a directive we don't need to configure, this is automatically going to know what
the next step is based on.
The Stepa functionality will change the icon to.
And go right and we'll move our text to the left of this.
And one at the space and just paste in and we'll say go to delivery.
And if we just take a look and see how this looks on our page at the moment, we'll just go back to
the browser and we can see we've got our back to the basket button, which takes us back to the basket.
And if we go to our checkout again and we click on Go to Delivery, it takes us to the next step.
Now, it's not ideal, but I am going to copy and paste these into each of our step components, I did
try making this adding this to the app Stepa, but it gets a bit out of control when we need to add
different functionality to the individual steps and facinelli steps.
We're going to need to do something when the user clicks on the button.
So in order to maintain control over what's going on with these buttons inside each component.
I found the best way is is literally just to copy and paste and get this and change the individual elements
in the next component.
So we'll go to the check out.
Delivery component next.
And get him out and we'll just paste in the button there.
And this is going to be back to address in this case, and this is going to be go to review.
And instead of the Richling Cable News, CDK Stepa previous.
And we'll just copy this into the payment review option, so we'll open up, check out payments or check
out a review page Temel and we'll paste in the buttons under here as well.
And this one's going to be back to delivery and this one's going to be go to payment.
And we'll also at these to our payment option, even though we haven't done anything with it yet, let's
just open up the check out payment HTML and we'll just paste in the buttons so we're ready for when
we use them.
And this is going to be back to review and this is going to be submit order.
And we'll remove the CDK Stepa next from this one, because this is the one where we're going to take
the payment from the card and if the order is successful and we we're going to want to redirect Slome
to the success page.
So let's take a look and see how this looks on our check out component so we can go to delivery, we
can go to review, we can go to payments and back and back and back.
And that's fine.
What we'll also do, because we want to start checking for completeness in these components and we'll
also add the status of the step to the top here just so that we can visually see.
If the step is considered complete, so we'll go back to our app Stepa.
Or stepa component, I should say, and we want to go to our e-mail.
And this is just for us at the moment, so we got an easy visual clue as to whether or not the step
has been completed.
So just next to the label will add step dot completed.
And this is going to tell us the current status of these steps, so we'll go back to the browser.
And let's just refresh the page.
And we can see that they're all completed as set of false at this moment, and as we click through,
you can see that the status changes to true.
Now we want more control over less than what we've just seen there.
We don't want.
Our users to be able to just click through and immediately complete if they haven't completed the address,
for example, but we're going to be implementing that functionality very soon.
And what we'll look at next is how we can control the form status and whether this is valid and match
it up with our app step here so that this marks is true when we've got a successfully completed form.