Reading list Switch to dark mode

    How to add email layout variables from an external module

    Updated 5 March 2024

    In this blog, we are about to learn, How to add email layout variables in a theme from an external module.

    We can add our own email layout variables from our module.

    We can add email layout variables. To implement this feature we require you to know How to add email layouts in a theme. After adding a customized layout to a theme. Here is an example of an email layout using a customizedMessage variable.

    Let’s start,

    We store them in the mail/layouts folder of our module.

    Searching for an experienced
    Prestashop Company ?
    Find out More

    our_module_name/mail/layouts/custom_classic_webkul_layout.html.twig

    {# modules/WkTestModule/mails/layout/custom_classic_webkul_layout.html.twig #}
    
    {# You can use the theme layout (if present) to extend it easily #}
    {% extends '@MailThemes/classic/components/layout.html.twig' %}
    
    {% block content %}
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
    <tr>
      <td class="space_footer">
        <table width="100%">
          <tr>
            <td align="center" class="titleblock">
              <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
                <strong class="title">{{ 'This is an example mail template from my test module for classic theme'|trans({}, 'EmailsBody', locale)|raw }}</strong>
              </font>
            </td>
          </tr>
          <tr>
            <td align="center" class="titleblock">
              <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
                <span class="subtitle">{{ customizedMessage }}</span>
              </font>
            </td>
          </tr>
          <tr>
            <td class="space_footer">&nbsp;</td>
          </tr>
        </table>
      </td>
    </tr>
    {% endblock %}
    {% block footer %}
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
    <tr>
      <td class="footer" style="border-top: 4px solid #333333">
        <span>{{ '<a href="{shop_url}">{shop_name}</a> created by <a
            href="https://webkul.com/">Webkul</a>'|trans({'{prestashop_url}':
          'https://www.prestashop.com/?utm_source=marchandprestashop&utm_medium=e-mail&utm_campaign=footer_1-7'},
          'Emails.Body', locale)|raw }}</span>
      </td>
    </tr>
    {% endblock footer %}

    our_module_name/mail/layouts/custom_modern_webkul_layout.html.twig

    {# modules/WkTestModule/mails/layout/custom_modern_webkul_layout.html.twig #}
    {% extends '@MailThemes/modern/components/layout.html.twig' %}
    
    {% block content %}
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
    <tr>
      <td class="space_footer">
        <table width="100%">
          <tr>
            <td align="center" class="titleblock">
              <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
                <strong class="title">{{ 'This is an example mail template from my test module for modern theme'|trans({}, 'EmailsBody', locale)|raw }}</strong>
              </font>
            </td>
          </tr>
          <tr>
            <td align="center" class="titleblock">
              <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
                <span class="subtitle">{{ customizedMessage }}</span>
              </font>
            </td>
          </tr>
          <tr>
            <td class="space_footer">&nbsp;</td>
          </tr>
        </table>
      </td>
    </tr>
    {% endblock %}
    {% block footer %}
    <center>
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
    <tr>
      <td class="footer" style="border-top: 4px solid #333333">
        <span>{{ '<a href="{shop_url}">{shop_name}</a> created by <a
            href="https://webkul.com/">Webkul</a>'|trans({'{prestashop_url}':
          'https://www.prestashop.com/?utm_source=marchandprestashop&utm_medium=e-mail&utm_campaign=footer_1-7'},
          'Emails.Body', locale)|raw }}</span>
      </td>
    </tr>
    </center>
    {% endblock footer %}

    Now we will register a new hook named “actionBuildMailLayoutVariables”. It is used to add a new variable in the email layout to our theme’s layout collection.
    This class constant LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK also can be used as “actionBuildMailLayoutVariables

    <?php
    use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutVariablesBuilderInterface;
    use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutInterface;
    
    class WkTestModule extends Module 
    {
        public function __construct()
    	{
    		$this->name = 'wktestmodule';
    		$this->tab = 'front_office_features';
    		$this->version = '4.0.0';
    		$this->author = 'Webkul';
    		$this->need_instance = 0;
    		parent::__construct();
    		$this->bootstrap = true;
    		$this->secure_key = Tools::encrypt($this->name);
    		$this->displayName = $this->l('Wk Test Module');
    		$this->description = $this->l('Wk Test Module');
    		$this->confirmUninstall = $this->l('Are you sure you want to uninstall this module?');
    		$this->ps_versions_compliancy = array(
    			'min' => '1.7',
    			'max' => _PS_VERSION_
    		);
    	}
        
        public function install() 
        {
            return parent::install()
                && $this->registerHook('actionBuildMailLayoutVariables')
            ;
        }
        
        public function uninstall() 
        {
            return parent::uninstall()
                && $this->unregisterHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
            ;        
        }
        
        public function enable($force_all = false) 
        {
            return parent::enable()
                && $this->registerHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
            ;
        }
        
        public function disable($force_all = false) 
        {
            return parent::disable()
                && $this->unregisterHook(LayoutVariablesBuilderInterface::BUILD_MAIL_LAYOUT_VARIABLES_HOOK)
            ;        
        }
        
        /**
         * @param array $hookParams
         */
        public function hookActionBuildMailLayoutVariables(array $hookParams)
        {
            if (!isset($hookParams['mailLayout'])) {
                return;
            }
    		// dump($hookParams['mailLayout']);exit;
            /** @var LayoutInterface $mailLayout */
            $mailLayout = $hookParams['mailLayout'];
            if ($mailLayout->getModuleName() != $this->name) {
                return;
            }
    
            $hookParams['mailLayoutVariables']['customMessage'] = 'Always Shop From HERE...';
        }
    }

    We can see the result here. Go to the “Design > Email Theme” page and preview our layout. We will see the result as follows.

    email layout variables

    That’s all about this blog.

    If any issues or doubts 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