1
00:00:04,150 --> 00:00:08,350
Hello everyone and welcome back to our bootstrap course and this lecture.

2
00:00:08,350 --> 00:00:14,800
We're going to be continuing with our landing page project and building a check out page for the user

3
00:00:14,800 --> 00:00:19,590
to purchase a project so I'm gonna go ahead and open the HMO tab.

4
00:00:19,600 --> 00:00:26,230
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

5
00:00:26,230 --> 00:00:31,030
to contain quite a lot of information so we're gonna span it or a few lectures.

6
00:00:31,030 --> 00:00:34,970
First we're gonna begin with the product information of the checkout page.

7
00:00:35,020 --> 00:00:42,190
So let's go ahead and make a new div and it's div is going to be containing the product information.

8
00:00:42,190 --> 00:00:50,590
So we're gonna make first a div class that will be for the header so you can give it the class header

9
00:00:50,620 --> 00:00:53,360
and we're gonna go ahead and close that div immediately.

10
00:00:53,590 --> 00:01:02,200
And in here we're going to put in the similar header as we had for the previous element here where we

11
00:01:02,200 --> 00:01:05,250
had pricing we had it as an H two.

12
00:01:05,410 --> 00:01:10,120
So we're gonna similarly make a similar sized header next.

13
00:01:10,120 --> 00:01:17,200
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

14
00:01:17,200 --> 00:01:22,780
ahead and close off that each to immediately and in here we're going to put in the text checkout.

15
00:01:22,780 --> 00:01:26,550
So this will be the header of our checkout page.

16
00:01:26,620 --> 00:01:31,280
Let's go ahead and enter a few times now.

17
00:01:31,320 --> 00:01:32,230
OK.

18
00:01:32,320 --> 00:01:39,790
We have our header div set up and outside of that header div we're going to make rows and columns containing

19
00:01:40,660 --> 00:01:41,870
our product information.

20
00:01:41,890 --> 00:01:48,250
So let's go ahead and make a div class of row and we can give it some padding immediately because there

21
00:01:48,250 --> 00:01:50,570
would be rows and columns.

22
00:01:50,890 --> 00:01:57,280
Give it something like this and let's close off that row and in every row we have columns.

23
00:01:57,280 --> 00:01:58,570
So let's go ahead and make another div.

24
00:01:58,570 --> 00:02:05,950
That will be of class column and it size will be four also said its order with order and D and we'll

25
00:02:05,950 --> 00:02:11,880
give us the order to and the end B for the border.

26
00:02:11,920 --> 00:02:12,160
Okay.

27
00:02:12,160 --> 00:02:18,390
And don't forget the parentheses when you declare a class you must put that class in two parentheses

28
00:02:18,940 --> 00:02:25,060
so close off that div and then inside of here we're going to make another header that is going to say

29
00:02:25,060 --> 00:02:27,540
all the information inside of the user's cart.

30
00:02:27,630 --> 00:02:31,430
So let's open an H for and this is going to be a class D flex.

31
00:02:31,430 --> 00:02:33,760
So this will make another flex box.

32
00:02:33,910 --> 00:02:40,090
We're going to also give the class justified content between to make the content justified.

33
00:02:40,090 --> 00:02:43,210
This will make it spaced out properly.

34
00:02:43,240 --> 00:02:48,320
We're also going to align the items to the centre and add a border.

35
00:02:49,020 --> 00:02:49,420
OK.

36
00:02:49,570 --> 00:02:56,170
Let's close off the H for and inside of H four we're gonna put in text.

37
00:02:56,170 --> 00:03:02,620
So first we're gonna add the header your cart and we're gonna put this inside of a span that will style

38
00:03:02,620 --> 00:03:08,770
the text to be muted so it's open that span right away and it close it right away and then we'll put

39
00:03:08,890 --> 00:03:15,730
your cart in here we can put in the number of elements in the user's cart so we can open up another

40
00:03:15,730 --> 00:03:18,390
span and this will be of class batch.

41
00:03:18,460 --> 00:03:23,630
This is a bootstrap class that will make a stout batch and we'll to make it also.

42
00:03:23,630 --> 00:03:30,510
The cost per head secondary to make it a great colour and make it badged pill to make it in a pill shape.

43
00:03:30,760 --> 00:03:32,420
This will have a neat effect.

