prestashop/mjml-theme-converter

Tool used to convert a PrestaShop mail theme from MJML to twig

mjml-theme-converter

This application is used to convert MJML mail themes for PrestaShop into Twig mail themes.

To convert a theme use this command:

./bin/console prestashop:mail:convert-mjml modern_mjml {twig_theme_path}

On Windows use

php bin/console prestashop:mail:convert-mjml modern_mjml {twig_theme_path}

twig_theme_path is the output folder (it must exist before running the command). It is an absolute path or a path relative to the project root.

The modern_mjml theme is located in this project in the mails/themes folder.

Create your own email template

• fork PrestaShop/mjml-theme-converter and install it with git clone
• Run composer install
• Install mjml. Either install it globally or install it with npm install.
• Copy app/config/parameters.yml.dist to app/config/parameters.yml. Set the parameter mjml_use_npm accordingly to the way mjml is installed
• The base theme, written in MJML (MailJet Markup Language) is in the folder /mails/themes/modern_mjml. Adjust it to your needs.
• Run above command (e.g. php bin/console prestashop:mail:convert-mjml modern_mjml ../prestashop/mails/themes/modern if the two projects PrestaShop/mjml-theme-converter and PrestaShop/Prestashop are located in the same folder) to convert your mjml templates to twig templates. This will create all the twig files (and overwrite the existing).
• In Prestashop Backoffice, menu Design - Email Theme, select your theme and click on Generate emails for all your installed languages.

Note about the structure of the layout templates

In layout.mjml.twig (and similar in order_layout.mjml.twig) we have:

<mj-wrapper>
  {% block header %}
  {% include '@MjmlMailThemes/modern_mjml/components/header.mjml.twig' %}
  {% endblock %}

  {% block content %}
  {% endblock %}

  {% block footer_content %}
  {% endblock %}
</mj-wrapper>
{% block footer %}
  {% include '@MjmlMailThemes/modern_mjml/components/footer.mjml.twig' %}
{% endblock %}

All blocks are wrapped by <mj-wrapper>, but the footer. If you want to change the wrapping, in src/AppBundle/Converter/TwigTemplateConverter.php, you have to adapt the code such that true or false is passed as parameter $isWrapped to reflect your changes.

mjml-theme-converter's Issues

The testing tool maildev chokes on a link tag in the header

As pointed out by @marwachelly in PrestaShop/PrestaShop#25992 (comment), maildev does not display an email correctly (height get's not adjusted, when the email contains <link rel="stylesheet"> in the header.

The PR #14 introduced these two new lines as below. The fix intended to not remove conditional <style> tags in the header, but it kept also <link> tags. This was probably not the good choice.

   + <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
   + <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet" type="text/css">
     <style type="text/css">
       @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
       @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);
     </style>

It would always be possible to argue that there is a bug in maildev. Should we try to fix the problem at the root in https://github.com/maildev/maildev or just fix here to get the tests working smoothly? IMHO it is simpler to fix here.

Min PHP version should be 7.3 in composer.json

Compatibility on Windows, duplicate code fragments

I found multiple issues:

mjml is not compatible with Windows, for two reasons:

• we cannot use which mjml to find the executable
• the directory separators are backslashes

The default layout templates do not validate on mjml.io. Error: mj-spacer cannot be used inside mj-body

If mj-section is used inside mj-wrapper there are duplicated code fragments <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]--> and <!--[if mso | IE]></table><![endif]-->.

The twig tags {% block styles %} are misplaced such that all the style are duplicated in the final html files.

There is also a bug with generation of the email templates in the BO of Prestashop, that will cause issues when the emails are viewed using Outlook as email client. This bug is addressed in a separate PR for Prestshop/Prestashop

Change for PS 1.7.8.0

With PS 1.7.8.0, the module followup was renamed in ps_reminder. To stay compatible with the latest version of PS, we should rename the corresponding mail templates folder (mails/themes/lp_mjml/modules/followup).

Associated CSS for columns not generated in header or footer

Hi!
I'm testing out this converter for few days, and i realized when i've section with multiple columns like this:
<mj-section background-color="#ffffff" padding="32px 78px" text-align="center" border-top="1px solid rgba(0, 0, 0, 0.08)"> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Paiement <br> sécurisé</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Livraison <br> offerte</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Retour gratuit <br> sous 14 jours</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Service <br> après-vente</mj-text> </mj-column> <mj-column> <mj-image padding="0" width="40px" height="40px" align="center" src="/assets/icon.png"></mj-image> <mj-text font-size="12px" line-height="16px" padding="16px 0 0 0" align="center">Garanties</mj-text> </mj-column> </mj-section>

In this case, when i generate the html.twig files, my header and my footer are generated right but not the associated css.

In my html i've class like this:
mj-column-per-20
But no CSS with this class ...

In conclusion all the CSS seems to be generated from layout.mjml.twig (if i create a section with 5 empty columns, the CSS is rightly generated) and ignored in footer and header.mjml.twig..

Do you have any idea how to fix this behavior?

Thanks for your help!