Chapters

22 Chapters | 1:32:28 |

01

Instalar el Mailer

3:21
02

Enviar nuestro primer correo electrónico

3:17
03

Un correo electrónico mejor

3:11
04

Previsualizar correos electrónicos con Mailtrap (Pruebas de correo electrónico)

2:08
05

Correos electrónicos en HTML

3:47
06

CSS en el correo electrónico

4:12
07

Estilo de correo electrónico real con Inky y Foundation CSS

3:36
08

Archivos adjuntos e imágenes

3:49
09

Global Desde (y Diversión) con Eventos de Correo Electrónico

4:06
10

Envío en producción con Mailtrap

3:40
11

Seguimiento de correos electrónicos con etiquetas y metadatos

3:37
12

Envío asíncrono y reintentable con Messenger

3:39
13

Generar URLs en el entorno CLI

4:55
14

Aserciones de correos electrónicos en pruebas funcionales

6:01
15

Diseño Twig de correo electrónico

4:32
16

Correo electrónico desde el comando CLI

4:32
17

Prueba del comando CLI

4:43
18

Servicio de fábrica de correos electrónicos

4:29
19

El Componente Webhook para Eventos de Email

3:49
20

Demostración de nuestro webhook a través de un agujero de gusano

3:19
21

Bonificación: Programar nuestro comando de correo electrónico

5:49
22

Bonificación: Messenger Monitor Bundle

7:56

> Symfony 7 > Mailer y Webhook con Mailtrap

07.

Estilo de correo electrónico real con Inky y Foundation CSS

Autoplay

Previous Challenge

Next Challenge

Para que este correo electrónico tenga un aspecto realmente elegante, tenemos que mejorar el HTML y el CSS.

Empecemos por el CSS. Con el CSS estándar de un sitio web, es probable que hayas utilizado un framework CSS como Tailwind (que utiliza nuestra aplicación), Bootstrap o Foundation. ¿Existe algo así para los correos electrónicos? Sí Y es aún más importante utilizar uno para los correos electrónicos porque hay muchos clientes de correo electrónico que los renderizan de forma diferente.

CSS de Foundation para correos electrónicos

Para los correos electrónicos, recomendamos utilizar Foundation, ya que tiene un marco específico para correos electrónicos. Busca en Google "Foundation CSS" y encontrarás esta página.

Descarga el kit de inicio para la "Versión CSS". Este archivo zip incluye un archivo foundation-emails.css que es el "framework" real.

Ya lo he incluido en el directorio tutorials/. Cópialo enassets/styles/.