44
00:03:32,440 --> 00:03:36,610
And let's close that span class and in here we're gonna put the number of items in the cart.

45
00:03:36,610 --> 00:03:39,270
So right now there is just one item.

46
00:03:39,730 --> 00:03:44,950
But let's suppose the user wanted to put in more items such as buying three copies of something to give

47
00:03:44,950 --> 00:03:45,960
to a friend.

48
00:03:46,180 --> 00:03:50,010
Well in order to change this number we would have to implement G.

49
00:03:50,020 --> 00:03:58,000
Query and or note or any sort of JavaScript functionality that would update the number based on actions

50
00:03:58,000 --> 00:03:59,980
that the user performs.

51
00:03:59,980 --> 00:04:04,750
Now bootstrap is just front end which means it doesn't handle user interaction.

52
00:04:04,750 --> 00:04:06,520
That would be back end.

53
00:04:06,550 --> 00:04:08,330
So we're just gonna leave this at one for now.

54
00:04:08,760 --> 00:04:11,920
OK so we have the header now for this.

55
00:04:12,010 --> 00:04:17,560
Next we're gonna add a list that will contain some information.

56
00:04:17,560 --> 00:04:22,810
So let's go ahead and put in the product information here and open and unordered list and this will

57
00:04:22,810 --> 00:04:28,860
be an unheard list and this will be a class list group which will style this was a list.

58
00:04:28,900 --> 00:04:35,800
You can also add and B3 and we can close that unordered list now in here we're going to have information

59
00:04:35,800 --> 00:04:41,030
about the product as well as showing the coupon that's applied.

60
00:04:41,050 --> 00:04:45,390
So let's go ahead and put that in here right now.

61
00:04:45,610 --> 00:04:53,680
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

62
00:04:53,680 --> 00:04:59,290
times so let's close it off immediately and actually two times we're just going to have one for the

63
00:04:59,290 --> 00:05:01,780
product and another for the price.

64
00:05:01,910 --> 00:05:03,670
It's going to add one more time.

65
00:05:03,700 --> 00:05:03,980
OK.

66
00:05:03,980 --> 00:05:11,840
And then below that we are going to have a button that will allow the user to redeem coupon.

67
00:05:12,020 --> 00:05:20,300
So just going to make this a form of class card and I'm gonna close that form.

68
00:05:20,300 --> 00:05:28,010
This is a form because it will allow the user to put in an input a promo code as an input and then redeem

69
00:05:28,010 --> 00:05:31,220
that promo code the promotional code for a coupon.

70
00:05:31,460 --> 00:05:36,980
Let's go ahead and test how this code looks so far because we've set up quite a bit of skeleton code

71
00:05:36,980 --> 00:05:40,310
and we're gonna add in some more information into this list.

72
00:05:40,310 --> 00:05:41,940
Let's preview it now.

73
00:05:41,990 --> 00:05:48,710
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

74
00:05:48,710 --> 00:05:55,710
percent and we can scroll down and now we see we have the template for a checkout field.

75
00:05:55,730 --> 00:05:59,720
Now right now this is kind of bare bones and it doesn't have much but that's just because we have a

76
00:05:59,720 --> 00:06:05,260
skeleton up there as you can see we have this pill form out of the button and we have the text checkout

77
00:06:05,300 --> 00:06:07,560
which looks very similar to the text pricing.

78
00:06:07,570 --> 00:06:14,120
Now first we're gonna style this and add more detail to it but at least we know that it's working the

79
00:06:14,120 --> 00:06:18,800
skeleton it's high the output now and continue filling in this information.

80
00:06:18,860 --> 00:06:26,270
So what we're going to need is in each list item we're going to put in necessary information.

81
00:06:26,270 --> 00:06:31,760
So for the first list group item we have to first say that all of its contents are going to be flexed

82
00:06:31,850 --> 00:06:37,810
for responsively as well as justified between to make sure they're spaced out properly.

83
00:06:37,820 --> 00:06:45,800
We can also give it a background of light because we're on a dark screen here in terms of the website

84
00:06:46,780 --> 00:06:47,790
setup.

85
00:06:47,810 --> 00:06:48,320
Ok great.

86
00:06:48,320 --> 00:06:51,540
So now we have a background light in here.

87
00:06:51,560 --> 00:06:59,480
We're going to put in the promo code information so we're gonna use the div class of text success which

