Does not work with smarty

[grandeljay]

I am maintaining an old shop which relies on the smarty template engine. For compatibility reasons, I would like to use MJML to design the transactional mails the CMS creates. Unfortunately, MJML seems to strip everything that is not MJML.

I am asking to allow MJML to leave non-mjml syntax and still process it to allow HTML comments, smarty syntax and other such as

<!-- Shipping -->
{if $SHIPPING_METHOD}
<tr>
  <td>Shipping method</td>
  <td>{$SHIPPING_METHOD}</td>
</tr>
{/if}

[kassiwin]

You should try to use mj-raw to wrap everything that is template related. For instance: <mj-raw>{{if $SHIPPING_METHOD}}</mj-raw> Inside HTML tags you may just <td>{{$SHIPPING_METHOD}}</td>

[IanEdington]

Another thing that works in some cases is wrapping in a comment ie.

<!-- Shipping -->
<!-- {if $SHIPPING_METHOD} -->
  <tr>
    <td>Shipping method</td>
    <td>{$SHIPPING_METHOD}</td>
  </tr>
<!-- {/if} -->

On a more system level

This and similar issues have come up multiple times. Almost everyone who uses MJML uses some form of templates. MJML should play nice with templating systems without having to litter the code with comments and <mj-raw>. We should build in some kind of awareness that Templating languages exist into MJML so it can play nice with them.

[ngarnier]

The usage of mj-raw is necessary only when adding content outside of content blocks as it's invalid to have a text node outside of a content block. For example:

<mjml>
  <mj-body>
    <mj-raw>{if $SHIPPING_METHOD}</mj-raw>

    <mj-section>
      <mj-column>
        <mj-text>
          {$SHIPPING_METHOD}
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-raw>{/if}</mj-raw>
  </mj-body>
</mjml>

In your case, you don't need to use mj-raw:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-table>
          {if $SHIPPING_METHOD}
          <tr>
            <td>Shipping method</td>
            <td>{$SHIPPING_METHOD}</td>
          </tr>
          {/if}
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

If you look at the HTML output, you'll see that the table row is properly wrapped by the conditional.

[iRyusa]

most everyone who uses MJML uses some form of templates. MJML should play nice with templating systems without having to litter the code with comments and .

There's no way to have a parser that smart, mj-raw will still be required to ensure there's no issue parsing the MJML document. It's not really the end of the world to surround templating stuff inside mj-raw for few cases (conditionnals and loops mostly).

There's a lot of case where mj-raw just fix a really complex issue such as opening a tag and closing it in another mj-raw. Some other templating languages mimic an XML/HTML syntax that can confuse the parser too.

I'm closing.

[grandeljay]

I've just run into another issue which can seemingly not be solved via comments or <mj-raw>.

MJML is creating all this CSS at the beginning of the document and the template engine is trying to interpret it.

Example:

body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

and smarty is throwing snytax erros for this:

syntax error: unrecognized tag

This would usually be solved by wrapping {literal} around the CSS but since I can't do that in the MJML head I don't really know how to solve this now.

Any help is very appreciated!

[grandeljay]

MJML is creating all this CSS at the beginning of the document and the template engine is trying to interpret it. This would usually be solved by wrapping {literal} around the CSS but since I can't do that in the MJML head I don't really know how to solve this now.

This is still an issue for me.

Anything new on the front?