¡Consulta esta publicación en mis notas web!

En nuestro artículo anterior, terminamos de crear las páginas principales de nuestra tienda de comercio electrónico, y ahora es el momento de avanzar más y agregar algunos elementos dinámicos como modales y notificaciones. En primer lugar, la ventana modal será útil para la vista rápida del producto, gestión de productos, etc., y la función de notificaciones es crucial porque es la mejor manera de comunicarse con el usuario, desde los mensajes de bienvenida hasta los mensajes de venta. Sí, como entendiste en la introducción y el título, nuestro artículo de hoy consistirá en lo siguiente:

1. Creación de modales personalizados en Nuxt.js
2. Configurando Mensajes de Notificación en nuestra tienda de Comercio Electrónico

Ahora que sabemos lo importantes que son los modales y las alertas, estudiemos cómo integrarlos en nuestra aplicación de comercio electrónico Nuxt.js y entremos en los detalles de implementación.

1. Creando modales personalizados en Nuxt.js

Necesitamos aclarar que queremos crear una ventana modal reutilizable para que pueda usarse de muchas maneras y mostrar diferentes datos. Para eso, crearemos un componente modal principal con estilos y elementos específicos de modal que podrían representarse dentro de nuestro componente modal.

Lo primero es crear un archivo Modal.vue dentro de la carpeta "ui" con un contenedor que debe difuminar el fondo y un div modal en su interior que contendrá elementos renderizados dinámicamente. Además, importaremos el ícono "xmark" y lo convertiremos en un botón que cerrará nuestra ventana modal.

Dentro de nuestra tienda base, agregaremos dos nuevas variables "modalStatus" con un valor falso y "modalType" como String, y agregaremos acciones simples que modificarán estos valores.

aSetModalStatus(status) {
    this.modalStatus = status;
},
aSetModalType(type) {
    this.modalType = type;
},

La variable de estado controlará el comportamiento de renderizado modal y el tipo actualizará diferentes tipos modales.

Ahora, cuando tenemos un sistema de control modal, podemos agregar nuestro componente modal al diseño predeterminado. No olvides importar nuestra tienda base.

Genial, nuestro componente modal reutilizable está listo, ahora si queremos mostrar el modal simplemente necesitamos actualizar el valor modalStatus dentro de la tienda base.

Además, puedes agregar los estilos que quieras al componente modal, pero te recomiendo que uses "Glassmorphism" y se verá elegante.

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    .modal {
        min-width: 300px;
        min-height: 300px;
        background: rgba( 255, 255, 255, 0.9 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 13px );
        -webkit-backdrop-filter: blur( 13px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        padding: 24px;
        display: flex;
        flex-direction: column;
        &__close {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            &--btn {
                border: none;
                background-color: transparent;
                cursor: pointer;
                outline: none;
                display: flex;
                align-items: center;
            }
            &--icon {
                color: #6c757d;
                font-size: 20px;
            }
        }
    }
}

Hicimos un gran trabajo aquí, pero le ofrezco continuar y crear el primer componente que utilizará nuestro modal: "Vista previa del producto", que estará disponible después de que se haga clic en el botón de vista previa en cualquier tarjeta de producto. Creemos un nuevo archivo Vue dentro de la carpeta "común" y agreguemos algunos elementos HTML/CSS:

Luego importe este componente al archivo Modal.vue e insértelo en la división de contenido.

Ahora, solo necesitamos agregar una función como "showPreview" a nuestra tarjeta para que después de que el usuario haga clic, esa función establezca el tipo modal en "product-preview" y el estado modal en "true". Eso es todo, tenemos una funcionalidad de vista previa del producto y modal reutilizable.

Bien, debemos seguir adelante y agregar mensajes de alerta a nuestro proyecto Nuxt.js.

2. Configurar Mensajes de Notificación en nuestra tienda de Comercio Electrónico

Está bien, podemos agregar algo como un modal, cambiar sus estilos y llamarlo alertas, suena como una solución simple y rápida. Pero, ¿qué pasa si se activan dos o más alertas al mismo tiempo (por ejemplo, un mensaje de "bienvenida" y un mensaje de "tu lista de deseos no está vacía")? Para solucionar este problema crearemos un contenedor de alertas que se irá ampliando tanto como la cantidad de mensajes entrantes.

En primer lugar, agregaremos configuraciones de alerta a nuestra tienda, similar a lo que hicimos con la parte modal. Agregue la matriz "notificationsList" a la parte de estado y agregue acciones de notificación que enviarán y eliminarán la notificación de la lista. Cada notificación tiene un ID único y muestra el estado, tipo, mensaje y retraso (cantidad de tiempo que nuestro mensaje estará visible).

aSetNotification(payload) {
    const notification = {
        id: uuidv4(),
        show: true,
        type: payload.type,
        msg: payload.msg,
        delay: payload.delay ? payload.delay : 7000,
    }
    this.notificationsList.push(notification);
},
aRemoveNotification(id) {
    const indexToRemove = this.notificationsList.findIndex((element) => element.id === id);
    if (indexToRemove !== -1) {
        this.notificationsList.splice(indexToRemove, 1);
    }
},

A continuación, debemos crear un componente de "Notificación" que mostrará un mensaje en sí, según el tipo de mensaje. Además, debemos utilizar el tiempo de retraso y eliminar mensajes automáticamente.

Puedes diseñar tus mensajes como quieras. Yo, como de costumbre, usaré "Glassmorphism" y agregaré algo de color.

.alert-success {
    background: rgba( 114, 255, 136, 0.45 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

Y el toque final, necesitamos crear nuestro contenedor de mensajes y agregar ese contenedor al archivo app.vue.

El contenedor de notificaciones simplemente representará una matriz de nuestra lista que se almacena en el archivo base.

No olvides agregar el "Contenedor de notificaciones" al archivo principal app.vue.

Eso es todo, podemos reiniciar nuestro servidor de desarrollo y activar mensajes de notificación varias veces, solo para verificar el resultado.

Con la integración de modales y notificaciones, nuestra aplicación de comercio electrónico Nuxt.js se ha vuelto más dinámica, interactiva y fácil de usar. Estos elementos contribuyen a una experiencia de compra mejorada, permitiendo a nuestros clientes obtener una vista previa de los productos y mantenerse informados durante todo su recorrido.

A medida que continuamos construyendo y mejorando nuestra plataforma de comercio electrónico, podemos ampliar aún más la funcionalidad de los modales y las notificaciones, adaptándolas a casos de uso específicos y garantizando una experiencia fluida y atractiva para nuestros usuarios.

Si necesita un código fuente para este tutorial, puede obtenerlo aquí.