88
00:06:59,480 --> 00:07:06,860
will style this text after the user has put in a promo code and we're going to open up in each five

89
00:07:07,720 --> 00:07:14,360
and we're gonna give it the class of what we can add zero padding or just leave it as is depending on

90
00:07:14,360 --> 00:07:21,320
how it will look at me and and we're going to close at each five tag immediately by default headers

91
00:07:21,320 --> 00:07:27,810
will have padding so you can give them zero padding if you want to override that in the H5 we're gonna

92
00:07:27,830 --> 00:07:29,450
write promo code.

93
00:07:29,480 --> 00:07:36,800
So this is going to prompt the user afterward to enter a promo code and once the promo code has been

94
00:07:36,800 --> 00:07:39,600
applied we'll show that it has been applied here.

95
00:07:39,710 --> 00:07:46,700
So again to actually implement that will need backend functionality with javascript but we can set up

96
00:07:46,700 --> 00:07:53,310
the initial front end of what it would look like when the user put in a promo code.

97
00:07:53,420 --> 00:08:02,570
So we have the promo code itself and we can also add in some text that says sale in a small font and

98
00:08:02,580 --> 00:08:04,500
then close div off.

99
00:08:04,710 --> 00:08:14,140
You can also add just below these div of Texas success look at a span that is also Texas success and

100
00:08:14,150 --> 00:08:21,340
you can close that span off and in here we can put the actual price of the product just four hundred

101
00:08:21,340 --> 00:08:24,660
five point nine.

102
00:08:24,680 --> 00:08:30,700
Now this is the actual price minus the promo so however much the user saved will be here.

103
00:08:30,700 --> 00:08:36,590
So if they save 10 dollars it would show that they had minus 10 dollars so they saved 10.

104
00:08:36,770 --> 00:08:41,810
And in this case they're saving four hundred five point nine because our regular price is four ninety

105
00:08:41,810 --> 00:08:45,290
nine tweet which we wrote earlier.

106
00:08:45,340 --> 00:08:45,820
Okay great.

107
00:08:45,820 --> 00:08:49,090
So that is everything we need for this list item.

108
00:08:49,150 --> 00:08:57,610
Let's go ahead and fill the next list item which is going to show the at the final price of the user's

109
00:08:57,610 --> 00:08:58,030
cart.

110
00:08:58,540 --> 00:09:03,310
So we have the list group item and similarly to the previous item we need to add that it's going to

111
00:09:03,310 --> 00:09:07,450
be flexed also to justify the content between.

112
00:09:07,450 --> 00:09:10,750
Which means that all the content will be spread out evenly.

113
00:09:10,750 --> 00:09:11,540
OK.

114
00:09:11,590 --> 00:09:18,790
Now I would add a span and close of that span and we're going to write the total that the user must

115
00:09:18,790 --> 00:09:22,570
pay with their credit card et cetera.

116
00:09:22,660 --> 00:09:34,850
And let's also open up a strong element now this will make a darker themed and styled text and this

117
00:09:34,860 --> 00:09:43,140
will also tell the document object model and for SEO that this text is slightly more important than

118
00:09:43,140 --> 00:09:44,360
a regular paragraph.

119
00:09:45,060 --> 00:09:51,720
And we're going to give this the regular price or these the total price of the user's card which in

120
00:09:51,720 --> 00:09:54,910
this case would be 499 because they have one item.

121
00:09:55,110 --> 00:09:58,390
And finally we're going to add in a card.

122
00:09:58,410 --> 00:10:03,930
Let's give it some padding immediately because this card is going to be where they can input a promo

123
00:10:03,930 --> 00:10:04,690
code.

124
00:10:04,770 --> 00:10:07,400
So a promo code has already been applied up here.

125
00:10:07,620 --> 00:10:13,230
But if they wanted to put in another one or if they hadn't put one in yet then we want to give that

126
00:10:13,320 --> 00:10:15,150
option down here.

127
00:10:15,150 --> 00:10:19,190
Let's go ahead and open a class called input group.

128
00:10:19,190 --> 00:10:26,190
Now make sure it's properly capitalized because the names are case sensitive.

129
00:10:26,610 --> 00:10:30,810
So a capital ie an input is different from a lowercase i an input.

130
00:10:31,500 --> 00:10:33,410
So make sure you avoid those errors.

131
00:10:33,420 --> 00:10:38,240
Let's open up an input element and we'll give it type text.

