How to apply a transformation to an email template from an external module

In this blog we will learn how to apply a transformation to an email template from an external module.

We can apply our own transformation to the content from our module.

We can add more content transformations. To implement this feature, we require that you know how to add email layouts to a theme. After adding a custom skin to the theme. Here is an example of email layout using TransformationInterface.
The TransformationInterface is a powerful and convenient way to easily modify the design of our email template. Let’s see the details of the interface:

<?php
namespace PrestaShop\PrestaShop\Core\MailTemplate\Transformation;

interface TransformationInterface

    /**
     * @param string $templateContent
     * @param array $templateVariables
     *
     * @return string
     */
    public function apply($templateContent, array $templateVariables);

    /**
     * Returns the type of templates this transformation is associated with,
     * either html or txt, so that the renderer knows if it has to be applied
     * or not
     *
     * @return string
     */
    public function getType();

    /**
     * @param LanguageInterface $language
     *
     * @return $this
     */
    public function setLanguage(LanguageInterface $language);

The apply method is the most important, it receives the displayed content looks like a string, then we can perform string replacement or even DOM (Document Object Model) manipulation as long as we return whole template as a string (if we don’t want to modify it, we can just return the string unchanged).

The getType method is used to filter transformations (transformation is applicable only) to one type, for that matter setLanguage method will let you know the language used in this generation, which is handy if you need to add localized texts or images.

let’s start

Look

For this example, we’ll use the same layout we use in How to Add Email Layouts to a Theme.

# 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">trans(, 'EmailsBody', locale)</strong>
          </font>
        </td>
      </tr>
      <tr>
        <td align="center" class="titleblock">
          <font size="2" face=" languageDefaultFont Open-sans, sans-serif" color="#555454">
            <span class="wk_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>'</span>
  </td>
</tr>
% endblock footer %

Note: The <span class="wk_subtitle"> containing a custom message, we’ll use a CSS selector for our content transformation.

Transformation class

In this example, we will create a class that implements TransformationInterface and define the necessary methods. Its purpose is to change the color of everyone <span> marks with wk_subtitle class.

<?php
namespace PrestaShop\Module\WkTestModule\MailTemplate\Transformation;

use PrestaShop\PrestaShop\Core\Exception\InvalidArgumentException;
use PrestaShop\PrestaShop\Core\MailTemplate\MailTemplateInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\Transformation\AbstractTransformation;
use Symfony\Component\DomCrawler\Crawler;
use DOMElement;

/**
 * Class CustomMessageColorTransformation adds the custom color to all spans
 * with class subtitle.
 */
class CustomMessageColorTransformation extends AbstractTransformation

    /** @var string */
    private $customColor;

    /**
     * @param string $customColor
     * @throws InvalidArgumentException
     */
    public function __construct($customColor)
    
        parent::__construct(MailTemplateInterface::HTML_TYPE);
        $this->customColor = $customColor;
    

    /**
     * @inheritDoc
     */
    public function apply($templateContent, array $templateVariables)
    
        $crawler = new Crawler($templateContent);
        $customSpans = $crawler->filter('span[class="wk_subtitle"]');
        /** @var DOMElement $customSpan */
        foreach ($customSpans as $customSpan) 
            $customSpan->setAttribute('style', sprintf('color: %s;', $this->customColor));
        

        return $crawler->html();

Using the hook

Now we need to add our transformation for this mentioned layout, to do this we will use the MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATIONS hook.
Executes the following hook name “actionGetMailLayoutTransformations”

Now we will define this hook in our main module file.

<?php
use PrestaShop\PrestaShop\Core\MailTemplate\MailTemplateInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\MailTemplateRendererInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\Transformation\TransformationCollectionInterface;
use PrestaShop\Module\WkTestModule\MailTemplate\Transformation\CustomMessageColorTransformation;

class WkTestModule extends Module 

   public function install() 
   
        return parent::install()
            // This class constant contains 'actionGetMailLayoutTransformations'
            && $this->registerHook(MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATIONS)
        ;
    
    
    public function uninstall() 
    
        return parent::uninstall()
            && $this->unregisterHook(MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATIONS)
        ;        
    
    
    public function enable() 
    
        return parent::enable()
            && $this->registerHook(MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATIONS)
        ;
    
    
    public function disable() 
    
        return parent::disable()
            && $this->unregisterHook(MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATIONS)
        ;        
    
    
    /**
     * @param array $hookParams
     */
    public function hookActionGetMailLayoutTransformations(array $hookParams)
    
            !isset($hookParams['layoutTransformations'])) 
            return;
        

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

        /** @var TransformationCollectionInterface $transformations */
        $transformations = $hookParams['layoutTransformations'];
        $transformations->add(new CustomMessageColorTransformation('#0000FF'));

We can check the result. To check, we need to go to the “Design > Email Theme” page and review our layout. We will see that our message has now changed color.