vCardRestaurante - Código Google Apps Script + Funcionalidad Menú - Actualizado

<div id="preloader" class="loadingio-spinner-rolling-zt8qwybayi">
  <div class="ldio-pk6mhbe1fco">
    <div></div>
  </div>
</div>

<section id="ov-listado-menu">
<!-- Aquí es donde se cargará el contenido dinámico -->
</section>

<script>
// Función para actualizar la pestaña activa y hacer scroll horizontal según la posición de scroll
function updateActiveTab() {
  var tabLinks = document.querySelectorAll('#tabs a');
  var sections = document.querySelectorAll('.titulo-seccion');
  var scrollPosition = document.querySelector('.contenido').scrollTop;
  var offset = -50;
  sections.forEach(function(section, index) {
    var sectionTop = section.offsetTop;
    var sectionHeight = section.offsetHeight;
    if (scrollPosition >= sectionTop - offset && scrollPosition < sectionTop + sectionHeight - offset) {
      tabLinks.forEach(function(link) {
        link.classList.remove('active');
      });
      tabLinks[index].classList.add('active');
      // Hacer scroll horizontal para mostrar la pestaña activa
      var tabsContainer = document.getElementById('tabs');
      var activeTab = tabLinks[index];
      var tabLeft = activeTab.offsetLeft;
      var tabWidth = activeTab.offsetWidth;
      var tabsWidth = tabsContainer.offsetWidth;
      var tabsScrollLeft = tabsContainer.scrollLeft;
      if (tabLeft < tabsScrollLeft) {
        tabsContainer.scrollTo({
          left: tabLeft,
          behavior: 'smooth'
        });
      } else if (tabLeft + tabWidth > tabsScrollLeft + tabsWidth) {
        tabsContainer.scrollTo({
          left: tabLeft + tabWidth - tabsWidth,
          behavior: 'smooth'
        });
      }
    }
  });
}

// Función para mostrar el precargador
function showPreloader() {
  document.getElementById('preloader').style.display = 'block';
  document.getElementById('ov-listado-menu').style.display = 'none';
}

// Función para ocultar el precargador y mostrar el contenido
function hidePreloader() {
  document.getElementById('preloader').style.display = 'none';
  document.getElementById('ov-listado-menu').style.display = 'block';
}

// Mostrar el precargador al cargar la página
showPreloader();
var cartItems = [];

