Step 6: Create the HTML Template

The template provides the HTML to display the element in both the editor and on a published page (if needed, you can create a separate HTML template for the editor and the published site. You can do that for the CSS and JavaScript as well). Templates use Mustache tags to access the settings.

In our template, we need to create a table that creates the right number of columns for the plans (using the columns setting) and the right number of metric rows (using the rows setting). We also need to add the button and the rows for heading and the price.

Step 1:Create an HTML page, name it element.tpl and save it to the PriceChart/files/html directory.

Step 2:Let's create a div for the whole element:

Create the element div

Step 3:Next, we’ll create a table to hold the chart, and set the theme color and button location based on the value of those settings. You access settings using mustache tags, like this: {{setting}}.Add the following code:

Add the table and code to set the color and button location

​In a future step, we’ll provide CSS for thebutton location classes with styles for the possible alignment values. For example, we’ll style a class named buttons-bottom.

Step 4:​Now let’s add a table row for the name. First, we need to determine the number of columns to display. To do that we’ll access the plans setting to find that number and then render a column that many number of times.

When a setting’s value is an integer, you can use {{#settings_each}} to iterate over all instances and {{settings_index}} to access each individual instance. So we'll use {{#plans_each}} to render the right number of columns, and the we'll use {{plans_index}} to stamp out a name for each column. The name will be used for the text field.

We’ll use the text tag to create a text field with a default value. This is the syntax for the text field: {<field_name>:text default="some default text to display"}. ​We’ll use the index of each plan column to give each text field a unique name and default text. In other words, the name in the first column will be "Name #0."

Add a row to display plan names and create column for each plan

Step 5:​Now let’s create a row for the price, repeating the loop over the plans setting. We’ll set "10" as the default value. The pricing prefix will be handled by CSS.

Add a row to display the price of each plan

Step 6:Go ahead and do the same thing for the rate row, using "per unit" as the default text.

Add a row for the rate

Step 7:We need to add code for the button when the corresponding setting is set to top (we’ll have CSS determine whether to display this button or one at the bottom).Let’s have it display right under the rate. You create a button using the {name:button} tag.

Add button for top location

Step 8:Like the plans setting (which determines the number of columns), we need to loop over the features setting, to return the right number of feature rows. Let’s add the loop which will render the correct number of rows based on the value of the features setting.

Add row for the features

Step 9:Now let’s add the code for when the button should be on the bottom.

Add button for bottom location

You can see the complete template code here.​We now have the template for our Price Chart! Let’s create the styles next.