Código JavaScript Catálogo Productos WA GS OV

  let carrito = [];
  let carritoTotal = 0;
  let datosFiltrados = [];

  const preloader = document.getElementById('preloader');
  preloader.style.display = 'block';

  let datosProductos = [];
  const contenedorProductos = document.getElementById('contenedor-productos');
  const mensajeNoEncontrado = document.getElementById('mensaje-no-encontrado');
  contenedorProductos.style.opacity = '0';

  function formatearPrecio(precio) {
    return precio.toLocaleString('en-US');
    // return precio.toLocaleString('es-ES', { style: 'currency', currency: 'EUR' });
    // return precio.toLocaleString('es-MX', { style: 'currency', currency: 'MXN' });
    // return precio.toLocaleString('es-CO', { style: 'currency', currency: 'COP' });
  }

  fetch('https://script.google.com/macros/s/AKfycbzxho78Qr07ADOpzdfF-acJxTztln4aZnQUoptrYHJcNNLMPS1Z_oIzrTfbQbC6Bwlc/exec')
    .then(response => response.json())
    .then(data => {
      datosProductos = data;
      datosFiltrados = data;
      renderizarProductos(datosFiltrados);
      preloader.style.display = 'none';
      contenedorProductos.style.opacity = '1';
      document.getElementById('contenedor-buscador').style.display = '';
      generarCategorias(data);
    })
    .catch(error => {
      console.error('Error al obtener el JSON:', error);
      preloader.style.display = 'none';
    });

  function renderizarProductos(productos) {
    contenedorProductos.innerHTML = '';
    if (productos.length === 0) {
      mensajeNoEncontrado.style.display = 'block';
    } else {
      mensajeNoEncontrado.style.display = 'none';
      productos.forEach((producto, index) => {
        var productoDiv = document.createElement('div');
        productoDiv.className = 'producto';

        productoDiv.innerHTML = `
            <div class="imagen">
                <img src="${producto.imagen}" alt="Imagen del producto">
            </div>
            <div class="info">
                <h4 class="titulo">${producto.titulo}</h4>
                <h3 class="precio">$${formatearPrecio(producto.precio)} USD</h3>
                <div class="metadatos" id="atributo${index}">
                    ${producto.atributos && Object.keys(producto.atributos).length > 0 ?
                      Object.entries(producto.atributos).map(([nombreAtributo, valores]) => {
                        const nombreAtributoLowerCase = nombreAtributo.toLowerCase();
                        if (valores.filter(Boolean).length > 0) {
                          return `<div class="meta">
                                      <label for="${nombreAtributoLowerCase}${index}">${nombreAtributo}:</label>
                                      <select id="${nombreAtributoLowerCase}${index}">
                                          <option value="" selected="selected" disabled="disabled">Seleccionar ${nombreAtributo}</option>
                                          ${valores.map(valor => `<option value="${valor}">${valor}</option>`).join('')}
                                      </select>
                                  </div>`;
                        } else {
                          return '';
                        }
                      }).join('') : ''}
                </div>
                <button class="agregar" data-info='${JSON.stringify({ nombre: producto.titulo, precio: producto.precio, atributos: producto.atributos, index: index })}'>Agregar al carrito</button>
            </div>
        `;

        contenedorProductos.appendChild(productoDiv);
      });
    }

    inicializarFuncionalidad();
  }

  function generarCategorias(productos) {
    // Inicialmente, asume que no hay categorías válidas (excluyendo 'Todos').
    let categoriasValidasEncontradas = false;

    let categorias = ['Todos'];
    productos.forEach(producto => {
      if (producto.categorias && producto.categorias.length > 0) {
        // Aquí se asume que `producto.categorias` es un array de las categorías de cada producto.
        producto.categorias.forEach(categoria => {
          if (categoria && !categorias.includes(categoria)) {
            categorias.push(categoria);
            categoriasValidasEncontradas = true; // Marca que se encontró al menos una categoría válida.
          }
        });
      }
    });

    const contenedorCategorias = document.getElementById('categorias-contenedor');
    contenedorCategorias.innerHTML = '';

    // Oculta el contenedor de categorías si no se encontraron categorías válidas.
    if (!categoriasValidasEncontradas) {
      contenedorCategorias.style.display = 'none';
    } else {
      // Si hay categorías válidas, muestra el contenedor y genera los botones.
      contenedorCategorias.style.display = '';
      categorias.forEach((categoria, index) => {
        let botonCategoria = document.createElement('button');
        botonCategoria.textContent = categoria;
        // Asigna la clase 'active' por defecto al botón 'Todos'
        if (categoria === 'Todos') {
          botonCategoria.classList.add('active');
        }
        botonCategoria.onclick = () => filtrarPorCategoria(categoria, botonCategoria);
        contenedorCategorias.appendChild(botonCategoria);
      });
    }
  }

  // Agrega la funcionalidad de búsqueda aquí
  document.getElementById('buscar-producto').addEventListener('input', function(e) {
    const busqueda = e.target.value.toLowerCase();
    datosFiltrados = datosProductos.filter(producto => producto.titulo.toLowerCase().includes(busqueda));
    renderizarProductos(datosFiltrados);
    document.getElementById('limpiar-busqueda').style.display = busqueda ? '' : 'none';

    // Reinicializar la funcionalidad del carrito después de la búsqueda
    reinicializarFuncionalidad();
  });

  // Agregar el evento de clic al botón de limpiar.
  document.getElementById('limpiar-busqueda').addEventListener('click', function() {
    document.getElementById('buscar-producto').value = '';
    this.style.display = 'none';
    datosFiltrados = datosProductos;
    renderizarProductos(datosFiltrados);

    // Reinicializar la funcionalidad del carrito después de limpiar la búsqueda
    reinicializarFuncionalidad();
  });

  // Filtrar por categorias
  function filtrarPorCategoria(categoriaSeleccionada, botonClickeado) {
    if (categoriaSeleccionada === 'Todos') {
      renderizarProductos(datosProductos);
    } else {
      const productosFiltrados = datosProductos.filter(producto => producto.categorias.includes(categoriaSeleccionada));
      renderizarProductos(productosFiltrados);
    }

    // Actualización de la clase 'active'
    const botonesCategoria = document.querySelectorAll('#categorias-contenedor button');
    botonesCategoria.forEach(boton => {
      boton.classList.remove('active');
    });
    botonClickeado.classList.add('active');

    // Reinicializar la funcionalidad del carrito después del filtrado
    reinicializarFuncionalidad();
  }

  function reinicializarFuncionalidad() {
    eliminarEventosAgregarAlCarrito();
    inicializarFuncionalidad();
  }

  function eliminarEventosAgregarAlCarrito() {
    const productos = document.querySelectorAll('.producto');
    productos.forEach(producto => {
      const agregarButton = producto.querySelector('.agregar');
      agregarButton.removeEventListener('click', agregarProductoAlCarrito);
    });
  }

  function inicializarFuncionalidad() {
    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 carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje');
    const vaciarCarritoButton = document.getElementById('vaciar-carrito');

    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 u 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(info) {
      const { nombre, precio, atributos, index } = JSON.parse(info || '{}');

      // Validar atributos seleccionados
      if (!validarAtributosSeleccionados(index)) {
        return;
      }

      // Obtener dinámicamente los valores de los atributos seleccionados
      let nombreConVariantes = `${nombre}`;
      for (const [nombreAtributo, valorSeleccionado] of Object.entries(atributos)) {
        const selectElement = document.getElementById(`${nombreAtributo.toLowerCase()}${index}`);
        const valorSeleccionado = selectElement ? selectElement.value : null;

        if (valorSeleccionado) {
          nombreConVariantes += ` - ${nombreAtributo}: ${valorSeleccionado}`;
        }

        // Añadir la clase de vibración al icono del carrito
        const carritoIcon = document.getElementById('carrito-icon');
        carritoIcon.classList.add('shaking');

        setTimeout(() => {
          // Eliminar la clase de vibración después de 500 milisegundos (ajusta según sea necesario)
          carritoIcon.classList.remove('shaking');
        }, 500);
      }

      const producto = { nombre: nombreConVariantes, precio };
      carrito.push(producto);

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

      // Actualizar el total
      carritoTotal += precio;
      total.textContent = formatearPrecio(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 = formatearPrecio(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 info = agregarButton.getAttribute('data-info');

      agregarButton.addEventListener('click', () => {
        agregarProductoAlCarrito(info);
      });
    });

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

  // Evento para enviar detalles del carrito a WhatsApp
  document.addEventListener('DOMContentLoaded', (event) => {
    const enviarWhatsAppButton = document.getElementById('enviar-whatsapp');
    enviarWhatsAppButton.addEventListener('click', () => {
      // Este es el código que "permanece igual"
      const carritoTexto = carrito.map(producto => {
        return `${producto.nombre} - $${formatearPrecio(producto.precio)}`;
      }).join('\n'); // Usamos \n para separar líneas en WhatsApp

      const mensajeWhatsApp = '*Mi Pedido:*\n' + carritoTexto + '\n*TOTAL: $' + formatearPrecio(carritoTotal) + '*';
      const whatsappURL = `https://wa.me/529512345678?text=${encodeURIComponent(mensajeWhatsApp)}`;
      window.open(whatsappURL, '_blank');
    });

  });

  function validarAtributosSeleccionados(index) {
    const selects = document.querySelectorAll(`#atributo${index} select`);
    for (const select of selects) {
      if (select.value === "") {
        alert("Por favor, selecciona todas las opciones antes de agregar al carrito.");
        return false;
      }
    }
    return true;
  }