function formatNumber(number) {
  return new Intl.NumberFormat('en-US', { // CAMBIAR FORMATO MONEDA
    style: 'decimal',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(number);
}
  var currency = "USD"; // CAMBIAR MONEDA
  var currencySymbol = "$"; // CAMBIAR SIMBOLO MONEDA
  var appScriptUrl = 'https://script.google.com/macros/s/AKfycbx-lfA2Z1WuzGF3wpeYUKiXqZEXBmXnlePHSOBLHeNAbmXISWQD_UTwUcRNHV-EjExSZw/exec'; // INSERTAR URL APPSCRIPT
  var whatsappNumber = '521234567890'; // INSERTAR NÚMERO WHATSAPP CON PREFIJO DE PAÍS

  // Función para generar el HTML del menú
  function generateMenuHTML(menuData) {
    var html = '';
    var tabs = '';

    for (var section in menuData) {
      var sectionId = section.toLowerCase().replace(/\s+/g, '-');
      tabs += '<a href="#' + sectionId + '">' + section + '</a>\n';
      html += '<h2 id="' + sectionId + '" class="titulo-seccion">' + section + '</h2>';

      menuData[section].forEach(function(dish) {
        // Formatear el precio directamente aquí
        var formattedPrice = parseFloat(dish.price).toLocaleString('es-PE', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });

        html += '<div class="card-menu" data-dish="' + encodeURIComponent(JSON.stringify(dish)) + '">' +
          '<div class="img-cover">' +
            '<img src="' + dish.image + '" alt="' + dish.name + '">' +
          '</div>' +
          '<div class="info-menu">' +
            '<h3 class="titulo">' + dish.name + '</h3>' +
            '<p class="descripcion">' + dish.description + '</p>' +
            '<p class="menu-precio">' + currencySymbol + ' ' + formattedPrice + ' ' + currency + '</p>' +
          '</div>' +
        '</div>';
      });
    }

    // Insertar las pestañas en el contenedor de pestañas
    document.getElementById('tabs').innerHTML = tabs;

    return html;
  }

  // Función para generar el HTML de las opciones extras
  function generateOptionsHTML(options) {
    var html = '';

    for (var optionTitle in options) {
      html += '<div class="option-group">';
      html += '<h4>' + optionTitle + '</h4>';

      options[optionTitle].forEach(function(option) {
        var optionName = option.name;
        var optionPrice = option.price;

        html += '<div class="option-item">';
        html += '<input type="checkbox" id="' + optionName + '" value="' + optionPrice + '">';
        html += '<label for="' + optionName + '">' + optionName + (optionPrice ? ' ' + currencySymbol + optionPrice : '') + '</label>';
        html += '</div>';
      });

      html += '</div>';
    }

    return html;
  }

  // Función para abrir el pop-up de detalles del producto
  function openPopup(dish) {
  var formattedPrice = formatNumber(parseFloat(dish.price));
  var popupHtml = '<div class="popup">' +
    '<div class="popup-content">' +
      '<div class="popup-left">' +
        '<img src="' + dish.image + '" alt="' + dish.name + '">' +
      '</div>' +
      '<div class="popup-right">' +
        '<div class="popup-content-wrapper">' +
          '<h3>' + dish.name + '</h3>' +
          '<p>' + dish.description + '</p>' +
          '<div class="options-container">' + generateOptionsHTML(dish.options) + '</div>' +
        '</div>' +
        '<div class="quantity-control-container">' +
          '<div class="quantity-control">' +
            '<button class="decrement-quantity">-</button>' +
            '<input type="text" class="quantity" value="1" data-price="' + dish.price + '">' +
            '<button class="increment-quantity">+</button>' +
          '</div>' +
          '<button class="agregar-al-carrito" data-dish="' + encodeURIComponent(JSON.stringify(dish)) + '">Agregar <span class="precio">' + currencySymbol + ' ' + formattedPrice + ' ' + currency + '</span></button>' +
        '</div>' +
      '</div>' +
      '<i class="fas fa-times icono-cerrar"></i>' +
    '</div>' +
  '</div>';
  document.body.insertAdjacentHTML('beforeend', popupHtml);
  setTimeout(function() {
    document.querySelector('.popup').classList.add('show');
  }, 50);

  document.querySelectorAll('.option-item input[type="checkbox"], .quantity').forEach(input => {
    input.addEventListener('change', updatePopupPrice);
  });

  document.querySelector('.agregar-al-carrito').addEventListener('click', () => {
    addToCart(JSON.parse(decodeURIComponent(document.querySelector('.agregar-al-carrito').getAttribute('data-dish'))));
    closePopup();
  });

  // Llamar a updatePopupPrice inmediatamente después de abrir el popup
  updatePopupPrice();
}

function updatePopupPrice() {
  const dish = JSON.parse(decodeURIComponent(document.querySelector('.agregar-al-carrito').getAttribute('data-dish')));
  const selectedOptions = Array.from(document.querySelectorAll('.option-item input[type="checkbox"]:checked'));
  const quantity = parseInt(document.querySelector('.quantity').value);
  let totalPrice = parseFloat(dish.price) * quantity;

  selectedOptions.forEach(option => {
    const optionPrice = parseFloat(option.value) || 0;
    totalPrice += optionPrice * quantity;
  });

  document.querySelector('.popup .precio').textContent = currencySymbol + ' ' + formatNumber(totalPrice) + ' ' + currency;
}

  // Función para cerrar el pop-up
  function closePopup() {
    var popup = document.querySelector('.popup');
    if (popup) {
      popup.classList.remove('show');
      setTimeout(function() {
        popup.remove();
      }, 300);
    }
  }

  // Evento de clic para cerrar el pop-up al hacer clic en el overlay
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('increment-quantity') || e.target.classList.contains('decrement-quantity')) {
      setTimeout(updatePopupPrice, 0);
    }
  });

  // Evento de teclado para cerrar los pop-ups con la tecla ESC
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closePopup();
    }
  });

  // Función para añadir un producto al carrito
  function addToCart(dish) {
    var quantity = parseInt(document.querySelector('.quantity').value);
    var selectedOptions = Array.from(document.querySelectorAll('.option-item input[type="checkbox"]:checked'));

    var dishWithOptions = {
      ...dish,
      quantity: quantity,
      selectedOptions: selectedOptions.map(function(option) {
        return {
          name: option.nextElementSibling.textContent.split(' ' + currencySymbol)[0].trim(),
          price: option.value
        };
      })
    };

    cartItems.push(dishWithOptions);

    updateCartCount();
    updateCartPopup();
  }

  // Función para actualizar el contador del carrito
  function updateCartCount() {
    var cartCount = document.querySelector('.cart-count');
    cartCount.textContent = cartItems.reduce(function(total, item) {
      return total + item.quantity;
    }, 0);
  }

  // Función para actualizar el contenido del pop-up del carrito
  function updateCartPopup() {
    var cartPopup = document.querySelector('.cart-popup');
    if (cartPopup) {
      var cartList = cartPopup.querySelector('ul');
      var cartTotal = calculateCartTotal(cartItems);
        var listItems = cartItems.map(function(item) {
      var optionsText = item.selectedOptions.map(function(option) {
        return '- ' + option.name + ' ' + (option.price ? currencySymbol + formatNumber(parseFloat(option.price)) : '');
      }).join('<br>');

      var itemTotal = calculateItemTotal(item);

      return '<li>' +
        '<div class="cart-item">' +
          '<img src="' + item.image + '" alt="' + item.name + '">' +
          '<div class="cart-item-details">' +
            '<h4>' + item.name + '</h4>' +
            '<p class="list-cantidad">Cantidad: ' + item.quantity + '</p>' +
            '<p class="list-precio">Precio base: ' + currencySymbol + formatNumber(parseFloat(item.price)) + ' ' + currency + '</p>' +
            (optionsText ? '<p class="list-opciones"><b>Opciones:</b><br>' + optionsText + '</p>' : '') +
            '<p class="list-item-total"><b>Total: ' + currencySymbol + formatNumber(itemTotal) + ' ' + currency + '</b></p>' +
          '</div>' +
          '<i class="fas fa-trash remove-item" data-dish="' + encodeURIComponent(JSON.stringify(item)) + '"></i>' +
        '</div>' +
      '</li>';
    }).join('');
      cartList.innerHTML = listItems;
      cartPopup.querySelector('.cart-total').textContent = cartTotal;

      if (cartItems.length === 0) {
        cartPopup.querySelector('.cart-empty').style.display = 'block';
        cartPopup.querySelector('#complete-order').disabled = true;
      } else {
        cartPopup.querySelector('.cart-empty').style.display = 'none';
        cartPopup.querySelector('#complete-order').disabled = false;
      }
    }
  }

  // Función para calcular el total de cada item del carrito
  function calculateItemTotal(item) {
    var itemPrice = parseFloat(item.price);
    item.selectedOptions.forEach(function(option) {
      var optionPrice = parseFloat(option.price) || 0;
      itemPrice += optionPrice;
    });
    return itemPrice * item.quantity;
  }

  // Función para abrir el pop-up del carrito
  function openCartPopup() {
    var cartTotal = calculateCartTotal(cartItems);
    var popupHtml = '<div class="popup">' +
      '<div class="cart-popup">' +
        '<div class="cart-content">' +
          '<h2>Mi Pedido</h2>' +
          '<ul></ul>' +
          '<div class="cart-empty" style="display: ' + (cartItems.length === 0 ? 'block' : 'none') + '">El carrito está vacío.</div>' +
        '</div>' +
        '<div class="cart-actions">' +
          '<div class="cart-total">Total: ' + cartTotal + '</div>' +
          '<button class="empty-cart">Vaciar carrito</button>' +
          '<button id="complete-order" ' + (cartItems.length === 0 ? 'disabled' : '') + '>Completar pedido</button>' +
        '</div>' +
        '<i class="fas fa-times icono-cerrar"></i>' +
      '</div>' +
    '</div>';

    document.body.insertAdjacentHTML('beforeend', popupHtml);
    setTimeout(function() {
      document.querySelector('.popup').classList.add('show');
    }, 50);
    updateCartPopup();
  }

  // Función para eliminar un producto del carrito
  function removeFromCart(dish) {
    var index = cartItems.findIndex(function(item) {
      return JSON.stringify(item) === JSON.stringify(dish);
    });
    if (index !== -1) {
      cartItems.splice(index, 1);
      updateCartCount();
      updateCartPopup();
    }
  }

  // Función para vaciar el carrito
  function emptyCart() {
    cartItems = [];
    updateCartCount();
    var popup = document.querySelector('.popup');
    if (popup) {
      popup.classList.remove('show');
      setTimeout(function() {
        popup.remove();
      }, 300);
    }
  }

  // Función para calcular el total del carrito
  function calculateCartTotal(items) {
  var total = 0;
  items.forEach(function(item) {
    var itemPrice = parseFloat(item.price);
    item.selectedOptions.forEach(function(option) {
      var optionPrice = parseFloat(option.price) || 0;
      itemPrice += optionPrice;
    });
    total += itemPrice * item.quantity;
  });
  return 'Total Pedido: ' + currencySymbol + formatNumber(total) + ' ' + currency;
}

  // Función para mostrar el formulario de información del pedido
  function showOrderForm() {
    var formHtml = '<div class="order-form">' +
      '<a id="back-to-cart"><i class="fas fa-arrow-left"></i> Regresar al carrito</a>' +
      '<h2>Completa tu pedido</h2>' +
      '<form>' +
        '<label for="name">Nombre:</label>' +
        '<input type="text" id="name" required>' +
        '<label for="delivery">Opciones de entrega:</label>' +
        '<select id="delivery" required>' +
          '<option value="">Selecciona una opción</option>' +
          '<option value="Domicilio">Envío a domicilio</option>' +
          '<option value="Local">Recoger en local</option>' +
        '</select>' +
        '<div id="address-field" style="display: none;">' +
          '<label for="address">Dirección:</label>' +
          '<textarea id="address" required></textarea>' +
        '</div>' +
        '<label for="payment">Formas de pago:</label>' +
        '<select id="payment" required>' +
          '<option value="">Selecciona una opción</option>' +
          '<option value="Efectivo">Efectivo</option>' +
          '<option value="Tarjeta">Tarjeta</option>' +
        '</select>' +
        '<label for="note">Nota adicional:</label>' +
        '<textarea id="note"></textarea>' +
        '<div class="terminos">' +
          '<input type="checkbox" id="terms" required>' +
          '<label for="terms">Acepto los <a href="#" target="_blank">términos y condiciones</a>.</label>' +
        '</div>' +
        '<button type="submit" id="submit-order"><i class="fab fa-whatsapp"></i> Enviar pedido</button>' +
      '</form>' +
    '</div>';

    var cartPopup = document.querySelector('.cart-popup');
    var cartDetails = cartPopup.querySelector('.cart-content');
    var cartActions = cartPopup.querySelector('.cart-actions');
    cartDetails.style.display = 'none';
    cartActions.style.display = 'none';
    cartPopup.insertAdjacentHTML('beforeend', formHtml);
    setTimeout(function() {
      document.querySelector('.popup').classList.add('show');
    }, 50);

    var backButton = document.getElementById('back-to-cart');
      backButton.addEventListener('click', function(e) {
        e.preventDefault();
        var popup = document.querySelector('.popup');
        popup.classList.remove('show');
        setTimeout(function() {
          var orderForm = document.querySelector('.order-form');
          orderForm.remove();
          cartDetails.style.display = 'block';
          cartActions.style.display = 'block';
          setTimeout(function() {
            popup.classList.add('show');
          }, 50);
        }, 300);
      });

    var deliverySelect = document.getElementById('delivery');
    var addressField = document.getElementById('address-field');

    deliverySelect.addEventListener('change', function() {
      if (deliverySelect.value === 'Domicilio') {
        addressField.style.display = 'block';
        addressField.querySelector('#address').required = true;
      } else {
        addressField.style.display = 'none';
        addressField.querySelector('#address').required = false;
      }
    });
  }

  // Evento de clic para los "card-menu"
  document.addEventListener('click', function(e) {
    if (e.target.closest('.card-menu')) {
      var dish = JSON.parse(decodeURIComponent(e.target.closest('.card-menu').getAttribute('data-dish')));
      openPopup(dish);
    }
  });

  // Evento de clic para el icono de cierre del pop-up
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('icono-cerrar')) {
      closePopup();
    }
  });

  // Evento de clic para el icono del carrito
  document.getElementById('cart-icon').addEventListener('click', function() {
    openCartPopup();
  });

  // Evento de clic para el botón "Completar pedido"
  document.addEventListener('click', function(e) {
    if (e.target.id === 'complete-order') {
      if (cartItems.length === 0) {
        alert('Para completar el pedido, debes agregar productos al carrito.');
      } else {
        var popup = document.querySelector('.popup');
        popup.classList.remove('show');
        setTimeout(function() {
          showOrderForm();
        }, 300);
      }
    }
  });

  // Evento de clic para el icono de eliminar producto del carrito
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-item')) {
      var dish = JSON.parse(decodeURIComponent(e.target.getAttribute('data-dish')));
      removeFromCart(dish);
    }
  });

  // Evento de clic para el botón "Vaciar carrito"
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('empty-cart')) {
      emptyCart();
    }
  });

  // Evento de clic para los botones de incremento y decremento de cantidad
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('increment-quantity')) {
      var quantityInput = e.target.previousElementSibling;
      var currentQuantity = parseInt(quantityInput.value);
      quantityInput.value = currentQuantity + 1;
      updatePopupPrice();
    } else if (e.target.classList.contains('decrement-quantity')) {
      var quantityInput = e.target.nextElementSibling;
      var currentQuantity = parseInt(quantityInput.value);
      if (currentQuantity > 1) {
        quantityInput.value = currentQuantity - 1;
        updatePopupPrice();
      }
    }
  });

  // Evento de envío del formulario de información del pedido
  document.addEventListener('submit', function(e) {
  if (e.target.closest('.order-form')) {
    e.preventDefault();
    var name = document.getElementById('name').value;
    var delivery = document.getElementById('delivery').value;
    var payment = document.getElementById('payment').value;
    var note = document.getElementById('note').value;

    if (name === '' || delivery === '' || payment === '') {
      alert('Por favor, completa todos los campos obligatorios del formulario.');
      return;
    }

    var addressField = document.getElementById('address');
    var address = addressField.value;

    if (delivery === 'Domicilio' && address === '') {
      alert('Por favor, ingresa tu dirección para el envío a domicilio.');
      return;
    }

    var message = '¡NUEVO PEDIDO!\n\n' +
    `Nombre: ${name}\n` +
    `Opciones de entrega: ${delivery}\n` +
    (delivery === 'Domicilio' ? `Dirección: ${address}\n` : '') +
    `Formas de pago: ${payment}\n` +
    `Nota adicional: ${note}\n` +
    'Productos:\n' +
    cartItems.map(function(item) {
      var formattedPrice = formatNumber(parseFloat(item.price));
      var optionsText = item.selectedOptions.map(function(option) {
        return '  - ' + option.name + (option.price ? ' ' + currencySymbol + formatNumber(parseFloat(option.price)) : '');
      }).join('\n');
      return `- ${item.name} (${item.quantity}) ${currencySymbol}${formattedPrice} ${currency}\n${optionsText}`;
    }).join('\n\n') + '\n\n' +
    calculateCartTotal(cartItems);

    var whatsappUrl = 'https://wa.me/' + whatsappNumber + '?text=' + encodeURIComponent(message);
    window.open(whatsappUrl, '_blank');
  }
});

  // Hacer una solicitud GET a la URL de la aplicación web de Google Apps Script
  fetch(appScriptUrl)
  .then(response => response.json())
  .then(data => {
    // Llamar a la función para generar el HTML del menú con los datos obtenidos
    document.getElementById('ov-listado-menu').innerHTML = generateMenuHTML(data);

   // Agregar evento de clic a las pestañas para el desplazamiento suave
   var tabLinks = document.querySelectorAll('#tabs a');
    tabLinks.forEach(function(link) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        var target = document.querySelector(this.getAttribute('href'));
        var contenido = document.querySelector('.contenido');
        var targetPosition = target.offsetTop - contenido.offsetTop + 145;
        contenido.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        });
      });
    });

    // Agregar evento de scroll al contenedor ".contenido"
    document.querySelector('.contenido').addEventListener('scroll', updateActiveTab);

    // Ocultar el precargador y mostrar el contenido
    hidePreloader();
  })
  .catch(error => {
    console.error('Error al obtener los datos:', error);
  });
</script>