132
00:10:38,520 --> 00:10:42,130
If we only wanted to allow numbers you could do numbers here.

133
00:10:42,150 --> 00:10:45,480
We do email etc. But we want to allow all sorts of characters.

134
00:10:45,510 --> 00:10:52,980
So the type is text and the class is gonna be form control and the place holder is going to be promo

135
00:10:52,980 --> 00:10:53,400
code.

136
00:10:54,420 --> 00:11:03,450
OK you can go ahead and leave that as is because input elements are self closing and now still in the

137
00:11:03,450 --> 00:11:11,760
form and in the input group going to add a button inside of a new class that we haven't seen before

138
00:11:11,760 --> 00:11:15,150
called input group append.

139
00:11:15,210 --> 00:11:20,400
Now this will add an element to the input group.

140
00:11:20,400 --> 00:11:26,730
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

141
00:11:26,730 --> 00:11:31,680
summit which means it's a submit button and its costs are going to be the bootstrap class button and

142
00:11:31,680 --> 00:11:33,150
button secondary.

143
00:11:33,150 --> 00:11:39,720
You can also use button primary button warning etc. any button you want and you can also override the

144
00:11:39,780 --> 00:11:45,660
bootstrap styling in your own CFS and in here we need the text of the button which is going to be redeem

145
00:11:46,320 --> 00:11:48,250
because this is to redeem the coupon code.

146
00:11:49,370 --> 00:11:50,190
Okay excellent.

147
00:11:50,220 --> 00:11:55,350
Any Button tag must be closed and all the devs are properly closed just great.

148
00:11:55,350 --> 00:11:58,810
So that is all that we need for the first part of our checkout page.

149
00:11:58,830 --> 00:12:02,160
The product information and the user's cart.

150
00:12:02,370 --> 00:12:09,180
We're also going to set up sections for the billing information so the user's address as well as their

151
00:12:09,180 --> 00:12:10,980
credit card information.

152
00:12:11,130 --> 00:12:16,440
Not every landing page will require the billing address but some might.

153
00:12:16,440 --> 00:12:18,180
So we're gonna show you how to build that.

154
00:12:18,210 --> 00:12:20,400
Let's go ahead and test what we have so far.

155
00:12:20,400 --> 00:12:25,400
So I'm gonna go ahead and click on the output when you're testing make sure that you are at 100 percent

156
00:12:25,440 --> 00:12:30,780
zoom because sometimes you might be at a large percent.

157
00:12:30,780 --> 00:12:34,620
So this is what it looks like at a hundred percent zoom on mobiles we have the pricing and we have the

158
00:12:34,620 --> 00:12:35,390
checkout here.

159
00:12:35,400 --> 00:12:38,710
And as you can see now we have a bit more styling here.

160
00:12:38,790 --> 00:12:40,950
The Checkout is still great but we'll fix that later.

161
00:12:40,950 --> 00:12:44,490
It's fine but we have your cart here in a muted color.

162
00:12:44,490 --> 00:12:53,700
We also have a promo code information in this green color and we have the total of the user's cart and

163
00:12:53,700 --> 00:12:54,960
we have a promo code.

164
00:12:54,960 --> 00:13:01,410
The user can enter an information like crude you can enter in a code to put in here and then click redeem

165
00:13:02,160 --> 00:13:06,390
but you'll notice right now when we click redeem nothing happens that's because we're just working with

166
00:13:06,390 --> 00:13:07,530
the front end.

167
00:13:07,630 --> 00:13:12,850
We haven't worked with the back end just hit run with J to reset that.

168
00:13:13,530 --> 00:13:21,200
But if you wanted the button to work I challenge you to add in javascript to add in backend functionality.

169
00:13:21,210 --> 00:13:21,670
Okay great.

170
00:13:21,680 --> 00:13:27,030
We can hide the output now and that is everything that we need so far for the checkout page.

171
00:13:27,020 --> 00:13:29,850
I'm gonna pause here because we set up a third of it.

172
00:13:29,850 --> 00:13:31,750
We've set up the product information.

173
00:13:31,740 --> 00:13:34,960
And next we're going to set up more here.

174
00:13:35,040 --> 00:13:37,260
We're going to set up the billing information next.

175
00:13:37,260 --> 00:13:40,440
So thank you all for watching and we'll see you in the next lecture.