Mjml: PHP variables (dollar sign) escaped in links when there is no previous dollar sign

[hilnius]

MJML Version: 2.3.3
Issue: when using the "$" sign (for PHP variables) in MJML and having the $ in a button[href] attribute, the dollar is escaped. If the "$" sign has been used before, then it is not escaped.

First MJML code : MJML will generate <a href="{{{ $link }}}">

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>
            {{{ trans('hello', [$world]) }}}
          </mj-text>
          <mj-button href="{{{ $link }}}">text</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Second MJML code : MJML will generate <a href="{{{ $link }}}">

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>
            {{{ trans('hello') }}}
          </mj-text>
          <mj-button href="{{{ $link }}}">text</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Third test : MJML will generate <a href="{{{ &#36;link1 }}}"></a><a href="{{{ $link2 }}}"></a>

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-button href="{{{ $link1 }}}">test</mj-button>
          <mj-button href="{{{ $link2 }}}">test</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[iRyusa]

Hi @hilnius
Probably related #402 and #343

We have no solution for this atm. The best workaround for this, is to change $ by an HTML safe char in your MJML and replace it to $ in the HTML

[encolpe]

Having the same problems with python templating (it uses a similar syntaxt). The good way to work is to replace variables before to run the MJML parser. If you want to create a cached version of the template you need to escape characters.

[iRyusa]

Looks to be fixed in MJML 3.3.5, feel free to reopen if you're still experiencing the issue

[windows1087]

It doenst work with mj-button href attribute :/

[iRyusa]

Looks like it does here ? https://mjml.io/try-it-live/Syi8R3pR-

[windows1087]

Hm, i use the cli mjml in version 3.3.5 with this npm script:

"./node_modules/.bin/mjml ./src/assets/mails/templates/*.mjml.blade.php -o ./src/assets/mails/compiled"

And he gives me for

<mj-column>
  <mj-button href="{{ $url }}"></mj-button>
</mj-column>

this

<a href="{{ &#36;url }}" ...

[iRyusa]

Mh, we have a different parser on mjml.io and the release might be the issue. However it will be fixed in MJML4

[slavarazum]

@iRyusa So, still no solution to use it with another template languages like blade?
With php variables and another directives like \@if \@foreach, for now mjml cuts any non mjml elements.

[iRyusa]

You should be able to do so with mj-raw Best approach is to apply the templating prior to MJML

[slavarazum]

@iRyusa It looks so strange

<mj-section>
    <mj-raw>
        @if ($condition)
    </mj-raw>
        <mj-column>
             <mj-text>Some text</mj-text>
        </mj-column>
    <mj-raw>
        @endif
    </mj-raw>
</mj-section>

And it doesn't works for elements attributes with php variables(with $), button href for example, it will returns -
<a href="{{ &#36;url }}>Link</a>

[iRyusa]

As said in this ticket the encoding is solved in the current Alpha, we didn't found who's the culprit of not decoding the $sign to avoid conflicting with regexp in MJML 3.X

As said, templating language should be applied before MJML, it's just a way to handle the case you want to do MJML -> HTML and then Templating(HTML) -> HTML rather than Templating(MJML String) -> MJML -> HTML

[mattlub]

@iRyusa Hi, if I still prefer to do MJML before templating, could something like this:

<mj-section>
    <mj-raw>{{#each items}}</mj-raw>
        <mj-column>
             <mj-text>Some text</mj-text>
        </mj-column>
    <mj-raw>{{/each}}</mj-raw>
</mj-section>

cause rendering problems? For example because when the MJML is compiled it expects 1 column, but really there will be multiple columns.

[iRyusa]

Yep it could, because your columns will all be 100% width and if you have more than 1 item the layout will break in Outlook desktop ( all column will be inlined instead of pushed down)

[mattlub]

@iRyusa ok, thanks- it seems that table rows don't cause any problems, but do you know of any issues arising from generating extra rows/other components stacking vertically?

[EliotSlevin]

@iRyusa This issue got me, and has seemed to be fixed, but just not in v 4.0.0?

E.g. this test case works fine online https://mjml.io/try-it-live/H1F-Q9nuf, but locally with version 4.0.0 of core and cli, the mj-button link gets escaped, breaking the template.

[liviuignat]

Any news on this thread? I can confirm the node package still escapes the template.

[iRyusa]

What version you're using @liviuignat ? It should be fine now on 4.3.X & 4.4.X

[liviuignat]

Thanks @iRyusa updating did the trick.