Código funcionalidad JavaScript Variaciones WA

document.addEventListener('DOMContentLoaded', function () {
const productos = document.querySelectorAll('.producto');
const carritoLista = document.getElementById('carrito-lista');
const total = document.getElementById('total');
const carritoContainer = document.getElementById('carrito-container');
const carritoIcon = document.getElementById('carrito-icon');
const carritoContador = document.getElementById('carrito-contador');
const cerrarCarrito = document.getElementById('cerrar-carrito');
const enviarWhatsAppButton = document.getElementById('enviar-whatsapp');
const carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje');
const vaciarCarritoButton = document.getElementById('vaciar-carrito');

let carrito = [];
let carritoTotal = 0;

carritoIcon.addEventListener('click', function() {
    const carritoVisible = carritoContainer.style.right === '0px';
    carritoContainer.style.right = carritoVisible ? '-350px' : '0px';

    if (carritoVisible) {
        carritoVacioMensaje.style.display = 'none';
    }
});

cerrarCarrito.addEventListener('click', function() {
    carritoContainer.style.right = '-350px';
});

// Función para desplazar el carrito
function desplazarCarrito() {
const anchoPantalla = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  if (anchoPantalla > 768) {
    carritoContainer.style.right = '0px';
    carritoVacioMensaje.style.display = 'none';
  }
}

// Función para mostrar o ocultar el mensaje de carrito vacío
function mostrarMensajeCarritoVacio() {
    if (carrito.length === 0) {
        carritoVacioMensaje.style.display = 'block';
    } else {
        carritoVacioMensaje.style.display = 'none';
    }
}

// Agregar producto al carrito
function agregarProductoAlCarrito(nombre, precio) {
    const producto = { nombre, precio };
    carrito.push(producto);

    const listItem = document.createElement('li');
    listItem.textContent = `${nombre} - $${precio}`;
    const eliminarButton = document.createElement('a');
    eliminarButton.innerHTML = '';
    eliminarButton.classList.add('eliminar');
    eliminarButton.addEventListener('click', () => eliminarProductoDelCarrito(producto, listItem));
    listItem.appendChild(eliminarButton);
    carritoLista.appendChild(listItem);

    // Actualizar el total
    carritoTotal += precio;
    total.textContent = carritoTotal;

    // Actualizar el contador del carrito
    carritoContador.textContent = carrito.length;

    // Desplazar automáticamente al carrito
    desplazarCarrito();

    // Mostrar u ocultar el mensaje de carrito vacío
    mostrarMensajeCarritoVacio();
}

// Eliminar producto del carrito
function eliminarProductoDelCarrito(producto, listItem) {
    const index = carrito.indexOf(producto);
    if (index !== -1) {
        carrito.splice(index, 1);
        carritoLista.removeChild(listItem);
        carritoTotal -= producto.precio;
        total.textContent = carritoTotal;

        // Actualizar el contador del carrito
        carritoContador.textContent = carrito.length;

        // Mostrar u ocultar el mensaje de carrito vacío
        mostrarMensajeCarritoVacio();
    }
}

// Evento para agregar producto al carrito
productos.forEach((producto, index) => {
    const agregarButton = producto.querySelector('.agregar');
    const nombre = agregarButton.getAttribute('data-nombre');
    const precio = parseFloat(agregarButton.getAttribute('data-precio'));
    const tallaSelect = producto.querySelector('#talla' + (index + 1));
    const colorSelect = producto.querySelector('#color' + (index + 1));

    agregarButton.addEventListener('click', () => {
        let tallaSeleccionada = tallaSelect ? tallaSelect.value : null;
        let colorSeleccionado = colorSelect ? colorSelect.value : null;

        // Verificar si se requiere alguna variante antes de agregar al carrito
        if ((tallaSelect && tallaSeleccionada) || !tallaSelect) {
            if ((colorSelect && colorSeleccionado) || !colorSelect) {
                let nombreConVariantes = `${nombre}`;
                if (tallaSelect && tallaSeleccionada) {
                    nombreConVariantes += ` - Talla ${tallaSeleccionada}`;
                }
                if (colorSelect && colorSeleccionado) {
                    nombreConVariantes += ` - Color ${colorSeleccionado}`;
                }
                agregarProductoAlCarrito(nombreConVariantes, precio);
            }  else {
                alert("Por favor, selecciona el color antes de agregar al carrito.");
            }
        } else {
            alert("Por favor, selecciona la talla antes de agregar al carrito.");
        }
    });
});

// Evento para enviar detalles del carrito a WhatsApp
enviarWhatsAppButton.addEventListener('click', () => {
    const carritoTexto = carrito.map(producto => {
        return `${producto.nombre} - $${producto.precio}`;
    }).join('\n'); // Usamos \n para separar líneas en WhatsApp
    const mensajeWhatsApp = '*Mi Pedido:*\n' + carritoTexto + '\n*TOTAL: $' + carritoTotal + '*';
    const whatsappURL = `https://wa.me/529512345678?text=${encodeURIComponent(mensajeWhatsApp)}`;
    window.open(whatsappURL, '_blank');
});

// Inicialmente, mostrar el mensaje de carrito vacío
mostrarMensajeCarritoVacio();
});