DataFirefly Editor de emails transaccionales para PrestaShop

Presentación

El módulo dfmaileditor sustituye el contenido de los emails transaccionales de PrestaShop 8 y 9 por diseños creados en un editor visual. No modifica ningún archivo de /mails ni del tema y no instala ningún override: en el momento del envío, intercepta el email con los hooks actionEmailSendBefore y actionEmailAddAfterContent y aporta su propio HTML y su propia versión de texto.

Mientras un email no tenga un diseño activo, PrestaShop envía su email nativo. Si el renderizado de un diseño falla, el error se registra y sale el email nativo: ningún envío se bloquea.

Instalación

1. En Módulos > Gestor de módulos, haz clic en Subir un módulo y envía el archivo dfmaileditor.zip.
2. El módulo crea sus tablas, la carpeta img/dfmaileditor para las imágenes y la página Diseño > Editor de emails.
3. Ningún email cambia al instalar: los diseños se crean inactivos y los activas uno a uno.

La lista de emails

La página principal del módulo lista los emails de la tienda por grupo: pedidos, pago, estado del pedido, cuenta de cliente, alertas para el comerciante y otras plantillas. Los emails de los módulos instalados se detectan y aparecen en el último grupo.

• Interruptor Activado / Desactivado: activa el diseño del email. Desactivado, se envía el email nativo.
• Diseñar o Editar abre el editor. La cruz elimina el diseño y devuelve el control al email nativo.
• Bajo cada email: la fecha de la última modificación y el número de envíos hechos con el diseño en los últimos 30 días.
• El campo de búsqueda filtra la lista por nombre de email o de plantilla.

Diseñar todos los emails a partir de un estilo

Este botón crea de una vez los diseños de los 16 emails principales: confirmación de pedido, en espera de transferencia, en espera de cheque, pago aceptado, error de pago, preparación en curso, enviado, en tránsito, pendiente de reposición, pedido cancelado, reembolso, vale, creación de cuenta, invitado convertido en cliente, restablecimiento de contraseña y la alerta de nuevo pedido del módulo ps_emailalerts.

Elige uno de los tres estilos viendo su vista previa:

• Limpio: azul marino, fuente del sistema, alineado a la izquierda.
• Atelier: títulos en Palatino, botones con contorno, esquinas rectas.
• Vivo: franja de color arriba, botones rellenos, esquinas redondeadas.

Opciones: Usar mi color de marca (definido en Ajustes), Sustituir los diseños existentes y Activarlos ahora. Sin esta última casilla, los diseños quedan inactivos para que los revises. Los textos están redactados en cada idioma instalado entre francés, inglés, español, alemán, italiano, neerlandés, polaco y portugués; los demás idiomas reciben el texto en inglés.

El editor

El editor tiene tres columnas:

• A la izquierda, la paleta de bloques y la estructura del email. Haz clic en un bloque de la paleta para añadirlo bajo el bloque seleccionado, o arrástralo a la estructura. Reordena la estructura arrastrando.
• En el centro, la vista previa. Un clic en un bloque lo selecciona. Encima: los idiomas, el cambio escritorio / móvil, el campo de ID de pedido, el asunto del email y la pastilla Comprobaciones.
• A la derecha, la pestaña Bloque con los ajustes del bloque seleccionado y la pestaña Email con los ajustes de todo el email.

La barra superior contiene Partir de un estilo, Historial, Enviar una prueba, el interruptor Activo y Guardar. Atajos: Ctrl+S guarda, Ctrl+Z deshace, Ctrl+Y rehace, Supr elimina el bloque seleccionado.

Los bloques

• Contenido: título, texto (negrita, cursiva, subrayado, enlaces, listas), botón, imagen, imagen y texto, recuadro destacado, tres columnas.
• Pedido: detalles del pedido (referencia, fecha, pago, transportista), productos pedidos, totales del pedido, direcciones.
• Marketing: productos recomendados, vale personal, banner promocional.
• Diseño: cabecera con logotipo, separador, espaciador, redes sociales, HTML personalizado, pie del email.

