Código JavaScript Catálogo Productos WA GS OV - Corregido

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

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

// REEMPLAZAR URL APPSCRIPT GOOGLE SHEETS
fetch('https://script.google.com/macros/s/AKfycbzxho78Qr07ADOpzdfF-acJxTztln4aZnQUoptrYHJcNNLMPS1Z_oIzrTfbQbC6Bwlc/exec')
  .then(response => response.json())
  .then(data => {
    datosProductos = data;
    productosFiltrados = data;
    renderizarProductos(productosFiltrados);
    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) {
  const categorias = new Set(['Todos']);
  productos.forEach(producto => {
    if (producto.categorias && producto.categorias.length > 0) {
      producto.categorias.forEach(categoria => {
        if (categoria) {
          categorias.add(categoria);
        }
      });
    }
  });

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

  if (categorias.size === 1) {
    contenedorCategorias.style.display = 'none';
  } else {
    contenedorCategorias.style.display = '';
    categorias.forEach((categoria, index) => {
      let botonCategoria = document.createElement('button');
      botonCategoria.textContent = categoria;
      if (categoria === 'Todos') {
        botonCategoria.classList.add('active');
      }
      botonCategoria.onclick = () => filtrarPorCategoria(categoria, botonCategoria);
      contenedorCategorias.appendChild(botonCategoria);
    });
  }
}

document.getElementById('buscar-producto').addEventListener('input', function(e) {
  const busqueda = e.target.value.toLowerCase();
  productosFiltrados = datosProductos.filter(producto => producto.titulo.toLowerCase().includes(busqueda));
  renderizarProductos(productosFiltrados);
  document.getElementById('limpiar-busqueda').style.display = busqueda ? '' : 'none';
  reinicializarFuncionalidad();
});

document.getElementById('limpiar-busqueda').addEventListener('click', function() {
  document.getElementById('buscar-producto').value = '';
  this.style.display = 'none';
  productosFiltrados = datosProductos;
  renderizarProductos(productosFiltrados);
  reinicializarFuncionalidad();
});

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

function actualizarBotonActivo(botonClickeado) {
  const botonesCategoria = document.querySelectorAll('#categorias-contenedor button');
  botonesCategoria.forEach(boton => {
    boton.classList.remove('active');
  });
  botonClickeado.classList.add('active');
}

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

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

const carritoContainer = document.getElementById('carrito-container');
const carritoIcon = document.getElementById('carrito-icon');
const cerrarCarrito = document.getElementById('cerrar-carrito');
const carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje');

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

function desplazarCarrito() {
  const anchoPantalla = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

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

function inicializarFuncionalidad() {
  const productos = document.querySelectorAll('.producto');
  const carritoLista = document.getElementById('carrito-lista');
  const total = document.getElementById('total');
  const carritoContador = document.getElementById('carrito-contador');
  const carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje');
  const vaciarCarritoButton = document.getElementById('vaciar-carrito');

  function mostrarMensajeCarritoVacio() {
    carritoVacioMensaje.style.display = carrito.length === 0 ? 'block' : 'none';
  }

  function agregarProductoAlCarrito(info) {
    const { nombre, precio, atributos, index } = JSON.parse(info || '{}');

    if (!validarAtributosSeleccionados(index)) {
      return;
    }

    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}`;
      }
    }

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

    carritoTotal += precio;
    total.textContent = formatearPrecio(carritoTotal);
    carritoContador.textContent = carrito.length;
    desplazarCarrito();
    mostrarMensajeCarritoVacio();

    carritoIcon.classList.add('shaking');

    setTimeout(() => {
      carritoIcon.classList.remove('shaking');
    }, 500);
  }

  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);
      carritoContador.textContent = carrito.length;
      mostrarMensajeCarritoVacio();
    }
  }

  productos.forEach((producto, index) => {
    const agregarButton = producto.querySelector('.agregar');
    const info = agregarButton.getAttribute('data-info');

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

  mostrarMensajeCarritoVacio();
}

document.addEventListener('DOMContentLoaded', (event) => {
  const enviarWhatsAppButton = document.getElementById('enviar-whatsapp');
  enviarWhatsAppButton.addEventListener('click', () => {
    const carritoTexto = carrito.map(producto => {
      return `${producto.nombre} - $${formatearPrecio(producto.precio)}`;
    }).join('\n');

    const mensajeWhatsApp = '*Mi Pedido:*\n' + carritoTexto + '\n*TOTAL: $' + formatearPrecio(carritoTotal) + '*';
    // REEMPLAZAR NÚMERO WHATSAPP
    const whatsappURL = `https://wa.me/529512345678?text=${encodeURIComponent(mensajeWhatsApp)}`; // REEMPLAZAR NÚMERO WHATSAPP
    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;
}

// Mover #carrito-container y #carrito-icon dentro de #page-container
var pageContainer = document.getElementById('page-container');
pageContainer.appendChild(carritoContainer);
pageContainer.appendChild(carritoIcon);