You can use rules to turn certain elements on and off in an email and reduce the number of modules needed in an Email Design System.

For example, a three column module can be repurposed into two columns if a column is not needed, or a CTA can be removed from the email if the text is deleted.

This will make life much easier for HTML developers, who will have much less code to manage and maintain, and for people creating emails, as they can remove and add elements in a module without needing the technical HTML knowledge normally needed to achieve this.

Music: https://www.bensound.com/royalty-free-music

There are two basic operations that can be carried out and two common ways of triggering rules:

Remove content

The first operation is removal, an element can simply be completely removed from the html along with all of its children when a condition is met. The second operation is to remove an outer element but leave the any inner elements in the html. This is called remove_outer and is usually used to remove a link tag from around another element. This way, for example, the user can be given a choice in the editor of whether and image should work as a link or not.

Rules can be invoked by a checkbox field, which appears as an ‘on/off’ switch in the editable or by looking at other fields and seeing if they are empty or not. An empty field is treated the same way as ‘off’ from a checkbox whereas if there is any text in the field it is treated as ‘on’. This is useful for doing things like completely removing a headline section if no headline text is entered or altering spacing when content is present.

A simple rule example:

Let us imagine there is a christmas tree in our weekly newsletter that we only want to be switched on for seasonal emails. We can put in a checkbox field to turn it on/off and on the image tag we use a remove_unless rule.

<field name="christmas_tree" label="is it christmas?" type="checkbox"> </field>  <img src="tree.png" rule="{% remove_unless christmas_tree %}"/> 

The rule means ‘remove this image tag unless the christmas tree checkbox is switched on’. The ‘rule’ attribute is telling Taxi to interpret this as a rule and the {% remove_unless %} tag means apply the ‘remove’ rule unless the condition is met.

Instead of a checkbox we will now use a text field to control our rule:

<editable name="headline_text_removal">  <field name="headline_text" type="text"></field>  <h1 rule="{% remove_unless headline_text %}" replace="{{ headline_text }}"/>Headline</h1>  </editable> 

In this case we want the <h1> tag to disappear when there is no headline text. The rule does exactly that.

Only remove a tag

The remove_outer_if and remove_outer_unless rules behave in a similar way but leave the content of the tag in place. This is often used to allow an image to be switched between working as a link and just being an image.

<editable name="image_with_optional_link">  <field name="enable_link" type="checkbox">  <field name="href" type="url"></field>  <field name="src" type="src"></field></field>  <a rule="{% remove_outer_unless enable_link %}" replace-href="{{href}}">  <img replace-src="{{src}}">  </a>  </editable> 

Note that the rule attribute for remove_outer_if goes on the element that will be removed, rather than the inner element that is preserved, so in this case it goes on the <a> tag (which gets removed if the rule condition is met), not the <img> tag (which survives in either case).

Also note that the href and src fields are inside the checkbox field. This means that when the checkbox is set to "off" in the editor, those fields will be hidden.

You may want to do this without using a checkbox, so the <a> tag is removed if the href field is empty — there is a tutorial here.

Diving in deeper

The content of rule, replace and replace- attributes in Taxi are interpreted using the liquid template language. This was developed by shopify for use in e-commerce. It is a powerful language.

Topics not covered in this guide include:

  • Using liquid to provide defaults when no content is entered
  • Iterating through lists
  • Use of filters for presenting content in different ways

To find out more about the liquid template language visit www.liquidmarkup.org


Next: Utility Tags