Librería Benmar

pantalla principal proyecto

Descripción

Este proyecto fue realizado por deseo propio de indagar tras hacer un curso sobre Javascript moderno y buenas prácticas de este lenguaje. Simula ser una librería con un catálogo de productos con el que se puede interactuar libremente.

Secciones

pagina principal En cuanto entramos a la página, nos encontramos con el catálogo de libros disponibles, sus portadas, títulos, autores, precios y un botón que nos invita a comprar el libro.

carrito Además, en la página principal, nos encontramos arriba a la derecha con nuestro carrito de compras, que inicialmente está vacío por lo que tiene un cero a su lado. Si inspeccionamos nuestro carrito, nos aparecerá un cartel de aviso de que no tiene nada dentro.

productos agregados Una vez que empezamos a hacer click en la opción de comprar, los libros que elegimos se van agregando a nuestro carrito. Podemos ver que el número que antes era cero ahora asciende, y dentro del carrito vemos todos los datos de nuestros libros.
Además, nos permite agregar más o menos libros iguales, eliminar el producto directamente de nuestro carrito, vaciarlo por completo, ver el total de la compra, o incluso completar la compra de desearlo.

completar compra Una vez que el carrito tiene todo lo deseado y se clickea en completar compra, se abre un modal invitando al usuario comprador a completar sus datos. Una vez que lo haya hecho, podrá seguir adelante con el botón de "Comprar" o bien cancelar con el botón correspondiente.

validaciones Dentro del formulario, hay algunos campos que precisan ciertas validaciones. Cuando una de ellas no se cumpla, como que el número de tarjeta no tenga los 16 dígitos correspondientes o el correo electrónico no tenga un formato válido, no se podrá avanzar con la compra y aparecerá un mensaje con el error sucedido para poder corregirlo.

compra finalizada Una vez que todos los campos hayan sido completados correctamente y se haya hecho click en "Comprar", la solicitud de compra se habrá iniciado (recordemos que es un simulacro), y le aparecerá por unos segundos un cartel al usuario avisándole que la compra fue realizada exitosamente. Además, en esta instancia, los datos del formulario se resetearan a cero.

Tecnologías utilizadas