Reading list Switch to dark mode

    Apply an email template transformation from a module

    Updated 12 December 2022

    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.

    Searching for an experienced
    Prestashop Company ?
    Find out More

    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'));
        }
    }
    email_template

    Now go to the “Design > Email Theme” page and preview your layout you will see that your message has now changed its color.

    email_template_1

    That’s all about this blog.

    If any issues or doubts please feel free to mention them in the comment section.

    I would be happy to help.

    Also, you can explore our PrestaShop Development Services & 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