Use HTML templates to display JSON data

Jason Lengstorf: [0:00] To get our products displaying on the page, like products, we're going to use html templates. We're going to open up index.html, and in between the main and the script, we're going to add a template tag. We're going to give it an ID of product, so that we know how to find it later.

[0:18] Inside, we're just going to code up a product, so we'll give it a class. It's going to be a div for the class of product. Inside of that, we're going to use an image that is going to have a source and an alt, but we're not going to set them now, remember this is a template.

[0:33] Then, we have an h2, and that's -- this is all place-holder data -- we'll say name, then a class of description. We can just put in description, and then below that, we're going to include the price. Again, this is all place-holder.

[0:57] Next, we want a way for people to purchase this. We're going to create a form. The form is going to have an action, and that's going to eventually go to our serverless function, but right now, it's not going to do anything.

[1:12] Let's set the method to POST. Inside the form, let's add a label, and that will be for the quantity. We want people to be able to choose how many of the thing they are buying. Then, we'll set an input, and that input is going to be a type of number. We're going to set an ID of quantity, so it associates with the label.

[1:38] Give it a name, also quantity. A value starts out at 1. We'll set the Min to 1. The Max, you can set this to whatever you want, but we'll set it to 10. That seems like a reasonable maximum number of products.

[1:57] Then, we want a hidden input. That is going to have a name of sku, and it'll have an empty value. We're going to set that again, it's a template. We're going to set that later. We've got our button, that's going to be a type of submit, and the value will be, Buy Now.

[2:20] That is our complete template. The next thing that we need to do is actually use that template. Inside of load-products.js, we're going to create a new function. That function is going to be called, createProductFromTemplate, and that is going to receive the item as an argument. Inside we're going to grab the template that we, so const template = document.querySelector. We're going to grab the product ID.

[2:54] Then we need to create our own instance of that. We're going to clone the content of that template. This is DOM node that we're creating. It's going to be called product. We get that by running template.content.cloneNode. We set true. I don't know why, but that's what MDN tells us. I believe them.

[3:17] We've set the product. What this is doing is, so we're grabbing the template content that we just created. The content is this div, what's actually inside the template. We find the template, we grab its content, and then we clone it, so that we have our own copy.

[3:33] Once we have our own copy, we can start modifying things. We're going to go product.querySelectorh2. Then we're going to set the inner text to be our item.name. Next, we can go to the description. We want that to be item.description. Duplicated again.

[3:58] Now we want to change the sku. I didn't set a class on this hidden element. I could do that here, but what I can also do is just target it by its name. We'll go to name sku. I'm going to set the value of this one to be item.sku. Then we're going to set product.querySelectorprice. The price is going to be a little bit different, because it is you dealing with money.

[4:30] We're going to use a built-in API Intl NumberFormat. This one is going to allow us to specify how we want our currency to be formatted. We're going to start by specifying our locale. We're going to use en-US. Then we provide some options.

[4:53] The style that we want to use is currency. The currency that we're using is whatever the item's currency is. In our case, that's going to be USD. We get back a helper. We're going to immediately chain the format method. That is going to let us format the amount.

[5:13] If we look at our data, our data comes back. That has the amount as cents, so 1,000 cents. The reason for that is that decimals are complicated in JavaScript. This allows us to avoid some confusion in storing amounts. Now that we know that we're using USD, we are going to actually take the item.amount and divide it by 100 so that we get the currency that we want.

[5:44] Then we're going to set it fixed so that we know we only get to the two decimal points, the number of cents. We don't want any fractions of cents.

[5:53] Then we need to set the image. We're going to grab that image out, const image = product.queryselectorimage, and we're going to set the image.source to item.image, the image.alt to item.name, and then we're going to return that whole thing. We're going to return the product.

[6:19] We've created our own version of the template with the content of it as a DOM node, and then we've gone in and modified all the details. The title, description, the sku, the price, and the image, and then we're returning that DOM node from this function.

[6:34] If we come down here, we can change this out and instead of just adding all of the data, we can loop through it, so data.forEach. That's going to give us an item. We are going to get a product back by running that function and passing in the item. Then we're going to grab our product's container and append that product to it.

[7:03] From here, we can come out, save that, run Netlify Dev, that opens up. Now we can see that our products are in. They're just lacking styles. We're going to go ahead and add those styles. Let's go into main.css. Down at the bottom, we will add in a products class.

[7:23] That's for our wrapper. That is going to be display grid. We're going to set a gap of two rems, grid template columns, and we will set that to repeat two columns, and we will make them the same fractional width. FR isn't actually for fractional, but that's how I remember it.

[7:45] Then we'll set a margin top to be three rems to give it some breathing room. Below that, we're going to target the image, so product image. We just want to make sure the max width is 100 percent so that it doesn't blow out the design.

[8:01] For the form, align the items to the baseline. This is going to be its own grid. We're basically setting up a grid to align the different inputs. We'll set the gap to be .5 rem, and then we'll run grid template columns. We're going to specify these manually. This is probably a responsive nightmare, but for the purposes of our demo, it's going to do just fine.

[8:32] Then we want to set up the input, give that a border, one px, solid teal to match our header. We'll give it a border radius to make it look a little bit nicer, and we'll set that to .25 rem. The reason I'm using rems is so that if we change the basic font size, all of the other things are going to change with it. Font size, line height will be 1.25 rem, and our padding is also going to be .25 rem.

[9:06] The last thing that we want to do is style up our button. Our product button is going to have a background of teal. It'll have no border, so we can set border, none. We want to match that border radius to be the .25 rem, and we'll set the color to be white so that we have enough contrast for reading.

[9:27] Our font size will be 1.25 rem. Font weight, we want it to be heavy so that it's easy to read. Our line height is going to be 1.25 rem, and our padding is also going to be .25 rem.

[9:44] If we save this, head on out, reload, now we have a better styled, basic product display generated from JSON data, loaded by a serverless function, and inserted into our document using an HTML template and a little more JavaScript.