11 💬 Instalación y Configuración de SweetAlert2 | Alertas Dinámicas en el Sistema Ecommerce Laravel
Duración: 15 minDescripción
Lección 11: 💬 Implementación de Alertas Dinámicas con SweetAlert2
Antes de iniciar un nuevo módulo, Hilari Web aborda una mejora fundamental en la usabilidad del sistema: la gestión de notificaciones. Esta lección se centra en sustituir las alertas nativas y poco atractivas (alert()) por la librería SweetAlert2, ofreciendo una experiencia de usuario (UX) más moderna y elegante.
✨ Mejora de la Experiencia de Usuario (UX)
El objetivo principal es proporcionar retroalimentación visual al usuario por cada acción realizada (crear, actualizar, eliminar, guardar configuración), garantizando que el sistema confirme que los procesos se ejecutaron exitosamente [00:34]:
- 🚫 El Problema: Las acciones de CRUD se ejecutan sin ninguna notificación visual, dejando al usuario sin confirmación de éxito o error [00:49].
- ✅ La Solución (SweetAlert2): Una librería que ofrece pop-ups interactivos, con íconos, animaciones y un diseño más limpio, ideal para un sistema de e-commerce [02:16].
🚀 Instalación y Configuración Dinámica
La lección detalla la integración y la lógica para que las alertas se muestren de forma contextual y solo cuando sea necesario:
- 📥 Instalación Rápida: La librería se integra al proyecto añadiendo simplemente el CDN del script en el archivo principal de layout (layout/admin) [03:39], asegurando que esté disponible en todo el sistema.
- 📤 Envío desde el Controlador: Para hacer las alertas dinámicas, se utiliza el método ->with() en el controlador [08:17]. Esto envía dos variables de sesión (mensaje e icono) después de cada redirección de acción exitosa (Store, Update, Destroy).
- 💻 Activación Condicional: En la vista, se implementa un bloque de código <script> que solo se activa y ejecuta la alerta si y solo si la sesión contiene las variables mensaje e icono [09:50].
- ⏱️ Personalización: La alerta se configura para aparecer en la esquina superior derecha (top-end) y tener una duración visible (4,000 milisegundos) [05:58].
Al finalizar, el CRUD de Roles y el módulo de Ajustes ya utilizan estas alertas dinámicas [13:09], sentando un estándar de notificación para todo el proyecto.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