El bloque Productos pedidos muestra en cada línea la foto de la combinación pedida, el nombre, los atributos, las personalizaciones del cliente, la referencia opcional, la cantidad y el precio unitario con o sin impuestos según los Ajustes. Los Productos recomendados se eligen automáticamente, entre los accesorios de los productos pedidos, los más vendidos, las novedades o una lista de IDs, de 2 a 4 productos; los productos ya pedidos se excluyen.

El bloque HTML personalizado acepta tu propio código, por idioma, por ejemplo un widget de opiniones. Los scripts, formularios, iframes y atributos de eventos se eliminan al guardar.

Espaciado y visibilidad

Cada bloque tiene fondo, espacio superior e inferior, márgenes laterales (-1 usa los del email) y dos opciones:

• Ocultar en móvil.
• Mostrar solo si esta variable tiene valor: por ejemplo el botón Seguir mi paquete con la variable followup, que queda oculto mientras el paquete no tenga enlace de seguimiento. En el editor, un bloque oculto por su condición aparece atenuado.

Ajustes del email

La pestaña Email ajusta el asunto y el texto de vista previa de la bandeja de entrada (por idioma), el fondo de la página y del email, el ancho de 480 a 720 px, los márgenes, el radio de las esquinas, las fuentes de títulos y texto y los colores: texto, texto secundario, principal (botones), texto sobre el color principal, enlaces, líneas, fondo de los recuadros. Un asunto vacío conserva el asunto de PrestaShop.

Variables

El botón { } junto a los campos abre la lista de variables del email con su valor de ejemplo: {firstname}, {order_name}, {shop_url}, {followup}… PrestaShop las sustituye al enviar. Los enlaces pueden contener una variable, por ejemplo {shop_url} o {followup}.

Idiomas

Las pastillas encima de la vista previa cambian el idioma mostrado y editado. Un punto naranja en una pastilla señala un texto que falta en ese idioma; el bloque afectado lleva el código de idioma en la estructura. Bajo un campo vacío, Copiar el texto de toma el texto de otro idioma. Al enviar, un texto que falta se sustituye por el del idioma por defecto de la tienda y después por el inglés.

Vista previa, prueba y comprobaciones

• Escritorio / Móvil muestra el email con el ancho de una pantalla de 390 px.
• Vista previa con: introduce un ID de pedido para ver el email con los productos, totales y direcciones de ese pedido. Sin ID, se usan datos de ejemplo.
• Enviar una prueba envía el contenido del editor, aunque no esté guardado, a la dirección y en el idioma elegidos. No se crea ningún vale.
• Comprobaciones señala: un email de más de 102 KB (Gmail lo corta y oculta el final), textos que faltan por idioma, una imagen sin texto alternativo, un botón sin texto o sin enlace, la falta de texto de vista previa o de cabecera, un vale personal colocado en un email para el comerciante. Un clic en un punto selecciona el bloque afectado.

Historial

Cada guardado conserva una versión, hasta 20 por email. Restaurar carga una versión en el editor; guarda para conservarla. La misma ventana ofrece Exportar este diseño y Eliminar el diseño.

Compartir y copiar

• Usar este bloque en todos mis emails, al final de los ajustes de un bloque: sustituye el bloque del mismo tipo en todos los demás emails diseñados. Se añade una cabecera o un pie donde falte. Útil para cambiar el pie una sola vez.
• Aplicar estos colores y fuentes a todos mis emails, arriba de la pestaña Email: traslada colores, fuentes, ancho y márgenes sin tocar asuntos ni textos de vista previa.
• Partir de un estilo > Copiar el diseño de otro email: toma los bloques y colores de un email ya diseñado y mantiene el asunto y el texto de vista previa del email actual.

Vale personal

Este bloque muestra un código promocional único para el cliente. Ajustes: título, texto, texto encima del código, botón y su enlace, tipo de descuento (porcentaje, importe fijo o envío gratis), valor, validez de 1 a 365 días, importe mínimo de pedido y prefijo del código (por ejemplo GRACIAS da GRACIAS-K7P2M9QX). En los textos, {voucher_value} muestra el valor del descuento y {voucher_expiry} la fecha de fin.

