So we have the same page working with respect to fetching the response and getting the JSON from the
back end for all the details for a given sale, and that we need to modify our sales page template to
actually write that to the screen.
And that's really simple.
So let's get started.
So back in our idee, I am looking at sales page Goerge HTML and right down here, after I do the console
log data, what I'll do is, first of all, make sure that we have data, if data and if we don't,
then of course you can do something else.
But presumably at this point we should have some data.
And what I'll do is just write a few things to the screen.
So I'll do the JavaScript first, then I'll write the time a little bit.
So I'll just say document dot, get element by ID
and I'll assume the first one is going to be the order number.
So I'll say order dush and and we'll set its inner HTML to simply data ID.
As you can see, if we go back to our web browser and look at the JSON we're getting back, in my case
that's going to be three ID three and everything I need is here and I'll just put a few up because once
you've done a couple, it's pretty straightforward.
So we'll assume that's going to be one thing and we'll also want a customer name.
So I'll say customer name, customer underscore will customer just customer.
That's enough.
That will make that equal to data dot customer dot first underscore name plus space plus their last
name data dot customer dot last underscore name.
And of course you can do the email.
I'll do one more just to make things really, really clear.
It's all your bit of this will say the product so the product name and this will be equal to data dot
widget but name
and we'll want the number of widgets they bought.
In our case it's always fun, but you know, put it up there.
Quantity data dot quantity because that's right.
The top level two and finally the total, which I'll call the mount.
And it's going to be we'll use that format currency we have wrote format currency and it's data transaction
amount and that should be enough.
OK, so that's the JavaScript that will update the actual page.
Let's go up here and just put some basic content here.
So in this case, I'll put it down just to wrap everything and close it in and we'll have our first
line, which will be, say, strong quarter number and then close my strong and then put a span with
an idea equal to order a dash and and leave it up to spam and then put up before you get to the next
line.
And I'll duplicate that a couple of times.
The second one was our customer name, I believe.
So customer
and the ID is customer.
Then we did the product product name, which we call product
in duplicator quantity.
Which we call quantity.
And finally, the amount, so total sale and that will be equal to the amount.
And after that d'Hiv I'll put an R and I'll put a couple of buttons.
One, it's obvious.
So a class equals button button say Infonet doesn't matter and it's roughly equal to slash admin slash
all dash sales.
I'll just label that one cancel
then I'll have another one which we're not going to use yet.
But it's an obvious thing.
We need a class equals button with a different color save button dash one
and it's a trap will be set to nothing for right now, just a hash bang and nothing happens.
And I'll say refund order because that's something you might have to do and that's enough for a purpose.
Now let's see if we have things running ahead of everything that are confused or just started again.
Let's see if we get everything right, so back to our Web browser, reload this page and there we have
order number three customers, Dick Grayson.
The product is a widget one and we have a total sale of ten dollars.
Now, refund order doesn't do anything and we'll do that probably in the next election.
But this should work and it does.
OK, so that's pretty straightforward.
Let's move on.