Este proyecto es un carrito de compras para una tienda de ropa. Utiliza JavaScript para permitir al usuario agregar y eliminar productos del carrito de compras. Consta de diferentes funciones que se encargan de diferentes tareas para lograr el funcionamiento del carrito. DEMO (click aqui)
La función "cargarEventListeners" se encarga de añadir eventos a los elementos necesarios para que el carrito funcione correctamente, como los botones para agregar productos, eliminar productos y vaciar el carrito.
La función "agregarProducto" se activa cuando el usuario hace clic en el botón "agregar al carrito" en la sección de productos. Toma el producto seleccionado y lo agrega al carrito de compras mediante la función "leerDatosProducto".
La función "eliminarProducto" se activa cuando el usuario hace clic en el botón "X" para eliminar un producto del carrito. Elimina el producto del carrito y actualiza la vista del carrito.
La función "leerDatosProducto" toma el producto seleccionado y extrae la información necesaria como la imagen, nombre, precio y id del producto. Luego verifica si el producto ya existe en el carrito de compras y si es así, aumenta la cantidad de ese producto.
La función "carritoHTML" se encarga de crear y mostrar la tabla en HTML que muestra el contenido actual del carrito.
carrito-compras.webm
- ¿Qué es este proyecto?
- Este proyecto es un carrito de compras de una tienda de ropa, donde los usuarios pueden seleccionar productos y agregarlos al carrito.
- ¿Cómo funciona el carrito de compras?
- Los usuarios pueden seleccionar productos de la lista de productos y hacer clic en el botón "Agregar al carrito" para agregar el producto al carrito. También pueden eliminar productos del carrito haciendo clic en el botón "X" junto al producto en el carrito.
- ¿Cómo se vacía el carrito de compras?
- Los usuarios pueden vaciar el carrito de compras haciendo clic en el botón "Vaciar carrito" en la parte superior del carrito.
- ¿Cómo se maneja la cantidad de productos en el carrito?
- La cantidad de productos en el carrito se maneja automáticamente cuando los usuarios agregan o eliminan productos del carrito. Si un producto ya existe en el carrito, se incrementa la cantidad en lugar de agregar una nueva entrada del mismo producto.
- ¿Cómo se maneja la información del producto en el carrito?
- La información del producto se guarda en un objeto "infoProducto" que contiene los detalles del producto, como la imagen, el nombre, el precio, cantidad.
Contacto
Mas proyectos en:
Contacto
