OK, now we've got our basket summary as a shared component.
Let's just go and add it to our review component and then we'll take a look at what we need to adjust.
So we'll open up the check out review component XHTML.
And we don't have anything in here at the moment.
So what we'll do is we'll just additive and will.
Give it a class of container and margin, top of four.
And then we'll just add our app basket.
Summary in here.
And let's see how this looks on our page and we'll go to the checkout's.
And in fact, let's just go and add a couple of items in our baskets again, and we'll add a bolt and
a hat and some gloves.
So we've got something to see and we'll go to our checkout.
And at the moment, we can just skip straight to the review.
We haven't added any additional functionality.
And while this looks like it could do with some improvements, we don't have quite as much space to
work with inside here as we did in our basket component.
So it feels like we could clean up a few things in here, but what we'll do is, first of all, is will
remove the elements that we don't need.
We don't need these buttons and we do not need this column here to remove, but we do need everything
else.
So what we'll do is in our basket summary will also take an input property that's just going to be a
flag to say if it's the basket component and if it's not the basket component, then we don't want to
see any of these options.
So let's head back to the code and we'll go back to our basket summary components and we'll take an
input property so we'll say at input's.
And we'll call this is Basket's and we'll set this to true initially and we'll make use of this inside
our basket summary component.
So we'll just go through and only at the elements where we are in a basket.
For various elements now we know we don't want to see the buttons, so on less, we'll just say a dash
NGF and we'll say is basket's.
And we'll do the same thing.
For the increments.
And we'll do the same thing for the.
Remove basket item.
And we'll also use this in the table header so we can get rid of the remove row as well, so let's also
add it there.
And what we'll do is we'll just send up the property from our check out review component to the basket
summary and we want to say is basket's and we'll set the sequel to False in the case of when we're using
this inside anything other than the basket.
So let's go across and take a look and let's just refresh the page.
And we'll go to our basket and this is still fine, and we'll go to the checkout and a review and a
small improvement, we can see that the buttons have gone.
We've still got some spacing issues here as well.
And partly that's because we've got a container inside a container here, we've got the header not taking
up the full width of what's available.
So let's just remove that container and see what's going on and go back to our checkout's.
And hit the review button again, that's a bit better, but there's still a few improvements we can
make, which would certainly like this number to be centralized underneath the quantity there.
And we've got a bit too much gray with our headers inside here, so we also want to remove the background
when we're inside our check out as well.
So what we want to do is go back and take care of these elements and what we'll do for our background.
We'll just remove this as a class inside here directly for the bootstrap styling.
So we'll take out four of these.
We don't need to worry about the class on a remove one, because that's going to be not visible anyway,
because we already got an NGF there.
And what we'll do for each of these, we'll just start the class in square brackets and we'll say B.G.
Dash lights and I will set this equal to is basket's and we'll just copy this and paste it into each
of the.
Rose or the table headers, I should say.
And we'll do the same for this one, and we don't need to touch the third one and we'll see how we're
doing here.
We'll go back to the review that looks a lot cleaner and just make sure we haven't ruined our basket.
And that's fine as well, although we seem to have missed one for the total here.
Let's just refresh the page.
And no, we didn't miss one, it was just lagging behind, so we're get to check out again, make sure
the review looks fine and it does, and that's just me of the quantity into the center as well.
And if we take a look at where this is being displayed, we've got, ah, deflects a line item center.
And if we take a look at how this looks in our basket, this is in the right place.
And if we move this.
With our class, then we're probably going to move it to where we don't want to.
So let's go back and we'll also add another class.
And this time will say justify.
Dash content dash center and this time will check to make sure we're not in the basket.
Or is basket's, I should say.
And let's move this down slightly and across and let's see how we're doing now, so we'll go back and
let's just refresh the page.
And the basket is still is fine, and if we go to our checkout's.
And we take a look at the review, that's much more like it.
Maybe the font size is a little bit too big for the quantity, but I'm going to leave this as it is.
I'm quite happy with this.
So the next thing we want to look at is how we can move forwards and backwards through our step.
Obviously, we've got the tabs that we can use, but what we want our users to do is to be able to click
on buttons to move forwards and backwards as well.
That's one of the features of La Stepa that we're using.
And we'll take a look at that next.