Cómo aplicar una transformación a una plantilla de correo electrónico desde un módulo externo

En este blog, aprenderemos cómo aplicar una transformación a una plantilla de correo electrónico desde un módulo externo.

Podemos aplicar nuestra propia transformación al contenido de nuestro módulo.

Podemos agregar múltiples transformaciones de contenido. Para implementar esta función, necesitamos que sepas cómo agregar diseños de correo electrónico en un tema. Después de agregar un diseño personalizado a un tema. A continuación se muestra un ejemplo de un diseño de correo electrónico que utiliza TransformationInterface.
El TransformationInterface Es una forma potente y práctica de modificar fácilmente el diseño de nuestra plantilla de correo electrónico. Veamos los detalles de la interfaz:

<?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);
}

El apply El método es el más importante, recibe el contenido del diseño renderizado como una cadena, luego podemos realizar el reemplazo de la cadena o incluso la manipulación del DOM (Document Object Model) siempre que devolvamos el entero plantilla como una cadena (si no queremos modificarla, simplemente podemos devolver la cadena sin modificar).

El getType El método se utiliza para filtrar transformaciones (una transformación solo es aplicable) para uno tipo, en cuanto a la setLanguage Este método le permitirá conocer el idioma utilizado en esta generación, lo cual es útil si necesita agregar textos o imágenes localizados.

Empecemos,

Disposición

Para este ejemplo, usaremos el mismo diseño que usamos en Cómo agregar diseños de correo electrónico en un tema.

{# 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="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>'|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 %}

Nota la <span class="wk_subtitle"> que contiene el mensaje personalizado, usaremos un selector CSS para nuestra transformación de contenido.

La clase de transformación

En este ejemplo, vamos a crear una clase que implemente el TransformationInterface y definir los métodos necesarios. Su propósito es cambiar el color de todos los <span> etiquetas con el wk_subtitle clase.

<?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();
    }
}

usando el gancho

Ahora necesitamos agregar nuestra transformación para este diseño mencionado, para hacer esto usaremos el gancho MailTemplateRendererInterface::GET_MAIL_LAYOUT_TRANSFORMATION.
Deriva el siguiente nombre de enlace «actionGetMailLayoutTransformations»

Ahora, vamos a definir este gancho en el archivo principal de nuestros módulos.

<?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)
    {
        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 CustomMessageColorTransformation('#0000FF'));
    }
}

Podemos comprobar el resultado. Para verificar, debemos ir a la página «Diseño> Tema de correo electrónico» y obtener una vista previa de nuestro diseño. Veremos que nuestro mensaje ahora ha cambiado de color.

Eso es todo sobre este blog.

Si tiene algún problema o duda en el paso anterior, no dude en hacérnoslo saber en la sección de comentarios.

Estariamos felices de ayudar.

También puede explorar nuestros Servicios de desarrollo PrestaShop y una amplia gama de módulos PrestaShop de calidad.

Para cualquier duda contacta con nosotros en [email protected].