Unificación de plantillas de correo electrónico en Laravel con componentes Blade
Introducción
En este artículo, exploraremos cómo unificar las plantillas de correo electrónico en un proyecto Laravel utilizando componentes Blade. Esto mejora la mantenibilidad y reduce la redundancia de código.
El problema
Un gran número de plantillas de correo electrónico (en este caso, 20) puede resultar difícil de mantener, especialmente si comparten un diseño común. Los cambios en el diseño requieren modificaciones en cada plantilla individual, lo que aumenta el riesgo de inconsistencias y errores.
La solución: Componentes Blade
Laravel ofrece componentes Blade como una forma de extraer secciones reutilizables de código en plantillas. Podemos crear un componente <x-email-layout> que contenga el diseño común de todas las plantillas de correo electrónico.
Paso 1: Crear el componente
Cree un nuevo componente Blade llamado email-layout.blade.php en el directorio resources/views/components:
<!-- resources/views/components/email-layout.blade.php -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Título del correo' }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;600&family=IBM+Plex+Mono&display=swap" rel="stylesheet">
<style>
body { font-family: 'Figtree', sans-serif; }
h1, h2 { font-family: 'IBM Plex Mono', monospace; }
</style>
</head>
<body>
<div class="container">
{{ $slot }}
<footer>
<p><a href="{{ $unsubscribeLink ?? '#' }}">Cancelar suscripción</a></p>
</footer>
</div>
</body>
</html>
Este componente define la estructura HTML básica, incluyendo la configuración de fuentes (Figtree para el cuerpo y IBM Plex Mono para los encabezados) y un enlace de cancelación de suscripción.
Paso 2: Usar el componente en las plantillas
Ahora, en lugar de repetir el diseño en cada plantilla de correo electrónico, simplemente use el componente <x-email-layout>:
<!-- resources/views/emails/welcome.blade.php -->
<x-email-layout title="Bienvenido">
<h1>¡Bienvenido a nuestra plataforma!</h1>
<p>Gracias por registrarte.</p>
</x-email-layout>
Beneficios
- Reducción de la redundancia de código (DRY): El diseño común se define en un solo lugar.
- Mayor mantenibilidad: Los cambios en el diseño se aplican fácilmente modificando el componente.
- Consistencia: Todas las plantillas de correo electrónico comparten el mismo diseño, lo que garantiza una experiencia de usuario coherente.
Enlaces de cancelación de suscripción
Se agregaron enlaces de cancelación de suscripción a los correos electrónicos de marketing (bienvenida, primera publicación) a través de URL firmadas. Esto permite a los usuarios cancelar fácilmente su suscripción.
Traducciones
Se agregó una clave de traducción genérica para la cancelación de la suscripción en los 4 idiomas del sitio.
