1
00:00:04,010 --> 00:00:06,770
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,860 --> 00:00:11,870
In this lecture we're going to be continuing with our checkout page by adding some selections and selection

3
00:00:11,870 --> 00:00:14,740
boxes for country and state and zip code.

4
00:00:14,750 --> 00:00:20,360
Continuing with this address section let's go ahead and open up our e-mail.

5
00:00:20,370 --> 00:00:26,750
We can hide the output and let's zoom in a little bit here and scroll down to where we have a checkbox

6
00:00:27,470 --> 00:00:31,610
or our checkout with our various checkout sections.

7
00:00:31,610 --> 00:00:37,490
So we have the sections for email and address and just below that is where we're going to put in more

8
00:00:37,490 --> 00:00:40,580
sections for the country and the state.

9
00:00:40,610 --> 00:00:44,140
So we're going to actually open up another road just like we have here.

10
00:00:44,540 --> 00:00:50,420
And in this row we're going to put in several columns for the first column is going to be of size five

11
00:00:50,450 --> 00:00:51,410
for the width.

12
00:00:51,410 --> 00:00:54,490
And this is going to be the country.

13
00:00:54,510 --> 00:01:01,370
So let's make a label and say that it's for country and it's close off that label immediately and the

14
00:01:01,370 --> 00:01:03,880
label will be the word country.

15
00:01:03,890 --> 00:01:07,550
And next we're going to make a selection field and to do that.

16
00:01:07,580 --> 00:01:07,820
Good.

17
00:01:07,820 --> 00:01:12,450
Open up the select tag and let's go to the class custom select.

18
00:01:12,530 --> 00:01:18,650
So as you block and said it's with two 100 you can also give it the idea of country.

19
00:01:18,650 --> 00:01:23,880
So this is the selection field pertaining to the label.

20
00:01:23,960 --> 00:01:32,030
Let's go ahead and close off this select tag and inside of the Select tag we're going to put in several

21
00:01:32,030 --> 00:01:33,290
options.

22
00:01:33,290 --> 00:01:36,140
Now you can put in as many options as we'd like for example.

23
00:01:36,140 --> 00:01:45,470
Option value you should always begin with a empty value and write the word choose to allow the user

24
00:01:45,470 --> 00:01:47,520
to choose an option.

25
00:01:47,630 --> 00:01:53,750
Then after that you can put in any country that you want such as United States and you can also add

26
00:01:53,750 --> 00:02:02,090
another option Canada and you can keep going and add more options as you wanted to.

27
00:02:02,150 --> 00:02:07,420
Such as England et cetera.

28
00:02:07,500 --> 00:02:10,610
So you could add more here if you'd like or leave it at that for now.

29
00:02:10,800 --> 00:02:16,340
And after this selection tag we're going to make another column.

30
00:02:16,350 --> 00:02:18,700
So this column is all done.

31
00:02:18,700 --> 00:02:26,280
It's just going to contain our label and are a select tag below that.

32
00:02:26,290 --> 00:02:30,330
We're gonna make another column just below this column this time.

33
00:02:30,340 --> 00:02:32,380
This is going to be for the selection of the state.

34
00:02:32,380 --> 00:02:34,090
So let's go ahead and make a give.

35
00:02:34,090 --> 00:02:41,620
Class is going to be of class call MDG 4 and we can also add it.

36
00:02:41,700 --> 00:02:43,930
Spacing immediately as well.

37
00:02:44,230 --> 00:02:50,230
And we can close off that div and now in this column we're going to make another label.

38
00:02:50,320 --> 00:02:57,400
This time is going to be for the selection state and we'll go ahead and close that label tag immediately

39
00:02:57,880 --> 00:03:01,990
and in hand we're gonna put in the label which is state and then below the label we want to make the

40
00:03:01,990 --> 00:03:07,990
selection field pertaining to this label through and open up a select tag.

41
00:03:08,170 --> 00:03:12,770
And we're gonna give it the same class as before customers select as well as the block.

42
00:03:12,790 --> 00:03:19,720
And with 100 Joseph visited previously and this time have to give it an I.D. as a label can find it

43
00:03:20,230 --> 00:03:23,050
and its idea will be state.

44
00:03:23,240 --> 00:03:23,650
OK.

45
00:03:24,020 --> 00:03:29,470
Think we can close off that select tag and let's go ahead and put in some options.

46
00:03:29,470 --> 00:03:32,890
So this would be the option for this state.

47
00:03:32,890 --> 00:03:41,650
So if you had a different country you would have to change this select button dynamically to display

48
00:03:41,650 --> 00:03:47,380
different states or provinces depending on what the country has for now let's begin though with the

49
00:03:47,380 --> 00:03:51,700
default of Count California and the United States.

50
00:03:51,760 --> 00:03:57,790
So we're gonna give it the value of empty as a first option and then right choose to prompt the user

51
00:03:57,790 --> 00:03:59,650
to choose a state.

52
00:04:00,080 --> 00:04:04,580
And I'm going to put in a state like California and New York.

53
00:04:04,610 --> 00:04:11,040
Let's go ahead and add a few options and of course you can add more options as you like.

54
00:04:11,540 --> 00:04:12,160
Okay great.

55
00:04:12,190 --> 00:04:16,270
So now we have options for the state as well.

56
00:04:16,270 --> 00:04:20,320
The last thing we need for every address is a zip code.

57
00:04:20,320 --> 00:04:23,740
But before we do that let's go ahead and test how this looks all so far.

58
00:04:23,740 --> 00:04:29,710
So I'm going to go to the output and I'm going to zoom out to 100 percent here and scroll all the way

59
00:04:29,710 --> 00:04:37,710
down to where I have my new fields here with a tab to choose the country and a tab to choose the state.

60
00:04:37,930 --> 00:04:40,840
And let's look at this from the full screen as well.

61
00:04:40,990 --> 00:04:45,370
So on the full screen Lotus they are going to be just below this address because it's all part of the

62
00:04:45,370 --> 00:04:46,390
billing address.

63
00:04:46,600 --> 00:04:51,330
And you'll notice it's not coming here to the card section it's just stopping here.

64
00:04:51,370 --> 00:04:51,570
Okay.

65
00:04:51,580 --> 00:04:52,930
Excellent well this is looking great so far.

66
00:04:52,930 --> 00:04:56,820
Let's go ahead and carry on by opening up the East hymnal again and hiding the output.

67
00:04:57,010 --> 00:05:00,990
And I'm going to zoom in and next are going to add in another column for these zip code.

68
00:05:01,000 --> 00:05:08,270
So this is going to be just outside of this next column here.

69
00:05:08,530 --> 00:05:09,250
OK.

70
00:05:09,430 --> 00:05:12,700
So I'm gonna just put in another column and notice it all still in the same room.

71
00:05:14,260 --> 00:05:16,560
So this time it's going to be div class.

72
00:05:16,580 --> 00:05:19,860
Call MDA 3 so slightly smaller.

73
00:05:19,880 --> 00:05:21,690
You can give it spacing immediately.

74
00:05:21,700 --> 00:05:23,440
That's pretty standard to do.

75
00:05:23,500 --> 00:05:30,050
And after we add in the spacing we're gonna add in a label and we're gonna say it's for zip code and

76
00:05:30,040 --> 00:05:35,350
we're going to close off that label tag as well and we're going to give it the text zip code so the

77
00:05:35,350 --> 00:05:38,520
user knows to put in their zip code and then we can put in an input field.

78
00:05:38,530 --> 00:05:40,880
So we're going to make an input tag.

79
00:05:41,000 --> 00:05:44,480
Andrew is going to be of type text as is typical for a zip code.

80
00:05:44,530 --> 00:05:48,970
It could also be number but because we're allowing multiple countries we're going to use text because

81
00:05:49,150 --> 00:05:51,520
many zip codes use letters as well.

82
00:05:51,520 --> 00:05:59,050
And then we're going to give us the class of form control and the idea of zip OK or zip code rather.

83
00:05:59,260 --> 00:06:04,990
Yes because it has to match the four I.D. here the label.

84
00:06:04,990 --> 00:06:05,960
OK.

85
00:06:06,190 --> 00:06:06,700
Yes I see.

86
00:06:06,790 --> 00:06:09,580
We're getting a red error because there's a hyphen here instead sort of an equal signs.

87
00:06:09,580 --> 00:06:10,300
We'll just fix that.

88
00:06:10,840 --> 00:06:11,040
OK.

89
00:06:11,050 --> 00:06:11,450
Excellent.

90
00:06:11,440 --> 00:06:12,900
And the air has disappeared.

91
00:06:12,940 --> 00:06:13,180
OK.

92
00:06:13,180 --> 00:06:16,560
So that is all that we need to set up these zip code.

93
00:06:16,570 --> 00:06:16,990
Great.

94
00:06:16,990 --> 00:06:25,300
Now we can also add in a also typical standard element which is to check that your shipping address

95
00:06:25,300 --> 00:06:30,130
is the same as the billing address and whether or not you want to save your information to be remembered.

96
00:06:30,700 --> 00:06:33,490
So let's go ahead and add those as well.

97
00:06:33,490 --> 00:06:35,650
So this time this is going to be outside of the row.

98
00:06:35,650 --> 00:06:38,290
We're gonna make a new row for this.

99
00:06:38,290 --> 00:06:45,760
So let's go ahead and open up a div and we're going to make it of the class custom control and custom

100
00:06:45,820 --> 00:06:46,450
checkbox.

101
00:06:46,450 --> 00:06:53,140
So this will create a checkbox using Bootstrap styling and boxes are commonly used so they are a great

102
00:06:53,140 --> 00:06:54,370
class to know.

103
00:06:54,370 --> 00:06:58,090
Let's go ahead and open up an input and we're going to say it's of type checkbox and just like that

104
00:06:58,090 --> 00:07:04,180
we are making an input field not just of putting in text but this time to check yes or no we're also

105
00:07:04,180 --> 00:07:11,890
going to give it the class custom control input and we can give it the same address.

106
00:07:11,890 --> 00:07:12,130
Okay.

107
00:07:12,160 --> 00:07:21,590
And just below that we can make a label with the class custom control label to say it's for the same

108
00:07:21,730 --> 00:07:29,060
dress and this label is going to be prompting the user to check the checkbox if they're shipping addresses

109
00:07:29,090 --> 00:07:37,690
the same as their billing address and say shipping address is the same as I'm going the address.

110
00:07:37,700 --> 00:07:38,210
Okay great.

111
00:07:38,240 --> 00:07:40,730
So now we have that div setup.

112
00:07:40,970 --> 00:07:46,820
Let's add one more checkbox using a very similar structure to let the user decide whether or not they

113
00:07:46,820 --> 00:07:48,930
want to save their information for next time.

114
00:07:48,960 --> 00:07:55,280
We're going to open up a new div of class custom control and custom checkbox and let's go ahead and

115
00:07:55,310 --> 00:08:00,640
close off that div and we're gonna make it input type checkbox again.

116
00:08:00,980 --> 00:08:09,660
And a class of class custom control and put against following the same structure and ideas is going

117
00:08:09,660 --> 00:08:13,900
to be save information.

118
00:08:13,920 --> 00:08:14,500
Okay great.

119
00:08:14,550 --> 00:08:20,900
Let's add a label for this input so label for save information.

120
00:08:20,900 --> 00:08:28,830
Can I give it the class custom control label and then let's go ahead and close off the label immediately

121
00:08:29,280 --> 00:08:36,540
and we're going to put in the texture is going to be save my address so that they can save it for the

122
00:08:36,540 --> 00:08:38,040
next purchase.

123
00:08:38,040 --> 00:08:38,760
Okay great.

124
00:08:38,760 --> 00:08:46,470
So now we have a custom checkbox setup and one for the shipping address to be the same as the billing

125
00:08:46,470 --> 00:08:49,710
and the other one for saving information for next time.

126
00:08:49,710 --> 00:08:52,370
Let's go ahead and test how all this looks before we continue.

127
00:08:52,380 --> 00:08:56,200
So I'm going to go to the output and scroll all the way down to the end.

128
00:08:56,330 --> 00:08:59,260
And as you can see now we have these two checkboxes now.

129
00:08:59,460 --> 00:09:03,950
I would remove some of the margin and padding on the left and right about have to zoom out to 100.

130
00:09:03,960 --> 00:09:04,410
OK.

131
00:09:04,450 --> 00:09:09,300
It looks a bit better when you zoom out to 100 percent but still you could reduce the margin and padding

132
00:09:09,300 --> 00:09:15,090
a little bit on the left and right by changing the bootstrap value or by using custom CFS.

133
00:09:15,090 --> 00:09:18,600
But as you can see now we have the checkboxes here with this nice blue color when you check on them

134
00:09:18,660 --> 00:09:21,500
and we can preview this in full screen mode as well.

135
00:09:21,540 --> 00:09:27,870
And as you can see this is on its own row these three elements are on their own row and these two buttons

136
00:09:28,050 --> 00:09:30,240
are on their own row as well.

137
00:09:30,960 --> 00:09:34,470
So that is great because it spaces everything out nicely.

138
00:09:34,590 --> 00:09:34,820
Okay.

139
00:09:34,830 --> 00:09:38,080
In the next lecture we're going to be adding more content to the checkout page.

140
00:09:38,080 --> 00:09:39,830
We're going to be adding the payment options.

141
00:09:39,840 --> 00:09:45,650
So we're going to allow the user to put in all of their information about their card or their PayPal

142
00:09:45,750 --> 00:09:51,890
et or whatever they want to pay with in order for us to collect payments on their purchases.

143
00:09:51,900 --> 00:09:52,080
Okay.

144
00:09:52,080 --> 00:09:52,560
Other than that.

145
00:09:52,560 --> 00:09:53,360
Thank you all for watching.

146
00:09:53,370 --> 00:09:55,970
And congratulations on having made it this far.

147
00:09:55,980 --> 00:09:57,420
We will see you in the next lecture.