CODEWITHSUNDEEP
conditional-statementsmjml
Erick Bravo
Erick Bravo

Reputation: 41

Is MJML If statement with an OR operator possible?

I am having trouble adding an extra conditional in my mjml if statement. Is there an OR operator in mjml? Can't seem to find it even in their docs.

I tried using || and | but get errors when throwing the html into mailjet.

Here is what I have tried:

 
      <mj-raw>{% if var:variable:"" != "" | var:variable:"" != "$0"%}</mj-raw>
      <mj-section padding="0 0 16px 0">
        <mj-group>
          <mj-column>
            <mj-text>
              <p class="left-aligned-line-item">Text</p>
            </mj-text>
          </mj-column>
          <mj-column>
            <mj-text>
              <p class="right-aligned-val header-bold">{{ var:variable:"" }}</p>
            </mj-text>
          </mj-column>
        </mj-group>
      </mj-section>
      <mj-raw>{% endif %}</mj-raw>

Upvotes: 3

Views: 10175

Answers (2)

Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4757

I spent quite some time trying to get this working because the documentation on this topic wasn't the friendliest at the time of writing this. In a nutshell, MJML does not support templating (ref1, ref2). So you have to do it yourself.

Once you pick your template engine, you can basically do anything that the engine allows you. if/else statements are pretty basic so they should work with any solution you pick.

You have a few templating options, for example, if you are on Node.js, you have handlebars (most popular), EJS (most active), Eta (most performant), etc. They are all a bit different but will allow you to do if/else logic and more (e.g. convert HTML to text which can be quite useful for email).

On our side, we decided to go with EJS, and normally you would do the following sequence:

  1. Write MJML templates including <mj-raw> tags that include your templating engine's markup
  2. Parse the template using your templating engine - this will remove the special markup and process the if/else statements
  3. Parse the template using the MJML library - this will convert the markup to HTML

Having the templating before the MJML means that you can use simple HTML tags and still benefits from MJML's CSS injection without having to copy inline CSS into your template-specific HTML. This is ideal for maintenance.

This is what a solution could look like:

MJML template: (using EJS syntax)

<mj-raw><!-- htmlmin:ignore --><% if (typeof greeting !== 'undefined' || greeting !== "some value") { %><!-- htmlmin:ignore --></mj-raw>
   <mj-text padding="8px 0"><%= greeting %></mj-text>
<mj-raw><!-- htmlmin:ignore --><% } %><!-- htmlmin:ignore --></mj-raw>

TypeScript code:

import ejs from 'ejs'
import mjml2html from 'mjml'
import { readFileSync } from 'node:fs'

// do stuff here

try {
  const mjml = readFileSync('email.mjml').toString()
  const emailProps: EmailProps = {
    greeting: messages.format(`greeting`, { fullName }),
  }
  const injectedMjml = ejs.render(mjml, emailProps)
  const mjmlParseResult = mjml2html(injectedMjml, { keepComments: false })
  if (mjmlParseResult.errors.length > 0) {
    throw new Error('error while parsing MJML')
  }
} catch (error) {
  // handle the errors here
}

// do more stuff here

Upvotes: 1

Erick Bravo
Erick Bravo

Reputation: 41

I found that nesting if statements works. It's a bit clunky, but this is the working solution at the moment.

      <mj-raw>{% if var:variable:"" != "" %}</mj-raw>
      <mj-raw>{% if var:variable:"" != "$0"%}</mj-raw>
      <mj-section padding="0 0 16px 0">
        <mj-group>
          <mj-column>
            <mj-text>
              <p class="left-aligned-line-item">Text</p>
            </mj-text>
          </mj-column>
          <mj-column>
            <mj-text>
              <p class="right-aligned-val header-bold">{{ var:variable:"" }}</p>
            </mj-text>
          </mj-column>
        </mj-group>
      </mj-section>
      <mj-raw>{% endif %}</mj-raw>
      <mj-raw>{% endif %}</mj-raw>

Upvotes: 1

Related Questions