Merge Tag Loops

This example shows how to add dynamic content to a landing page or an email using merge tags rules.

You can start by initializing the editor for a landing page:

unlayer.init({
  id: 'editor-container',
  displayMode: 'web',
});

Suppose you have an e-commerce website where you want your users to create an order confirmation template that lists all the ordered products. Therefore, you'll use the merge tags to display the products according to your specified rules.

Now in order to add merge tags to your template, you will have to define them in the configuration of the editor during initialization:

unlayer.init({
  id: 'editor',
  displayMode: 'web',
  mergeTags: {
    first_name: {
      name: 'Product Name',
      value: '{{name}}',
    },
    price: {
      name: 'Price',
      value: '{{price}}',
    },
    products: {
      name: 'Products',
      rules: {
        repeat: {
          name: 'Repeat for Each Product',
          before: '{{#products}}',
          after: '{{/products}}',
        },
      },
    },
  },
});

You can see three merge tags defined in the code snippet provided above:

1. first_name
2. price
3. products

first_name and price are two simple tags with their name and value defined, while products is rule-based, displayed according to the rules specified in the products merge tag.

As theproducts merge tag has to be repeated for each product, the repeat rule has been used in this example. Thebefore and the after fields determine the block that has to be repeated for each product. {{#products}} is specified as before, which implies that {{#products}} should be before the block which has to be repeated. Similarly, {{/products}} has to be after the block that has to be repeated.

Here is a live preview of the web page mode:

Let's try out merge tags in the editor provided above. Drag a text tool into the editor shown above. Click on the text, and you'll be able to see the editor popup options. If you click on Merge tags, you can see Product Name and Price in the drop-down menu:

You can select both the merge tags and insert them into the text in the following way:

Select the current block and click on the Tag icon visible on the bottom left corner:

You can then select Products in the Merge Tag Group category and Repeat for Each Product as your Merge Rule:

Now that you have set up your merge tags, you can go to the preview mode to view them by clicking on the eye icon in the bottom left corner of the editor provided above:

Here is what you'll be able to see:

Additionally, you can export the HTML for this template which will be similar to the snippet below:

<div
  id="u_body"
  class="u_body"
  style="min-height: 100vh; background-color: #e7e7e7; font-family: arial,helvetica,sans-serif;"
>
  {{#products}}
  <div id="u_row_1" class="u_row" style=" padding: 0px;">
    <div style="max-width: 500px; margin: 0 auto;" class="container">
      <div class="u-row">
        <div id="u_column_1" class="u-col u-col-100 u_column">
          <div
            style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"
          >
            <div
              id="u_content_text_1"
              class="u_content_text"
              style="overflow-wrap: break-word;padding: 10px;"
            >
              <div
                class="v-text-align"
                style="color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;"
              >
                <p style="font-size: 14px; line-height: 140%;">
                  <span style="font-size: 14px; line-height: 19.6px;"
                    >This is {{name}} and its price is {{price}}</span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{/products}}
</div>

Note: Unlayer editor supports all template engines, but we are using Mustache syntax for this example.

To represent a loop in the Mustache template, you need to add a pair of opening and closing tags such as ({{#products}}, {{/products}}). These tags were namedproducts because the merge tag name and the tag names have to be the same. The block between these tags will be rendered once for each product. In the HTML provided above, you can see the two tags,{{#products}} and {{/products}}, and the block enclosed between these tags.

So far, you have learned how to create a template that will contain your merge tags. Now, you will go one step further and see how you can use the Mustache templating engine to render the above generated dynamic template with your data. Without rendering through a template engine, the template will look as follows:

However, for this example, the default Preview behaviour is overridden and the previewHTML event is used to render the specified merge tags with the data:

unlayer.registerCallback('previewHtml', function (params, done) {
  let data = {
    products: [
      {
        name: 'Product 1',
        price: '$7.99',
      },
      {
        name: 'Product 2',
        price: '$7.99',
      },
      {
        name: 'Product 3',
        price: '$7.99',
      },
    ],
  };

  let result = window.Mustache.render(params.html, data);
  done({
    html: result, // you can pass your custom html here
  });
});

Note: The name of the data array should be the same as the name of the merge tag and the variable used in the before and after tags.