Hello everyone and welcome back to our bootstrap course and this lecture.
We're going to be continuing with our landing page project and building a check out page for the user
to purchase a project so I'm gonna go ahead and open the HMO tab.
And here I have a div setup for the check out and in here I'm going to make more divs and this is going
to contain quite a lot of information so we're gonna span it or a few lectures.
First we're gonna begin with the product information of the checkout page.
So let's go ahead and make a new div and it's div is going to be containing the product information.
So we're gonna make first a div class that will be for the header so you can give it the class header
and we're gonna go ahead and close that div immediately.
And in here we're going to put in the similar header as we had for the previous element here where we
had pricing we had it as an H two.
So we're gonna similarly make a similar sized header next.
So inside of the div we're gonna open it each to it's going to be of the class display for let's go
ahead and close off that each to immediately and in here we're going to put in the text checkout.
So this will be the header of our checkout page.
Let's go ahead and enter a few times now.
OK.
We have our header div set up and outside of that header div we're going to make rows and columns containing
our product information.
So let's go ahead and make a div class of row and we can give it some padding immediately because there
would be rows and columns.
Give it something like this and let's close off that row and in every row we have columns.
So let's go ahead and make another div.
That will be of class column and it size will be four also said its order with order and D and we'll
give us the order to and the end B for the border.
Okay.
And don't forget the parentheses when you declare a class you must put that class in two parentheses
so close off that div and then inside of here we're going to make another header that is going to say
all the information inside of the user's cart.
So let's open an H for and this is going to be a class D flex.
So this will make another flex box.
We're going to also give the class justified content between to make the content justified.
This will make it spaced out properly.
We're also going to align the items to the centre and add a border.
OK.
Let's close off the H for and inside of H four we're gonna put in text.
So first we're gonna add the header your cart and we're gonna put this inside of a span that will style
the text to be muted so it's open that span right away and it close it right away and then we'll put
your cart in here we can put in the number of elements in the user's cart so we can open up another
span and this will be of class batch.
This is a bootstrap class that will make a stout batch and we'll to make it also.
The cost per head secondary to make it a great colour and make it badged pill to make it in a pill shape.
This will have a neat effect.
And let's close that span class and in here we're gonna put the number of items in the cart.
So right now there is just one item.
But let's suppose the user wanted to put in more items such as buying three copies of something to give
to a friend.
Well in order to change this number we would have to implement G.
Query and or note or any sort of JavaScript functionality that would update the number based on actions
that the user performs.
Now bootstrap is just front end which means it doesn't handle user interaction.
That would be back end.
So we're just gonna leave this at one for now.
OK so we have the header now for this.
Next we're gonna add a list that will contain some information.
So let's go ahead and put in the product information here and open and unordered list and this will
be an unheard list and this will be a class list group which will style this was a list.
You can also add and B3 and we can close that unordered list now in here we're going to have information
about the product as well as showing the coupon that's applied.
So let's go ahead and put that in here right now.
So we're going to make a list item that will be of Class A list group item and we're gonna do that three
times so let's close it off immediately and actually two times we're just going to have one for the
product and another for the price.
It's going to add one more time.
OK.
And then below that we are going to have a button that will allow the user to redeem coupon.
So just going to make this a form of class card and I'm gonna close that form.
This is a form because it will allow the user to put in an input a promo code as an input and then redeem
that promo code the promotional code for a coupon.
Let's go ahead and test how this code looks so far because we've set up quite a bit of skeleton code
and we're gonna add in some more information into this list.
Let's preview it now.
So I'm going to go to the output and I'm a bit zoomed out so I zoomed in so going to zoom out to 100
percent and we can scroll down and now we see we have the template for a checkout field.
Now right now this is kind of bare bones and it doesn't have much but that's just because we have a
skeleton up there as you can see we have this pill form out of the button and we have the text checkout
which looks very similar to the text pricing.
Now first we're gonna style this and add more detail to it but at least we know that it's working the
skeleton it's high the output now and continue filling in this information.
So what we're going to need is in each list item we're going to put in necessary information.
So for the first list group item we have to first say that all of its contents are going to be flexed
for responsively as well as justified between to make sure they're spaced out properly.
We can also give it a background of light because we're on a dark screen here in terms of the website
setup.
Ok great.
So now we have a background light in here.
We're going to put in the promo code information so we're gonna use the div class of text success which
will style this text after the user has put in a promo code and we're going to open up in each five
and we're gonna give it the class of what we can add zero padding or just leave it as is depending on
how it will look at me and and we're going to close at each five tag immediately by default headers
will have padding so you can give them zero padding if you want to override that in the H5 we're gonna
write promo code.
So this is going to prompt the user afterward to enter a promo code and once the promo code has been
applied we'll show that it has been applied here.
So again to actually implement that will need backend functionality with javascript but we can set up
the initial front end of what it would look like when the user put in a promo code.
So we have the promo code itself and we can also add in some text that says sale in a small font and
then close div off.
You can also add just below these div of Texas success look at a span that is also Texas success and
you can close that span off and in here we can put the actual price of the product just four hundred
five point nine.
Now this is the actual price minus the promo so however much the user saved will be here.
So if they save 10 dollars it would show that they had minus 10 dollars so they saved 10.
And in this case they're saving four hundred five point nine because our regular price is four ninety
nine tweet which we wrote earlier.
Okay great.
So that is everything we need for this list item.
Let's go ahead and fill the next list item which is going to show the at the final price of the user's
cart.
So we have the list group item and similarly to the previous item we need to add that it's going to
be flexed also to justify the content between.
Which means that all the content will be spread out evenly.
OK.
Now I would add a span and close of that span and we're going to write the total that the user must
pay with their credit card et cetera.
And let's also open up a strong element now this will make a darker themed and styled text and this
will also tell the document object model and for SEO that this text is slightly more important than
a regular paragraph.
And we're going to give this the regular price or these the total price of the user's card which in
this case would be 499 because they have one item.
And finally we're going to add in a card.
Let's give it some padding immediately because this card is going to be where they can input a promo
code.
So a promo code has already been applied up here.
But if they wanted to put in another one or if they hadn't put one in yet then we want to give that
option down here.
Let's go ahead and open a class called input group.
Now make sure it's properly capitalized because the names are case sensitive.
So a capital ie an input is different from a lowercase i an input.
So make sure you avoid those errors.
Let's open up an input element and we'll give it type text.
If we only wanted to allow numbers you could do numbers here.
We do email etc. But we want to allow all sorts of characters.
So the type is text and the class is gonna be form control and the place holder is going to be promo
code.
OK you can go ahead and leave that as is because input elements are self closing and now still in the
form and in the input group going to add a button inside of a new class that we haven't seen before
called input group append.
Now this will add an element to the input group.
So in order to do that we're going to go ahead and open up a button element it's going to be of type
summit which means it's a submit button and its costs are going to be the bootstrap class button and
button secondary.
You can also use button primary button warning etc. any button you want and you can also override the
bootstrap styling in your own CFS and in here we need the text of the button which is going to be redeem
because this is to redeem the coupon code.
Okay excellent.
Any Button tag must be closed and all the devs are properly closed just great.
So that is all that we need for the first part of our checkout page.
The product information and the user's cart.
We're also going to set up sections for the billing information so the user's address as well as their
credit card information.
Not every landing page will require the billing address but some might.
So we're gonna show you how to build that.
Let's go ahead and test what we have so far.
So I'm gonna go ahead and click on the output when you're testing make sure that you are at 100 percent
zoom because sometimes you might be at a large percent.
So this is what it looks like at a hundred percent zoom on mobiles we have the pricing and we have the
checkout here.
And as you can see now we have a bit more styling here.
The Checkout is still great but we'll fix that later.
It's fine but we have your cart here in a muted color.
We also have a promo code information in this green color and we have the total of the user's cart and
we have a promo code.
The user can enter an information like crude you can enter in a code to put in here and then click redeem
but you'll notice right now when we click redeem nothing happens that's because we're just working with
the front end.
We haven't worked with the back end just hit run with J to reset that.
But if you wanted the button to work I challenge you to add in javascript to add in backend functionality.
Okay great.
We can hide the output now and that is everything that we need so far for the checkout page.
I'm gonna pause here because we set up a third of it.
We've set up the product information.
And next we're going to set up more here.
We're going to set up the billing information next.
So thank you all for watching and we'll see you in the next lecture.