JS para agregar la funcionalidad carrito pedidos WA

<script>
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');

    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 = '&#xe051;';
        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'));
        agregarButton.addEventListener('click', () => {
            agregarProductoAlCarrito(nombre, precio);
        });
    });

    // 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();
});
</script>