WEBVTT 00:01.800 --> 00:07.800 So in her handler, we've created a widget model and we've passed that to our template and we passed 00:07.800 --> 00:13.270 it in the data variable, which is a map of string interface, and we called it widget. 00:13.290 --> 00:16.140 So let's go over to our buy once page and actually use that. 00:16.860 --> 00:24.390 So right here inside the content blog, I'm going to define a variable and I'll call it widget and that 00:24.390 --> 00:30.660 will be assigned the value of index data widget. 00:31.170 --> 00:33.040 So now I have that widget available to me. 00:33.510 --> 00:39.320 So let's start our back, end up make sure it's going make start back. 00:39.630 --> 00:40.590 I don't think I ever run. 00:43.320 --> 00:44.910 There it is, and let's run air. 00:47.110 --> 00:51.220 OK, now let's bring some information out and make sure we actually have that variable, and again, 00:51.610 --> 00:56.100 this dollar sign widget variable is only available in the content block. 00:56.830 --> 01:01.390 So I'll just print it out and I'll put it right above the title just to make sure it's working so well 01:01.720 --> 01:02.080 here. 01:02.080 --> 01:09.070 I'll say a dollar sign widget dot name and that should print out the name if everything worked according 01:09.070 --> 01:09.500 to plan. 01:09.520 --> 01:11.390 So let's make sure we compiled it did. 01:12.130 --> 01:19.870 Now let's go back to our Web browser and I'll simply load this page and go to products and buy one. 01:21.130 --> 01:22.500 And there it is, custom widget. 01:22.510 --> 01:24.110 So I have that variable available to me. 01:24.790 --> 01:27.430 So there's some things I can change in this form right away. 01:27.550 --> 01:35.170 So to start with, I'm going to add a hidden field inside the form tag and I'll call it input type equals 01:35.530 --> 01:46.710 hidden name equals product I.D. and the value will be equal to dollar sign widget ID. 01:49.210 --> 01:57.550 And I don't duplicate that line and put the price there price and this will be product underscore price, 01:57.600 --> 02:00.460 you can call those whatever you want, but that's what I have for right now. 02:01.690 --> 02:05.950 Now, if we scroll down a little bit, you'll see that I have this amount. 02:06.010 --> 02:08.400 So let's comment that because we don't want that at all. 02:09.220 --> 02:17.860 And instead we'll make this actually named amount, because that's what I want to look for in the JavaScript 02:18.040 --> 02:18.240 there. 02:18.400 --> 02:18.870 That's better. 02:19.510 --> 02:20.910 And I always display the price. 02:21.820 --> 02:29.140 So we'll just say each three that we can form at this hour, we want later on dollar sign widget dot 02:29.860 --> 02:35.920 name followed by a colon, and then we'll put the price and it's not going to look right. 02:35.920 --> 02:37.660 But we'll fix that in a little bit. 02:38.170 --> 02:43.930 Widget dot price and close that H3 tech. 02:45.280 --> 02:46.270 Let's see how that looks. 02:46.270 --> 02:47.120 So I'll save that. 02:48.370 --> 02:52.630 Go back to my Web browser, reload this page and I have an error. 02:53.620 --> 02:54.430 Let's see what the error. 02:54.520 --> 02:55.390 There is no Wittert. 02:55.510 --> 02:57.620 There's a widget, though, so let's save that. 02:57.730 --> 02:58.810 Make sure recompile. 02:59.860 --> 03:00.420 There it is. 03:00.430 --> 03:01.060 Let's try that again. 03:02.410 --> 03:03.190 Custom widget. 03:03.190 --> 03:04.250 One thousand. 03:04.270 --> 03:07.960 Now, I'm not going to spend a thousand dollars on this little widget, so we're obviously going to 03:07.960 --> 03:15.520 have to somehow format this as currency so we can do that using our functions that we're going to make 03:15.520 --> 03:16.870 available to our templates. 03:16.900 --> 03:18.040 So we'll do that in a little while. 03:18.160 --> 03:22.810 OK, so let's go back here and just format this a little bit better. 03:22.930 --> 03:30.070 So I'll change the eight three three to class equals and I'll give it a margin at the top of C two and 03:30.070 --> 03:32.500 I'll send it to text center. 03:32.950 --> 03:33.370 OK. 03:34.700 --> 03:38.300 See how that looks reloaded a little bit better. 03:38.380 --> 03:48.440 OK, and maybe give it a of the bottom two, so maybe three and then I'll put an H.R. there and after 03:48.440 --> 04:00.050 the title, I'll put a paragraph in and I'll put in a dollar sign widget description and close that 04:00.050 --> 04:00.910 paragraph tag. 04:06.800 --> 04:09.130 And up here, we'll get rid of displaying the legitimate. 04:11.590 --> 04:17.050 So let's reload this right again, a very nice switch. 04:17.200 --> 04:22.000 OK, so we can format that however we want, one of the things we're going to have to do is to write 04:22.000 --> 04:24.130 a function to format this appropriately. 04:24.130 --> 04:25.120 And that's pretty straightforward. 04:25.120 --> 04:26.400 And we'll do that in the next lecture. 04:27.010 --> 04:30.490 And then, of course, we'll want to actually try to run a transaction. 04:31.030 --> 04:37.510 But this time when we run, the transaction will also create a transaction model to save that information. 04:37.520 --> 04:40.030 And we won't do that until we implement the database functions. 04:40.540 --> 04:45.340 But of course, at the moment when that transaction is complete, we have a lot of information and we're 04:45.340 --> 04:50.050 going to want to save some of that because at some point we might have to do a refund or something like 04:50.050 --> 04:50.340 that. 04:50.710 --> 04:53.500 So we'll get started on that in the next lesson.