WEBVTT 00:01.190 --> 00:07.040 So we have the same page working with respect to fetching the response and getting the JSON from the 00:07.040 --> 00:13.130 back end for all the details for a given sale, and that we need to modify our sales page template to 00:13.130 --> 00:14.370 actually write that to the screen. 00:14.390 --> 00:15.470 And that's really simple. 00:15.500 --> 00:16.250 So let's get started. 00:16.790 --> 00:24.380 So back in our idee, I am looking at sales page Goerge HTML and right down here, after I do the console 00:24.380 --> 00:31.100 log data, what I'll do is, first of all, make sure that we have data, if data and if we don't, 00:31.400 --> 00:32.830 then of course you can do something else. 00:32.840 --> 00:35.370 But presumably at this point we should have some data. 00:36.230 --> 00:38.630 And what I'll do is just write a few things to the screen. 00:38.630 --> 00:42.770 So I'll do the JavaScript first, then I'll write the time a little bit. 00:42.770 --> 00:47.240 So I'll just say document dot, get element by ID 00:50.930 --> 00:53.480 and I'll assume the first one is going to be the order number. 00:53.490 --> 01:02.060 So I'll say order dush and and we'll set its inner HTML to simply data ID. 01:02.990 --> 01:07.880 As you can see, if we go back to our web browser and look at the JSON we're getting back, in my case 01:07.880 --> 01:13.460 that's going to be three ID three and everything I need is here and I'll just put a few up because once 01:13.460 --> 01:15.040 you've done a couple, it's pretty straightforward. 01:15.410 --> 01:18.400 So we'll assume that's going to be one thing and we'll also want a customer name. 01:18.420 --> 01:24.010 So I'll say customer name, customer underscore will customer just customer. 01:24.050 --> 01:24.560 That's enough. 01:25.190 --> 01:33.890 That will make that equal to data dot customer dot first underscore name plus space plus their last 01:33.890 --> 01:37.280 name data dot customer dot last underscore name. 01:38.480 --> 01:39.750 And of course you can do the email. 01:39.770 --> 01:42.380 I'll do one more just to make things really, really clear. 01:42.900 --> 01:50.840 It's all your bit of this will say the product so the product name and this will be equal to data dot 01:50.870 --> 01:54.500 widget but name 01:57.290 --> 01:59.300 and we'll want the number of widgets they bought. 01:59.310 --> 02:02.240 In our case it's always fun, but you know, put it up there. 02:02.270 --> 02:07.100 Quantity data dot quantity because that's right. 02:07.130 --> 02:14.210 The top level two and finally the total, which I'll call the mount. 02:15.400 --> 02:24.640 And it's going to be we'll use that format currency we have wrote format currency and it's data transaction 02:25.690 --> 02:28.600 amount and that should be enough. 02:28.630 --> 02:33.080 OK, so that's the JavaScript that will update the actual page. 02:33.100 --> 02:35.260 Let's go up here and just put some basic content here. 02:36.460 --> 02:42.880 So in this case, I'll put it down just to wrap everything and close it in and we'll have our first 02:42.880 --> 02:52.870 line, which will be, say, strong quarter number and then close my strong and then put a span with 02:52.870 --> 03:01.300 an idea equal to order a dash and and leave it up to spam and then put up before you get to the next 03:01.300 --> 03:01.600 line. 03:01.630 --> 03:03.250 And I'll duplicate that a couple of times. 03:03.970 --> 03:06.700 The second one was our customer name, I believe. 03:07.750 --> 03:08.590 So customer 03:11.830 --> 03:13.600 and the ID is customer. 03:18.860 --> 03:23.390 Then we did the product product name, which we call product 03:26.570 --> 03:28.540 in duplicator quantity. 03:31.730 --> 03:32.900 Which we call quantity. 03:35.570 --> 03:41.510 And finally, the amount, so total sale and that will be equal to the amount. 03:43.460 --> 03:47.210 And after that d'Hiv I'll put an R and I'll put a couple of buttons. 03:47.240 --> 03:48.310 One, it's obvious. 03:48.530 --> 03:57.410 So a class equals button button say Infonet doesn't matter and it's roughly equal to slash admin slash 03:57.560 --> 03:59.140 all dash sales. 04:00.050 --> 04:01.670 I'll just label that one cancel 04:04.470 --> 04:06.710 then I'll have another one which we're not going to use yet. 04:07.100 --> 04:08.090 But it's an obvious thing. 04:08.090 --> 04:12.620 We need a class equals button with a different color save button dash one 04:16.280 --> 04:20.540 and it's a trap will be set to nothing for right now, just a hash bang and nothing happens. 04:21.020 --> 04:26.870 And I'll say refund order because that's something you might have to do and that's enough for a purpose. 04:26.930 --> 04:32.180 Now let's see if we have things running ahead of everything that are confused or just started again. 04:36.260 --> 04:42.080 Let's see if we get everything right, so back to our Web browser, reload this page and there we have 04:42.080 --> 04:44.390 order number three customers, Dick Grayson. 04:44.390 --> 04:48.380 The product is a widget one and we have a total sale of ten dollars. 04:48.530 --> 04:52.430 Now, refund order doesn't do anything and we'll do that probably in the next election. 04:52.850 --> 04:55.340 But this should work and it does. 04:55.580 --> 04:57.150 OK, so that's pretty straightforward. 04:57.800 --> 04:58.670 Let's move on.