Personalización avanzada de plantillas de email sin sobrescrituras

carlacart71

Hola a todos,

Estoy intentando personalizar las plantillas de correo electrónico transaccional en mi tienda PrestaShop 9.1.3. Específicamente, quiero cambiar el logo del encabezado y aplicar algunos estilos personalizados que no se pueden hacer desde Diseño > Tema de email.

He estado editando directamente el archivo mails/themes/classic/es/order_conf.html para incluir una ruta de imagen personalizada para el logo:

// mails/themes/classic/es/order_conf.html - intento de personalizar el logo para emails
<table class="table table-mail" style="width:100%;margin-top:10px;">
    <tr>
        <td align="center" class="logo" style="border-bottom:4px solid #333333;padding:7px 0;">
            <a title="{shop_name}" href="{shop_url}" style="color:#337ff1;">
                <img src="{shop_url}img/logos/mi-logo-email-personalizado.png" alt="{shop_name}" style="width:200px; height:auto;" />
            </a>
        </td>
    </tr>
    <!-- Resto del contenido del email -->

El problema es que cada vez que regenero las plantillas de email desde Diseño > Tema de email en el Back Office, o cuando actualizo un idioma, mis cambios se borran y el logo vuelve al predeterminado. Además, tengo dificultades para que los estilos CSS más modernos se vean bien en todos los clientes de correo.

¿Hay alguna forma de hacer esto permanente en PS 9.1.3 sin que se sobrescriba?

luciasevilla

Hola @carlacart71. Lo que describes es un comportamiento normal en PrestaShop, la carpeta mails/themes/classic no está pensada para ser editada directamente si quieres que los cambios persistan. Cuando regeneras las plantillas o actualizas un idioma, PrestaShop copia los archivos base de nuevo, sobrescribiendo cualquier modificación.

Para los estilos, tienes que pensar que los clientes de correo electrónico son como navegadores muy antiguos. Olvídate de flexbox, grid, o CSS moderno. Casi todo tiene que ir con tablas anidadas y estilos inline para asegurar una buena visualización en Gmail, Outlook, etc. Es un dolor, pero así es como funciona el email marketing.

mateocart

Exacto, @luciasevilla tiene toda la razón. Si quieres personalizar el logo y el diseño de forma permanente sin que se sobrescriba, la única solución robusta es crear tu propio tema de email. No basta con copiar los archivos a una nueva carpeta y esperar que aparezca en el BO.

Para que PrestaShop 9.1.3 lo reconozca y puedas seleccionarlo en Diseño > Tema de email, la estructura de la carpeta debe ser la correcta. Y dentro de tu tema de email personalizado, puedes sobrescribir el header.html para que apunte a tu logo específico, o incluso inyectar variables si necesitas logos condicionales. El {$shop_logo} viene del logo general de la tienda, y si quieres uno diferente para los emails, necesitas una solución a medida.

Milo

Hola @carlacart71,

Entiendo perfectamente tu frustración con la personalización de los emails. @luciasevilla y @pabloweb han dado en el clavo: modificar directamente los archivos en mails/themes/classic es una mala práctica porque serán sobrescritos. PrestaShop regenera esos archivos a partir de las fuentes principales.

La solución más limpia y persistente para tu PrestaShop 9.1.3 es doble:

Crear un tema de email personalizado: Debes crear una nueva carpeta dentro de mails/themes/ (por ejemplo, mails/themes/mi_tema_email/). Dentro de ella, copia los archivos de mails/themes/classic/{idioma}/ que quieras modificar (como header.html, footer.html, order_conf.html). Luego, en Diseño > Tema de email, podrás seleccionar mi_tema_email en el desplegable.
Inyectar variables personalizadas: Para el logo específico de email, en lugar de hardcodearlo en cada plantilla, puedes usar un módulo simple para inyectar una variable Smarty personalizada que luego usarás en tu header.html modificado. Así, el logo estará centralizado y será dinámico. Aquí tienes un ejemplo de cómo podrías implementar un hookActionGetExtraMailTemplateVariables en un módulo propio:

// modules/mi_modulo_email_personalizado/mi_modulo_email_personalizado.php
class MiModuloEmailPersonalizado extends Module
{
    public function __construct()
    {
        $this->name = 'mi_modulo_email_personalizado';
        $this->version = '1.0.0';
        $this->author = 'Milo';
        $this->bootstrap = true;
        parent::__construct();

Después de instalar este módulo y crear tu tema de email personalizado, edita el header.html dentro de mails/themes/mi_tema_email/es/ (o el idioma que uses) para usar {$email_logo_personalizado} en lugar de {$shop_logo} o tu ruta hardcodeada. Asegúrate de que la ruta img/logos/mi-logo-email-personalizado.png exista en tu instalación de PrestaShop.

Con esto, tus cambios serán persistentes y podrás gestionar mejor tus emails.

carlacart71

¡Mil gracias, @Milo! ¡Esto es exactamente lo que necesitaba! La explicación sobre la sobrescritura y la solución con el hook actionGetExtraMailTemplateVariables en un módulo es brillante. No se me había ocurrido inyectar una variable así.

He seguido tus pasos, he creado el módulo, he puesto la ruta de mi logo en la variable y he editado el header.html en mi nuevo tema de email personalizado. ¡Funciona perfectamente! Ya no se sobrescribe y puedo tener el logo que quiero en mis emails. Lo de los estilos inline es un mal menor, ya me lo esperaba.

¡Gracias de nuevo por la ayuda tan detallada!