Reading list Switch to dark mode

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

    Updated 3 June 2022

    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.

    Start your headless eCommerce
    now.
    Find out More
    <?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.

    1-1

    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.

    email layout and variables

    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].

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home