73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
const productos = [
|
|
{ nombre: "Teclado", precio: 8500 },
|
|
{ nombre: "Mouse", precio: 4200 },
|
|
{ nombre: "Monitor", precio: 62000 },
|
|
{ nombre: "Auriculares", precio: 11000 },
|
|
{ nombre: "Webcam", precio: 15500 }
|
|
];
|
|
|
|
// El carrito es un array de objetos { nombre, precio, cantidad }, que
|
|
// inicializamos vacío fuera de las funciones (para que sea global):
|
|
const carrito = [];
|
|
|
|
const listaProductos = document.querySelector("#productos");
|
|
|
|
function actualizarCarrito() {
|
|
const totalParrafo = document.querySelector("#total");
|
|
const listaCarrito = document.querySelector("#carrito");
|
|
listaCarrito.innerHTML = "";
|
|
|
|
// Calculamos el total mientras construimos la lista.
|
|
let total = 0;
|
|
|
|
for (const item of carrito) {
|
|
const subtotal = item.precio * item.cantidad;
|
|
total += subtotal;
|
|
|
|
const li = document.createElement("li");
|
|
li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
|
|
listaCarrito.appendChild(li);
|
|
}
|
|
|
|
totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
|
|
}
|
|
|
|
function agregarAlCarrito(producto) {
|
|
// Buscamos si el producto ya está en el carrito.
|
|
const itemExistente = carrito.find(item => item.nombre === producto.nombre);
|
|
|
|
if (itemExistente) {
|
|
// Si ya existe, solo incrementamos la cantidad.
|
|
itemExistente.cantidad++;
|
|
} else {
|
|
// Si no existe, lo agregamos manualmente con cantidad 1,
|
|
// copiando las propiedades una por una.
|
|
carrito.push({
|
|
nombre: producto.nombre,
|
|
precio: producto.precio,
|
|
cantidad: 1
|
|
});
|
|
}
|
|
|
|
actualizarCarrito();
|
|
}
|
|
|
|
// Construimos la lista de productos con un botón por cada uno.
|
|
for (const producto of productos) {
|
|
const listaProductos = document.querySelector("#productos");
|
|
const card = document.createElement("div");
|
|
card.className = "product-card";
|
|
card.innerHTML = `
|
|
<div>
|
|
<p class="product-name">${producto.nombre}</p>
|
|
<p class="product-price">$${producto.precio.toLocaleString()}</p>
|
|
</div>
|
|
<button class="btn-add">+ Agregar</button>
|
|
`;
|
|
card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto));
|
|
listaProductos.appendChild(card);
|
|
}
|
|
|
|
actualizarCarrito();
|
|
|