Apply an email template transformation from a module

In this blog, we will learn how to apply the transformation in Prestashop modern email templates from a module.

The Prestashop has an TransformationInterface interface to modify your template’s design easily. Here are the interface details:

<?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 either html or text
     *
     * @return string
     */
    public function getType();

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

Visit the GitHub link https://github.com/PrestaShop/PrestaShop/blob/8.0.0/src/Core/MailTemplate/Transformation/TransformationInterface.php to get more information about this interface.

The apply method receives the rendered layout as a string to perform replacement and DOM manipulation.

If you don’t want to modify it simply return the string without any changes. The getType method is used to filter transformations and the setLanguage method will allow you to know about the language used in email generation to identify localized content.

In the following example, we are using a modern custom layout. If you want to create a new layout then follow our other blog.

{# modules/demoemail/mails/layout/customizable_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>
        </font>
      </td>
    </tr>
    <tr>
      <td align="center" class="titleblock">
        <font size="2" face="{{ languageDefaultFont }}Open-sans, sans-serif" color="#555454">
          <span class="customTitle">{{ exampleMsg }}</span>
        </font>
      </td>
    </tr>
    <tr>
      <td class="space_footer">&nbsp;</td>
    </tr>
  </table>
{% endblock %}

In the above code the <<strong><em>span class="customTitle"></em></strong> that contains the message, we will use this as a CSS selector to apply our transformation.

In the below code, we’ll create a class ExampleMsgColorTransformation that will extend AbstractTransformation abstract class. The AbstractTransformation class implements the TransformationInterface. The objective of this class is to change the color of all the <span> tags with the customTitle class.

<?php
namespace PrestaShop\Module\Demoemail\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 ExampleMsgColorTransformation adds the custom color to all spans
 * with class subtitle.
 */
class ExampleMsgColorTransformation 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="customTitle"]');
        /** @var DOMElement $customSpan */
        foreach ($customSpans as $customSpan) {
            $customSpan->setAttribute('style', sprintf('color: %s;', $this->customColor));
        }

        return $crawler->html();
    }
}

Now add your transformation for this layout, you need to use the actionGetMailLayoutTransformations hook to render this from the module.

<?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\Demoemail\MailTemplate\Transformation\ExampleMsgColorTransformation;

class Demoemail extends Module 
{
   public function install() 
   {
        return parent::install()
            && $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)
    {
        if (!isset($hookParams['templateType']) ||
            MailTemplateInterface::HTML_TYPE !== $hookParams['templateType'] ||
            !isset($hookParams['mailLayout']) ||
            !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 ExampleMsgColorTransformation('#FF0000'));
    }
}