En nuestro booking_confirmation.html.twig, el filtro inline_css puede tomar varios argumentos. Haz que el primer argumento sea source('@styles/foundation-emails.css')y utiliza email.css para el segundo argumento:

            Copy Code

                            Show All Lines

                        24 lines
            |
            templates/email/booking_confirmation.html.twig
        
            {% apply inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
        
                Show Lines

                                                    // ... lines 2 - 24

Esto contendrá estilos personalizados y anulaciones.

Abriré email.css y pegaré algo de CSS personalizado para nuestro correo electrónico:

            Copy Code

                        12 lines
            |
            assets/styles/email.css
        
            .trip-name {
        
                font-size: 32px;
        
            }
        
            .accent-title {
        
                color: #666666;
        
            }
        
            .trip-image {
        
                border-radius: 12px;
        
            }

¡Tablas!

Ahora tenemos que mejorar nuestro HTML. Pero ¡qué noticia más rara! La mayoría de las cosas que utilizamos para dar estilo a los sitios web no funcionan en los correos electrónicos. Por ejemplo, no podemos utilizar Flexbox ni Grid. En su lugar, tenemos que utilizar tablas para la maquetación. ¡Tablas! Tablas, dentro de tablas, dentro de tablas. ¡Qué asco!

Lenguaje de plantillas Inky

Por suerte, hay un lenguaje de plantillas que podemos utilizar para hacer esto más fácil. Busca "inky templating language" para encontrar esta página. Inky está desarrollado por la Fundación Zurb. Zurb, Inky, Foundation... ¡estos nombres encajan perfectamente con nuestro tema espacial! ¡Y todos funcionan juntos!

Puedes hacerte una idea de cómo funciona en la vista general. Este es el HTML necesario para un simple correo electrónico. ¡Es un infierno de tabla! Haz clic en la pestaña "Cambiar a Inky". ¡Guau! ¡Esto es mucho más limpio! Escribimos en un formato más legible e Inky lo convierte en la tabla-horror necesaria para los correos electrónicos.

Incluso hay "componentes Inky": botones, llamadas, cuadrículas, etc.

En tu terminal, instala un filtro Twig de Inky que convertirá nuestro marcado Inky en HTML.

composer require twig/inky-extra

`inky_to_html` Filtro Twig

En booking_confirmation.html.twig, añade el filtro inky_to_htmla apply, canalizando inline_css a continuación:

            Copy Code

                            Show All Lines

                        24 lines
            |
            templates/email/booking_confirmation.html.twig
        
            {% apply inky_to_html|inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
        
                Show Lines

                                                    // ... lines 2 - 24

En primer lugar, aplicamos el filtro Inky y, a continuación, alineamos el CSS.

Copiaré algunas marcas Inky para nuestro correo electrónico.

            Copy Code

                        33 lines
            |
            templates/email/booking_confirmation.html.twig
        
            {% apply inky_to_html|inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
        
                <container>
        
                    <row>
        
                        <columns>
        
                            <spacer size="40"></spacer>
        
                            <p class="accent-title">Get Ready for your trip to</p>
        
                            <h1 class="trip-name">{{ trip.name }}</h1>
        
                        </columns>
        
                    </row>
        
                    <row>
        
                        <columns>
        
                            <p class="accent-title">Departure: {{ booking.date|date('Y-m-d') }}</p>
        
                        </columns>
        
                    </row>
        
                    <row>
        
                        <columns>
        
                            <button class="expanded rounded center" href="{{ url('booking_show', {uid: booking.uid}) }}">
        
                                Manage Booking
        
                            </button>
        
                            <button class="expanded rounded center secondary" href="{{ url('bookings', {uid: customer.uid}) }}">
        
                                My Account
        
                            </button>
        
                        </columns>
        
                    </row>
        
                    <row>
        
                        <columns>
        
                            <p>We can't wait to see you there,</p>
        
                            <p>Your friends at Universal Travel</p>
        
                        </columns>
        
                    </row>
        
                </container>
        
            {% endapply %}

Tenemos un <container>, con <rows> y<columns>. Este será un correo electrónico de una sola columna, pero puedes tener tantas columnas como necesites. Este <spacer> añade espacio vertical para respirar.

¡Veamos este correo electrónico en acción! Reserva un nuevo viaje para Steve, ¡ups, debe ser una fecha en el futuro, y reserva!

Comprueba Mailtrap y encuentra el correo electrónico. ¡Vaya! ¡Esto tiene mucho mejor aspecto! Podemos utilizar este pequeño widget que Mailtrap proporciona para ver cómo se verá en móviles y tabletas.

Mirando el "HTML Check", parece que tenemos algunos problemas, pero, creo que mientras estemos usando Foundation e Inky como es debido, deberíamos estar bien.

Comprueba los botones. "Gestionar reserva", sí, funciona. "Mi cuenta", sí, también funciona. ¡Eso ha sido un éxito rápido gracias a Foundation e Inky!

A continuación, vamos a mejorar aún más nuestro correo electrónico incrustando la imagen del viaje y haciendo felices a los abogados añadiendo un archivo adjunto en PDF con las "condiciones del servicio".

10 Comments

Sort By

giorgiocba 6 months ago

En php.ini extension=xls is enabled but the error still appears

| Reply |

Victor SFCASTS giorgiocba 6 months ago edited

Hey @giorgiocba ,

That's great! First of all, please make sure that the extension=xls line does not start #, otherwise that's commented out and you need to uncomment it first. Also, make sure the php.ini file is correct, probably you're in the wrong file? You can check if the extension is enabled by running php -m | grep xls in your terminal. If you don't see it prints xls - then most probably you're in the wrong file. You can watch the path to the php.ini file in the output of php --ini command.

Please, also make sure you don't have a few versions of PHP installed in your system, otherwise a different version might be used that reads a different config file.

Also, how do you run the website? Do you use symfony serve command as recommended? Please, try to restart the Symfony built in server after any changes in the php.ini file and try again.

I hope that helps!

Cheers!

| Reply |

giorgiocba Victor 6 months ago

Victor: Thank you so much for all your help. Your explanations are very clear and concise.

| Reply |

Victor SFCASTS giorgiocba 6 months ago edited

Hey @giorgiocba ,

You're welcome, I hope that helped! And feel free to ask questions if you have any issues following our tutorials.

Cheers!

| Reply |

giorgiocba 6 months ago

Third problem
After installing inky another error appears:
An exception has been thrown during the rendering of a template ("Undefined constant "XSL_SECPREF_READ_FILE"").

| Reply |

Victor SFCASTS giorgiocba 6 months ago edited

Hey @giorgiocba ,

Yeah, that's most probably because you installed twig/inky-extra with --ignore-platform-req=ext-xsl. You need to have that xsl PHP extension installed and enabled in your PHP to use the bundle without issues.

Cheers!

| Reply |

giorgiocba 6 months ago

Other problem:
When I install: composer require twig/inky-extra
This not work, It is better suggested: composer require twig/inky-extra --ignore-platform-req=ext-xsl

| Reply |

Victor SFCASTS giorgiocba 6 months ago edited

Hey @giorgiocba ,

Yes, that twig/inky-extra package requires you to have xsl PHP extension. You have to install it to avoid problems with that bundle.

Cheers!

| Reply |

giorgiocba 6 months ago

Hi,
When write: {% apply inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
The are an error: There are no registered paths for namespace "styles".

| Reply |

Victor SFCASTS giorgiocba 6 months ago edited

Hey @giorgiocba ,

We registered that styles path in the previous chapter, see: https://symfonycasts.com/screencast/mailtrap/css-email#twig-styles-namespace

Please, make sure you did the same in your project. If you did, probably try to clear the cache and try again.

Cheers!

| Reply |

Symfony 7.2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "doctrine/dbal": "^3", // 3.9.4
        "doctrine/doctrine-bundle": "^2.13", // 2.13.2
        "doctrine/doctrine-fixtures-bundle": "^3.6", // 3.7.1
        "doctrine/orm": "^3.3", // 3.3.1
        "dragonmantank/cron-expression": "^3.4", // v3.4.0
        "knplabs/knp-time-bundle": "^2.4", // v2.4.0
        "league/html-to-markdown": "^5.1", // 5.1.1
        "symfony/asset": "7.2.*", // v7.2.0
        "symfony/asset-mapper": "7.2.*", // v7.2.0
        "symfony/console": "7.2.*", // v7.2.1
        "symfony/doctrine-messenger": "7.2.*", // v7.2.3
        "symfony/dotenv": "7.2.*", // v7.2.0
        "symfony/flex": "^2", // v2.4.7
        "symfony/form": "7.2.*", // v7.2.0
        "symfony/framework-bundle": "7.2.*", // v7.2.2
        "symfony/mailer": "7.2.*", // v7.2.0
        "symfony/mailtrap-mailer": "7.2.*", // v7.2.0
        "symfony/messenger": "7.2.*", // v7.2.3
        "symfony/monolog-bundle": "^3.10", // v3.10.0
        "symfony/remote-event": "7.2.*", // v7.2.0
        "symfony/runtime": "7.2.*", // v7.2.0
        "symfony/scheduler": "7.2.*", // v7.2.3
        "symfony/security-csrf": "7.2.*", // v7.2.2
        "symfony/stimulus-bundle": "^2.21", // v2.22.1
        "symfony/twig-bundle": "7.2.*", // v7.2.0
        "symfony/validator": "7.2.*", // v7.2.2
        "symfony/webhook": "7.2.*", // v7.2.0
        "symfony/yaml": "7.2.*", // v7.2.0
        "symfonycasts/tailwind-bundle": "^0.7.1", // v0.7.1
        "twig/cssinliner-extra": "^3.18", // v3.18.0
        "twig/extra-bundle": "^3.0", // v3.18.0
        "twig/inky-extra": "^3.19", // v3.19.0
        "twig/twig": "^3.0", // v3.18.0
        "zenstruck/messenger-monitor-bundle": "^0.5.1" // v0.5.1
    },
    "require-dev": {
        "phpunit/phpunit": "^9.5", // 9.6.22
        "symfony/browser-kit": "7.2.*", // v7.2.0
        "symfony/css-selector": "7.2.*", // v7.2.0
        "symfony/debug-bundle": "7.2.*", // v7.2.0
        "symfony/maker-bundle": "^1.61", // v1.62.1
        "symfony/phpunit-bridge": "^7.1", // v7.2.0
        "symfony/stopwatch": "7.2.*", // v7.2.2
        "symfony/web-profiler-bundle": "7.2.*", // v7.2.2
        "zenstruck/browser": "^1.9", // v1.9.1
        "zenstruck/console-test": "^1.7", // v1.7.0
        "zenstruck/foundry": "^2.2", // v2.3.0
        "zenstruck/mailer-test": "^1.4" // v1.4.2
    }
}

Previous Challenge

Next Challenge

Estilo de correo electrónico real con Inky y Foundation CSS

Share this awesome video!

CSS de Foundation para correos electrónicos

¡Tablas!

Lenguaje de plantillas Inky

`inky_to_html` Filtro Twig

10 Comments

Delete comment?

What PHP libraries does this tutorial use?

	{% apply inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
Show Lines	// ... lines 2 - 24

	.trip-name {
	font-size: 32px;
	}

	.accent-title {
	color: #666666;
	}

	.trip-image {
	border-radius: 12px;
	}

	{% apply inky_to_html\|inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
Show Lines	// ... lines 2 - 24

	{% apply inky_to_html\|inline_css(source('@styles/foundation-emails.css'), source('@styles/email.css')) %}
	<container>
	<row>
	<columns>
	<spacer size="40"></spacer>
	<p class="accent-title">Get Ready for your trip to</p>
	<h1 class="trip-name">{{ trip.name }}</h1>
	</columns>
	</row>
	<row>
	<columns>
	<p class="accent-title">Departure: {{ booking.date\|date('Y-m-d') }}</p>
	</columns>
	</row>
	<row>
	<columns>
	<button class="expanded rounded center" href="{{ url('booking_show', {uid: booking.uid}) }}">
	Manage Booking
	</button>
	<button class="expanded rounded center secondary" href="{{ url('bookings', {uid: customer.uid}) }}">
	My Account
	</button>
	</columns>
	</row>
	<row>
	<columns>
	<p>We can't wait to see you there,</p>
	<p>Your friends at Universal Travel</p>
	</columns>
	</row>
	</container>
	{% endapply %}

Estilo de correo electrónico real con Inky y Foundation CSS

CSS de Foundation para correos electrónicos

¡Tablas!

Lenguaje de plantillas Inky

inky_to_html Filtro Twig

10 Comments

What PHP libraries does this tutorial use?

`inky_to_html` Filtro Twig