If, else, for and arguments
See original GitHub issueIs your feature request related to a problem? Please describe.
I’m currently working on a project with a friend and we have started creating some email template for different use cases. Some of this templates are very flexible to contain things like dynamic lists that are filled by the user input. So we came up with the problem, that MJML has no tags or something like that to loop through a set of arrays items or even render a simple string in a tag. We program our API in python and using jinja2 templating, therefore we need to pass the pre-rendered jinja2 template with jinja2 if else clauses and variables to MJML CLI. This is a step we would like to avoid.
Describe the solution you’d like
It would be nice if MJML supports something that allows passing arguments to the template that will be rendered. e.g.:
the
{{}}
Syntax is a syntax from Jinja2, Twig and others use this too and I think its pretty innovative as it differs from HTML
<mjml lang="de">
<!-- OR -->
<mjml lang="lang.short"> <!-- would check if its a available variable-->
<mj-head>
<mj-title><mj-var name="title"/></mj-title>
<!-- OR -->
<mj-preview>{{ title }}</mj-preview>
</mj-head>
<mj-body background-color="#FFFFFF" width="600px">
<mj-section full-width="full-width" background-color="#26292c">
{% if menu | length > 0 %}
<!-- OR -->
<mj-if rule="menu.length > 0">
<mj-column width="70%" vertical-align="middle">
<mj-text align="right">
{% for item in menu %}
<!-- OR -->
<mj-for array="menu.length > 0">
<a href="{{ item.link }}">{{ item.text }}</a>
<!-- OR -->
<mj-link href="item.link"><mj-var name="item.text"/></mj-link>
{% endfor %}
<!-- OR -->
</mj-for>
</mj-text>
</mj-column>
{% endif %}
<!-- or -->
</mj-if>
</mj-section>
</mj-body>
</mjml>
Describe alternatives you’ve considered
Currently, as I have written above, we use Jinja2 (flask) to prerender the templates and pass it to MJML CLI. Additionally a Python renderer would be awesome too.
Issue Analytics
- State:
- Created 5 years ago
- Comments:13 (4 by maintainers)
You can just wrap them into mj-raw instead of comment blocks too
+1 on this…a very barebones if-else conditional (like vue.js’s v-if and v-else) would be really great.