Rules allow you to tell Taxi how to change an Email Design System if certain content conditions are met.
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:
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.
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.
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.
In these examples content or code is removed based on one field, and whether that field is true or false (for non checkbox fields, true equates to that field having a value, false equates to the field being empty).
There may be some scenarios where you need to use rules based on multiple fields or based on a specific value of a field (not just whether it is true or false). In this case, you will need to use slightly different liquid rules, also known as control flow tags. You can read more about these here.
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:
To find out more about the liquid template language visit www.liquidmarkup.org
You can also use rules on fields and editables. Read more here.
Next: Utility Tags