How to add email layout variables from an external module
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.
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"> </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"> </td>
</tr>
</table>
</td>
</tr>
{% endblock %}
{% block footer %}
<tr>
<td class="space_footer"> </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"> </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"> </td>
</tr>
</table>
</td>
</tr>
{% endblock %}
{% block footer %}
<center>
<tr>
<td class="space_footer"> </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.
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 support@webkul.com.