| name | ps-email-preview |
| description | Generates a full-featured email template viewer for PrestaShop projects, deployed as email-preview/index.php (subfolder, ROOT = dirname(__DIR__)). Features: Geist font + Geist Mono UI matching Vercel design system; PS admin authentication via Cookie class (always denies on failure — never allows by default); CSRF protection on all write endpoints; sandboxed iframe (sandbox="allow-scripts"); shop logo and favicon resolved dynamically from PS DB; source version pill dropdown (custom, not native select) showing child/parent/core with colored dots and count badge; language pill dropdown (same custom pattern); sidebar with real-time search (F shortcut), Geist-style tabs in drawer and preview bar, source stack dots per template; "↑ child" button with Geist confirmation modal to copy template to child theme override; "Eliminar override" button with Geist destructive modal (red band, irreversibility warning) to delete the child override and revert to parent/core; Variables inspector drawer (tabs: Variables with clipboard badges + Diff vs core); auto-reload Watch mode polling filemtime; email client-style header (subject, avatar with Gravatar fallback, De/Para fields); subject line from static map; plain-text TXT preview tab; keyboard shortcuts (v/d/r/w/f/↑↓/Esc); sidebar footer showing logged-in PS employee with Gravatar avatar; "Datos reales" mock toggle substitutes variables in both text and attributes (links/images work in mock mode); variables in HTML attributes highlighted with dashed outline + badge after element; "Enviar test" button in topbar opens a Geist modal to send the current template with mock data to any real email address using PS Mail::Send() — requires Mailhog SMTP configured in PS backoffice. Use this skill whenever the user wants to preview, inspect, or redesign PrestaShop email templates, asks "where do email templates go in my theme", wants to see what emails look like, mentions "email preview", "ver templates de email", "previsualizar emails", "email viewer", or starts working on transactional emails in a PS project. Trigger proactively when the user is about to redesign emails.
|
| version | 5.0.0 |
| metadata | {"author":"Eduardo Calvo"} |
PS Email Preview
Genera un visor de email templates para PrestaShop en un solo archivo PHP.
Sirve para ver todos los templates renderizados, con variables resaltadas o
sustituidas por datos mock, y entiende la jerarquía de overrides de PS.
Características del visor
- UI con Geist font — diseño limpio estilo Vercel
- Logo de tienda en sidebar — resuelto dinámicamente desde la DB PS (
PS_LOGO_MAIL); si falla, muestra un icono con la inicial del child theme
- Badges de fuente — cada template muestra si viene de
child (azul), parent (gris borde) o core (gris claro)
- Buscador en el sidebar — filtra templates en tiempo real por nombre o clave, ocultando grupos vacíos
- Toggle de ancho de preview — botones 600 / 800 / full para testear el layout en anchos típicos de email
- Botón "↑ child" — copia el template seleccionado al child theme override con un clic; solo aparece cuando el template no es ya del child
- Drawer de Variables (Inspector) — panel lateral con dos pestañas:
- Variables — variables agrupadas en "Con dato mock" (azul) y "Sin dato mock" (gris); clic en cualquier badge copia
{variable} al portapapeles con toast de confirmación
- Diff vs core — muestra las líneas que difieren entre el override activo y el template core original; si no hay override muestra un aviso
- Selector de idioma — detectado automáticamente de
mails/*/ (solo visible si hay más de un idioma)
- Toggle "Datos reales" — sustituye variables por datos mock realistas; variables sin mock aparecen resaltadas en rojo
- "Enviar test" — botón en el topbar que abre un modal Geist para enviar el template actual con datos mock a cualquier email real; usa
Mail::Send() de PS con resolución automática de rutas (child theme primero); recuerda la última dirección usada en localStorage
- Navegación con teclado — flechas ↑↓ navegan entre templates cuando el buscador no está enfocado; Escape cierra el drawer
- Jerarquía de resolución — replica el comportamiento de PS: child theme → parent theme → core
Paso 1 — Detectar configuración del proyecto
Ejecuta estos comandos para recopilar los datos que necesitas:
