How to import sets of variables into a template

HubL allows you to import variables and macros from a coded file into the context of one or multiple other templates. This technique can be very useful for complex or multi-language sites, because it provides you with a central place to store and edit sets of information, in a single location, that can then be printed throughout your template and included custom modules. 

This tutorial goes over the basic implementation of the import tag, as well as a few real-world use cases where this may be helpful:

Basic usage tutorial

The following tutorial declares two variables and a macro in a HTML file and imports it into another template. These imported values can then be printed in the master template and included custom modules.

Please note that due to the order in which templates and included assets compile, these imported variable and macro values cannot be inherited by global modules or global groups, unless the file is also directly imported into that module or group. You can however call them within custom modules without re-declaring the import tag.

Create a new .html file in Design Manager

Navigate to Design Manager and create a new coded template. Make sure you save it with .html file extension. Once you have created the .html file, clear out the prepopulated markup.

Create file to import

Add variables and/or macros to file

Define the variables that you would like to use throughout other templates. This example defines two variables for employee names and one macro that will print a job title wrapped in a customizable tag with a predefined class. You can learn more about variable and macro syntax here.

Please note that variables should single words or use underscores for spaces (hyphenated variables are not supported).


{% set ceo = "Brian Halligan" %}
{% set cto = "Dharmesh Shah" %}
{% macro job(tag, job_title) %}
     <{{ tag }} class="job-title">{{ job_title }} : </{{tag}}>
{% endmacro %}

Publish the file

When you publish this file, you must uncheck the option to "Make this template available for new content." This option allows you to save the file without the required page variables. Since this file will not be used as a master template for content, you do not need it to be available as an option for content creators.

Make this template available for new content

Copy the path to this file

In order to import this file into another template, you need to copy down the relative Design Manager path to the file. To copy the path:

  • Click Actions > Get public URL
  • Copy the HubL tag

The Design Manager path is file structure is in quotes within this tag. You will not need the entire tag, just the part in quotes. It should look something like:

"custom/page/web_page_basic/my_filename.html"

Public URL

Import the file into a template

To import your variables into another template:

  • Open a template layout or coded template that you would like to use these variables in.
  • Paste the tag that you copied into the <head> of your template. For template layouts, this is available under Edit > Edit head.
  • Delete everything from the tag except for the path in quotes (ie "custom/page/web_page_basic/my_filename.html")
  • Add an import statement around the path (see syntax below). 
  • Give a variable name to file that you are importing (see syntax below). To do this add "as" after the file path followed by the variable name. The below example names the import "employees".

Basic Syntax of import tag:
{% import "path" as name_of_import %}

Example import:
{% import "custom/page/web_page_basic/employees.html" as employees %}
By importing this file into the head tag, you ensure that these variables can be used throughout the template. Please note that if the import tag is below where the variable is being called in the template, the variable will not render.

Call the variables or macros

Now you can call these variables elsewhere in the template. Updating the included file's variables values will automatically update the master template. As previously mentionned, these variables can also render within custom modules that are in use in the master template.

  
{{ employees.job('span', 'CEO') }} {{ employees.ceo }} 

{{ employees.job('span', 'CTO') }} {{ employees.cto }} 
    
<span class="job-title">CEO : </span> Brian Halligan <br>
<span class="job-title">CTO : </span> Dharmesh Shah <br>

Publish master template

Finally, publish the master template. Anytime you change the variable values within the imported html file, these value updates will propagate through your master template and its custom modules.

Static database example

Using this technique, you can create simple static databases that you can iterate through. In this example, the imported file contains a database of 3 products.

In the imported file, a variable called "in_stock" is defined as a sequence of dicts. Each of these dicts contains information about a different products. 


{% set in_stock = [
{'name': 'Toy', 'price': '20', 'size':'Small', 'quantity': '3'},
{'name': 'Shirt', 'price': '15', 'size':'XL', 'quantity': '10'},
{'name': 'Bike', 'price': '200', 'size':'Large', 'quantity': '6'}
] %}

After importing this sequence of dicts into another template, we can use a for loop to iterate through these custom variables printing the product information into the markup.

The first line of code is the import tag that specifies that the contents of this file will be imported with the name "products". It is recommended that this line of code goes in your <head> or towards the top of your template.

Next, a for loop is declared that iterates through each products within products.in_stock. Since each product is the individual dict within the imported file, we can access any of the product's properties, by appending the attribute name (ie "name", "size", "price", etc.). to the iteration item (ie "product"). 


{% import "custom/page/web_page_basic/products.html" as products %}
{% for product in products.in_stock %}
<h2>Name: {{ product.name }}</h2>
<h3>Size: {{ product.size }}</h3>
<h4>Price: ${{ product.price }}</h4>
<h4>Number in stock: {{product.quantity }}</h4>
{% endfor %}
     

    
<h2>Name: Toy</h2>
<h3>Size: Small</h3>
<h4>Price: $20</h4>
<h4>Number in stock: 3</h4>

<h2>Name: Shirt</h2>
<h3>Size: XL</h3>
<h4>Price: $15</h4>
<h4>Number in stock: 10</h4>

<h2>Name: Bike</h2>
<h3>Size: Large</h3>
<h4>Price: $200</h4>
<h4>Number in stock: 6</h4>
You could complicate this example, by nesting if statements within the loop that only print products that meet certain criteria. For example, if you only wanted to show products that were less than $30, you could use an if statement against product.price. 

{% import "custom/page/web_page_basic/products.html" as products %}
{% for product in products.in_stock %}
{% if product.price < 30 %}
<h2>Name: {{ product.name }}</h2>
<h3>Size: {{ product.size }}</h3>
<h4>Price: ${{ product.price }}</h4>
<h4>Number in stock: {{product.quantity }}</h4>
{% endif %}
{% endfor %}
     

    
<h2>Name: Toy</h2>
<h3>Size: Small</h3>
<h4>Price: $20</h4>
<h4>Number in stock: 3</h4>

<h2>Name: Shirt</h2>
<h3>Size: XL</h3>
<h4>Price: $15</h4>
<h4>Number in stock: 10</h4>

Multi-lingual glossary example

This technique is useful for creating a glossary of string variables in different languages that load throughout your templates, based on the URL of the page. Check out the full tutorial here.