Producto agregado al carrito.
```
---
### 2. Lógica del Carrito con Cookies (`assets/js/carrito.js`)
Este script en JavaScript puro maneja la interactividad del catálogo: actualiza los precios visualmente cuando el cliente cambia el select y guarda los productos en una cookie llamada `bella_espuma_carrito`.
```javascript
// Actualiza el precio visualmente cuando se cambia la concentración
function actualizarPrecio(selectElement) {
const id = selectElement.getAttribute('data-id');
const concentrado = selectElement.value;
let precio = 0;
if (concentrado === 'Bajo') precio = selectElement.getAttribute('data-pbajo');
if (concentrado === 'Medio') precio = selectElement.getAttribute('data-pmedio');
if (concentrado === 'Alto') precio = selectElement.getAttribute('data-palto');
// Actualizar el texto en pantalla
document.getElementById(`precio_display_${id}`).innerText = `$${parseFloat(precio).toFixed(2)}`;
}
// Función para manejar las cookies (Leer y Escribir)
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i=0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// Agregar producto al carrito
function agregarAlCarrito(idProducto) {
// Obtener los elementos del DOM
const selectElement = document.querySelector(`.selector-concentrado[data-id="${idProducto}"]`);
const inputCantidad = document.getElementById(`cant_${idProducto}`);
const nombre = selectElement.getAttribute('data-nombre');
const concentrado = selectElement.value;
const cantidad = parseFloat(inputCantidad.value);
let precioUnitario = 0;
if (concentrado === 'Bajo') precioUnitario = selectElement.getAttribute('data-pbajo');
if (concentrado === 'Medio') precioUnitario = selectElement.getAttribute('data-pmedio');
if (concentrado === 'Alto') precioUnitario = selectElement.getAttribute('data-palto');
// Crear el objeto del item
const item = {
id: idProducto,
nombre: nombre,
concentrado: concentrado,
cantidad: cantidad,
precio: parseFloat(precioUnitario)
};
// Leer carrito actual de la cookie
let carrito = [];
const cookieCarrito = getCookie('bella_espuma_carrito');
if (cookieCarrito) {
carrito = JSON.parse(cookieCarrito);
}
// Comprobar si el producto con la MISMA concentración ya está en el carrito
const indiceExistente = carrito.findIndex(p => p.id === idProducto && p.concentrado === concentrado);
if (indiceExistente !== -1) {
// Si existe, sumamos la cantidad
carrito[indiceExistente].cantidad += cantidad;
} else {
// Si no existe, lo agregamos al arreglo
carrito.push(item);
}
// Guardar el carrito actualizado en la cookie (expira en 7 días)
setCookie('bella_espuma_carrito', JSON.stringify(carrito), 7);
// Mostrar notificación
mostrarToast();
}
// Mostrar pequeña alerta flotante de éxito
function mostrarToast() {
const toast = document.getElementById("toast-carrito");
toast.style.display = "block";
setTimeout(() => {
toast.style.display = "none";
}, 3000);
}