Repeating email blocks using for-loop syntax

Tabular's repetition option can be used to repeat an email block based on personal client data, for example to show a list of blog posts or ecommerce products based on an array/list of data.

What is for-loop syntax?

For-loops can be used to iterate through sequences of objects. They are most commonly used in email templates for rendering blog posts, ecommerce products, or purchase order line items.

To be able to use for-loops, your email service provider should offer a templating language with for-loop support.

The idea is that the block that you wish to repeat (for example an ecommerce product block), should be wrapped in a for-loop. Wrapping a block, means that before the block we add a for-loop opening expression, and after the block we add a for-loop closing expression.

The templating language used differs per email service provider, but for example the HTML when using the Handlebars templating language, would look like the following:

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Wrapping a Tabular block in for-loop syntax

1. From the Layers menu, select the block that you wish to wrap in for-loop syntax.
2. In the Styling menu, click on the button for adding the repeat block setting. This button can be identified by the icon illustrating a repetition by two arrows.
3. After clicking on the repeat block button the repetition item will be added to the Dynamic content settings. Click on this repetition item to open a popover where you will input the for-loop syntax.
4. You will find two input fields:
   1. in the first input, add the for-loop opening expression. For example, for HubSpot's HubL language this would look like: {% for item in items %}, where items should be replaced by the variable name for your array/list. With the Handlebars language it would look like: {{#each items}}.
   2. in the second input, add the for-loop closing expression. For example, for HubSpot's HubL language this would look like: {% endfor %}. With the Handlebars language it would look like: {{/each}}

Accessing data within the for-loop

Inside the block that has the repetition item set, you can access data related to the element being iterated over by the for-loop syntax. You can use it on the block itself and any blocks that are nested in it.

Using Handlebars Template Language

Please note that the template language used is only supported by some email service providers, however, the concept of how we show to use it in Tabular is applicable to other templating languages. We have listed in a table at the end of this article which template language each email service provider supports.

Say we have the following data that we want to iterate over:

{
  products: [
    { name: "Kitchen Block", price: 30.00 },
    { name: "Pants", price: 39.00 },
    { name: "T-Shirt", price: 20.00 }
  ]
}

For iterating, We add the repetition item to the Row block that we wish to render for each product in our products list:

Then, inside the block, we can use this to reference the element being iterated over. In this case, we can use {{ this.name }} to access the product name, and {{ this.price }} to access the product price. We add these tags and mark them as variables using Tabular's variable annotation:

When we send this email with an email service provider that supports the Handlebar language, the resulting email would look like:

Substituting for-loop variables with client data

Each uniquely personalized email will need to be automatically generated and during this the variables used together with the for-loop will be substituted with client data.

This process of substituting the variables with the client data is typically performed by your email service provider (ESP). Your ESP should then also have access to that client data.

Some ESPs may offer functionalities to manually add the client data or they might collect the client data. Other ESPs may offer integrations, so that you can connect the database where you've stored the client data, with the ESP, so that the ESP can fetch the client data from your database. If you programmatically send emails using the ESP's API, most API's offer endpoints that you can use to send variable values to the ESP.

Another option if you have developers in your team, is to do this process of substitution on your own backend server, and then sending the HTML using the API of an ESP.

Email Service Providers that support for-loops

Most email service providers offer a templating language, see the following table that lists the most commonly used ESPs and if they offer for-loop support: