---
title: Temas de Email modernos en PrestaShop 8/9
section: trucos
slug: mail-themes
description: "Como crear y extender temas de email en PrestaShop 8/9 con el motor moderno: hookActionListMailThemes, layouts Twig, variables custom y transformaciones de diseno."
keywords: prestashop email tema mail theme Twig hookActionListMailThemes layout variables transformacion PS8 PS9
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/trucos/mail-themes"
---

# Temas de Email modernos en PrestaShop 8/9

> Como crear y extender temas de email en PrestaShop 8/9 con el motor moderno: hookActionListMailThemes, layouts Twig, variables custom y transformaciones de diseno.

PrestaShop 1.7.7+ incluye un motor de email moderno basado en **Twig** que sustituye al sistema antiguo de plantillas HTML/TXT. Permite crear temas de email completos, extender layouts del core y aplicar transformaciones de diseno sin modificar archivos del sistema.

## El motor de email moderno (PS 1.7.7+)

| Caracteristica | Sistema antiguo | Sistema moderno (PS 1.7.7+) |
| --- | --- | --- |
| Tecnologia | HTML/TXT estatico | Twig templates |
| Personalizacion | Edicion directa de archivos | Temas + Transformaciones |
| Multitienda | Limitada | Soporte completo |
| Activacion | Manual | BO: Diseno > Tema de email |

## Estructura de directorios

*Estructura de directorios para un tema de email en un modulo*

```bash
modules/mymodule/
├── mails/
│   ├── themes/
│   │   └── my_custom_theme/     # Nombre del tema
│   │       ├── assets/           # CSS, imagenes del tema
│   │       └── layouts/          # Plantillas Twig del tema
│   └── layouts/                  # Layouts que extienden el core
│       └── extended_order_conf.html.twig
└── mymodule.php
```

## Registrar un tema de email

*Registrar el tema via hookActionListMailThemes*

```php
<?php

use PrestaShop\PrestaShop\Core\MailTemplate\FolderThemeScanner;

public function install(): bool
{
    return parent::install()
        && $this->registerHook('actionListMailThemes')
        && $this->registerHook('actionGetMailLayoutTransformations')
        && $this->registerHook('actionBuildMailLayoutVariables');
}

/**
 * Registra el tema personalizado del modulo.
 * PrestaShop escaneara el directorio del tema y lo añade a la lista
 * disponible en BO > Diseno > Tema de email.
 */
public function hookActionListMailThemes(array $params): void
{
    /** @var \PrestaShop\PrestaShop\Core\MailTemplate\ThemeCollectionInterface $themes */
    $themes = $params['mailThemes'];

    $themePath = _PS_MODULE_DIR_ . $this->name . '/mails/themes/my_custom_theme';

    $scanner = new FolderThemeScanner();
    $myTheme = $scanner->scan($themePath);

    if (null !== $myTheme) {
        $themes->add($myTheme);
    }
}
```

## Extender layouts existentes

*Reemplazar el layout de confirmacion de pedido*

```php
<?php

use PrestaShop\PrestaShop\Core\MailTemplate\Layout\Layout;

/**
 * Reemplaza o extiende layouts del tema 'modern' del core.
 * Util para personalizar emails especificos sin crear un tema completo.
 */
public function hookActionListMailThemes(array $params): void
{
    $themes = $params['mailThemes'];

    foreach ($themes as $theme) {
        // Solo modificar el tema 'modern' del core
        if ($theme->getName() !== 'modern') {
            continue;
        }

        // Obtener el layout original de confirmacion de pedido
        $orderConf = $theme->getLayouts()->getLayout('order_conf', '');

        if ($orderConf) {
            $index = $theme->getLayouts()->indexOf($orderConf);

            // Reemplazar con nuestra version extendida
            $theme->getLayouts()->offsetSet($index, new Layout(
                'order_conf',
                '@Modules/mymodule/mails/layouts/extended_order_conf.html.twig',
                '@Modules/mymodule/mails/layouts/extended_order_conf.txt.twig'
            ));
        }
    }
}
```

*mails/layouts/extended_order_conf.html.twig — extender layout del core*

```twig
{# Extender el layout base del tema modern #}
{% extends '@MailThemes/modern/layouts/order_conf.html.twig' %}

{# Sobreescribir el bloque del footer para añadir logo de la empresa #}
{% block footer %}
  <table width="100%">
    <tr>
      <td align="center" style="padding: 20px;">
        <img src="{{ shop.logo }}" alt="{{ shop.name }}" height="40" />
      </td>
    </tr>
    <tr>
      <td align="center" style="font-size: 12px; color: #666;">
        {{ parent() }}
      </td>
    </tr>
  </table>
{% endblock %}
```

## Variables custom en emails

*Añadir variables dinamicas a los emails con hookActionBuildMailLayoutVariables*

```php
<?php

/**
 * Añade variables custom disponibles en todos los templates Twig de email.
 * Se llama en el momento de generar cada email.
 */
public function hookActionBuildMailLayoutVariables(array $params): void
{
    // $params['mailLayoutVariables'] es el array de variables del email

    // Añadir informacion de la empresa
    $params['mailLayoutVariables']['mymodule_company_slogan'] =
        Configuration::get('MY_MODULE_SLOGAN');

    // Añadir URL de redes sociales
    $params['mailLayoutVariables']['mymodule_facebook'] =
        Configuration::get('MY_MODULE_FACEBOOK_URL');

    // Añadir numero de soporte
    $params['mailLayoutVariables']['mymodule_support_phone'] =
        Configuration::get('MY_MODULE_SUPPORT_PHONE');
}
```

## Transformaciones de diseno

*Aplicar transformacion de colores con hookActionGetMailLayoutTransformations*

```php
<?php

use PrestaShop\PrestaShop\Core\MailTemplate\Transformation\AbstractTransformation;

/**
 * Aplica transformaciones al HTML del email antes de enviarlo.
 * Ejemplo: cambiar colores corporativos.
 */
public function hookActionGetMailLayoutTransformations(array $params): void
{
    $transformations = $params['layoutTransformations'];

    // Reemplazar el color principal del tema por el color de la tienda
    $shopColor = Configuration::get('PS_SHOP_COLOR');
    if ($shopColor) {
        // Puedes usar tu propia clase de transformacion
        // o usar las transformaciones del core
        $transformations->add(
            new class($shopColor) extends AbstractTransformation {
                private string $color;

                public function __construct(string $color) {
                    parent::__construct('text/html');
                    $this->color = $color;
                }

                public function apply(
                    \Twig\Environment $twig,
                    array $templateVariables
                ): array {
                    // Inyectar variable de color en el template
                    $templateVariables['shop_color'] = $this->color;
                    return $templateVariables;
                }
            }
        );
    }
}
```

## Activar el tema desde el BO

Una vez instalado el modulo, el tema estara disponible en el Back Office. Para activarlo y generar los archivos de email:

| Paso | Accion |
| --- | --- |
| 1 | BO > Diseno > Tema de email |
| 2 | Seleccionar tu tema en el desplegable 'Elegir tema de email' |
| 3 | Hacer clic en 'Generar emails' para crear los archivos HTML/TXT |
| 4 | Verificar en BO > Parametros avanzados > Email > Enviar email de prueba |

> **[TIP] Solo Twig — sin HTML estatico**
>
> El sistema moderno usa exclusivamente Twig para disenar los emails y genera los archivos HTML/TXT finales bajo demanda. No edites los archivos generados directamente ya que se sobreescriben al regenerar el tema.


---

*Fuente: [https://ayudaprestashop.es/trucos/mail-themes](https://ayudaprestashop.es/trucos/mail-themes). Version Markdown generada automaticamente para consumo por LLMs.*