How to add an email layout and variables in a theme from a module

You can add your own email layout and variables from your module, they will then be included during email generation. Each time you install a language or if you generate them via the back office your layout will be rendered, translated, and exported in the appropriate folders.

So let’s start by creating a mail layout in modern theme.

You will first have to prepare your layouts, let’s say you store them in the mail/layouts folder of your module.

{# modules/demoemail/mails/layout/custom_modern_layout.html.twig #}
{% extends '@MailThemes/modern/components/layout.html.twig' %}

{% block content %}
  <table width="100%">
    <tr>
      <td align="center" class="titleblock">
        <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
          <span class="title">{{ 'This is an example mail template from my module for modern theme'|trans({}, 'EmailsBody', locale)|raw }}</span>
          <br>
          <span class="subtitle">{{ customMessage }}</span>
        </font>
      </td>
      
    </tr>
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
  </table>
{% endblock %}

Now you need to add your layout to the theme’s layout collection & your variables for this specific layout, in order to do so you will use the actionListMailThemes & actionBuildMailLayoutVariables hook.

So add the below code to your module class file.

<?php
use PrestaShop\PrestaShop\Core\MailTemplate\Layout\Layout;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeCatalogInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeCollectionInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutVariablesBuilderInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutInterface;

class Demoemail extends Module {
    public function __construct()
    {
        $this->name = 'demoemail';
        $this->tab = 'others';
        $this->version = '4.0.0';
        $this->author = 'webkul';
        $this->need_instance = 1;
        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('Demo Email');
        $this->description = $this->l('Demo Email');

        $this->confirmUninstall = $this->l('Are you sure?');

        $this->ps_versions_compliancy = array('min' => '1.7', 'max' => _PS_VERSION_);
    }
    public function install() {
        return parent::install()
            // This class constant contains 'actionListMailThemes'
            && $this->registerHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
            // This class constant contains 'actionBuildMailLayoutVariables'
            && $this->registerHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
        ;
    }

    public function uninstall() {
        return parent::uninstall()
            && $this->unregisterHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
            && $this->unregisterHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
        ;
    }

    public function enable($force_all = false) {
        return parent::enable($force_all = false)
            && $this->registerHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
            && $this->registerHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
        ;
    }

    public function disable($force_all = false) {
        return parent::disable($force_all = false)
            && $this->unregisterHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
            && $this->unregisterHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
        ;
    }

    /**
     * @param array $hookParams
     */
    public function hookActionListMailThemes(array $hookParams)
    {
        if (!isset($hookParams['mailThemes'])) {
            return;
        }

        /** @var ThemeCollectionInterface $themes */
        $themes = $hookParams['mailThemes'];

        /** @var ThemeInterface $theme */
        foreach ($themes as $theme) {
            if (!in_array($theme->getName(), ['classic', 'modern'])) {
                continue;
            }

            // Add a layout to each theme (don't forget to specify the module name)
            $theme->getLayouts()->add(new Layout(
                'custom_template',
                __DIR__ . '/mails/layouts/custom_' . $theme->getName() . '_layout.html.twig',
                '',
                $this->name
            ));
        }
    }

    /**
     * @param array $hookParams
     */
    public function hookActionBuildMailLayoutVariables(array $hookParams)
    {
        if (!isset($hookParams['mailLayout'])) {
            return;
        }

        /** @var LayoutInterface $mailLayout */
        $mailLayout = $hookParams['mailLayout'];
        if ($mailLayout->getModuleName() != $this->name || $mailLayout->getName() != 'custom_template') {
            return;
        }

        $hookParams['mailLayoutVariables']['customMessage'] = 'My custom message';
    }
}

You can then go to the “Design > Email Theme” page and preview the  modern layouts list.

You can then go to the “Design > Email Theme” page and preview your layout you will see that your message has been inserted in your template.

Now, you have learned how to add an email layout and variables in a theme from a module. That’s all about this blog.

If any issue or doubt in the above step, please feel free to let us know in the comment section.

We would be happy to help.

You can also explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].