• El código se crea cuando el email se envía de verdad, como regla de carrito reservada al cliente y de un solo uso.
• Si el mismo email se reenvía para el mismo pedido, por ejemplo desde la ficha del pedido, se reutiliza el código ya creado.
• Las vistas previas y los emails de prueba muestran un código de ejemplo y no crean nada.
• El vale solo se muestra si el destinatario es el cliente: nunca aparece en la alerta de nuevo pedido enviada al comerciante.

Las reglas creadas llevan la descripción dfmaileditor: nombre_de_plantilla en Catálogo > Descuentos > Reglas del carrito.

Banners promocionales

La pestaña Banners promocionales gestiona banners reutilizables. Cada banner tiene un nombre interno, un estado, fechas de inicio y fin opcionales, un color de fondo para la zona de texto y una lista de emails elegidos (todos o una selección). Por idioma: imagen (JPG, PNG o GIF, 1200 px de ancho recomendados, 3 MB máx.), enlace, texto alternativo, titular, texto y código promocional a mostrar.

En un email, el bloque Banner promocional muestra el primer banner activo dirigido a ese email (modo automático, en el orden de la lista) o un banner concreto. Un banner programado aparece y desaparece solo según sus fechas.

Ajustes

• Usar los emails diseñados: interruptor general. Desactivado, todos los emails vuelven al formato nativo y los diseños se conservan.
• Precios con impuestos en los bloques de productos: precios unitarios y totales de línea con o sin impuestos.
• Color de marca: lo usan los estilos prediseñados cuando se marca la opción.
• Tamaño de imagen en las líneas del pedido y en los productos recomendados, entre los formatos de imagen de producto de la tienda.
• Redes sociales: enlaces mostrados por el bloque Redes sociales como pastillas de texto. Un campo vacío oculta la red.
• Seguimiento de enlaces: añade utm_source, utm_medium y utm_campaign (nombre de la plantilla) solo a los enlaces hacia tu tienda.

Exportación e importación

Exportar, en la lista, descarga un ZIP con todos los diseños de la tienda y las imágenes subidas con el módulo; el historial de un email ofrece la exportación de ese diseño. Sin la extensión PHP ZipArchive, la exportación es un JSON sin imágenes.

Importar acepta ese ZIP o JSON. Las imágenes se comprueban (solo JPG, PNG o GIF reales) y se copian en img/dfmaileditor. Opciones: sustituir los diseños existentes, mantener activos los diseños que lo estaban en la exportación. Sin estas casillas, los emails ya diseñados se omiten y los nuevos diseños llegan inactivos. Los banners no forman parte de la exportación.

Solución de problemas

Un email sigue saliendo en formato nativo

Comprueba que el diseño está activo en la lista y que el interruptor general de Ajustes está activado. Si el email se dispara desde el back-office (cambio de estado del pedido), PrestaShop omite los hooks de un módulo cuando el perfil del empleado conectado no tiene el permiso Ver sobre ese módulo: concédelo en Parámetros avanzados > Equipo > Permisos > Módulos. Por último, revisa Parámetros avanzados > Registros: un error de renderizado aparece con el prefijo [dfmaileditor].

Las imágenes no se ven en el email del cliente

Las imágenes se cargan desde la URL pública de la tienda: no se ven desde una tienda local o protegida con contraseña. Algunos clientes de correo bloquean las imágenes hasta que el destinatario las autoriza; se muestra entonces el texto alternativo.

Gmail muestra «Mensaje recortado»

El email supera los 102 KB. Quita bloques, sobre todo HTML personalizado voluminoso, o muestra menos productos recomendados. La pastilla Comprobaciones indica el peso exacto.

El vale no aparece

En el editor y en las pruebas se muestra un código de ejemplo. En el envío real, el vale solo aparece para un único destinatario que sea el cliente del pedido, o un cliente existente en los emails de cuenta.

Dos listas de productos en el email

Otro módulo añade sus propias líneas de productos a los emails. Desactívalo para los emails diseñados: el bloque Productos pedidos ya muestra las fotos.