catalogo y carrito de compras
This commit is contained in:
Brisa
@@ -0,0 +1,328 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
iniciarSlider();
|
||||
configurarChatInput();
|
||||
});
|
||||
|
||||
/* ══════════════════════════════
|
||||
SLIDER
|
||||
══════════════════════════════ */
|
||||
function iniciarSlider() {
|
||||
// El slider corre por CSS animation (scroll-infinito), no necesita JS.
|
||||
// Esta función existe por si se agrega lógica futura.
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
MAPA
|
||||
══════════════════════════════ */
|
||||
function toggleMapa() {
|
||||
const modal = document.getElementById('modal-mapa');
|
||||
modal.style.display = (modal.style.display === 'flex') ? 'none' : 'flex';
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
MODALES GENÉRICOS
|
||||
══════════════════════════════ */
|
||||
function cerrarModal(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.style.display = 'none';
|
||||
}
|
||||
|
||||
// Cerrar modales al hacer click fuera del contenido
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('modal')) {
|
||||
e.target.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
/* ══════════════════════════════
|
||||
ALERTA ÉXITO (auto-ocultar)
|
||||
══════════════════════════════ */
|
||||
const alertSuccess = document.getElementById('success-alert');
|
||||
if (alertSuccess) {
|
||||
setTimeout(() => {
|
||||
alertSuccess.style.transition = "opacity 0.5s ease";
|
||||
alertSuccess.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
alertSuccess.remove();
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.delete('exito');
|
||||
window.history.replaceState({}, document.title, url);
|
||||
}, 500);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
DROPDOWN CATEGORÍAS
|
||||
══════════════════════════════ */
|
||||
function toggleDropdown(event) {
|
||||
event.stopPropagation();
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
}
|
||||
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn *')) {
|
||||
const dropdown = document.getElementById("myDropdown");
|
||||
if (dropdown && dropdown.classList.contains('show')) {
|
||||
dropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* ══════════════════════════════
|
||||
CHATBOT
|
||||
══════════════════════════════ */
|
||||
let intentos = 0;
|
||||
let ultimaRespuestaFueDesconocida = false;
|
||||
const MINUTOS_BLOQUEO = 10;
|
||||
|
||||
function configurarChatInput() {
|
||||
const input = document.getElementById('chat-input-text');
|
||||
if (!input) return;
|
||||
input.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') enviarMensaje();
|
||||
});
|
||||
}
|
||||
|
||||
function enviarMensaje() {
|
||||
const input = document.getElementById('chat-input-text');
|
||||
if (!input) return;
|
||||
const texto = input.value.trim();
|
||||
if (!texto) return;
|
||||
input.value = '';
|
||||
procesarConsulta(texto.toLowerCase());
|
||||
}
|
||||
|
||||
function toggleChat() {
|
||||
const chatBox = document.getElementById('chat-box');
|
||||
const logs = document.getElementById('chat-logs');
|
||||
if (!chatBox) return;
|
||||
|
||||
const isVisible = window.getComputedStyle(chatBox).display !== 'none';
|
||||
|
||||
if (!isVisible) {
|
||||
// Verificar bloqueo
|
||||
const bloqueadoHasta = localStorage.getItem('chat_bloqueado_hasta');
|
||||
if (bloqueadoHasta && Date.now() < parseInt(bloqueadoHasta)) {
|
||||
const minutosRestantes = Math.ceil((parseInt(bloqueadoHasta) - Date.now()) / 60000);
|
||||
chatBox.style.display = 'flex';
|
||||
logs.innerHTML = `
|
||||
<div class="chat-msg">
|
||||
<div class="cm-msg-text">El chat estará disponible en <b>${minutosRestantes} minuto${minutosRestantes !== 1 ? 's' : ''}</b>.</div>
|
||||
</div>
|
||||
`;
|
||||
// Deshabilitar input
|
||||
const input = document.getElementById('chat-input-text');
|
||||
const btn = document.querySelector('.chat-send-btn');
|
||||
if (input) input.disabled = true;
|
||||
if (btn) btn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Sin bloqueo: abrir normal
|
||||
chatBox.style.display = 'flex';
|
||||
logs.innerHTML = `
|
||||
<div class="chat-msg">
|
||||
<div class="cm-msg-text">¡Hola! Soy el asistente de La Pecosa 🍎 ¿En qué puedo ayudarte?</div>
|
||||
</div>
|
||||
`;
|
||||
const input = document.getElementById('chat-input-text');
|
||||
const btn = document.querySelector('.chat-send-btn');
|
||||
if (input) { input.disabled = false; input.focus(); }
|
||||
if (btn) btn.disabled = false;
|
||||
|
||||
} else {
|
||||
intentos = 0;
|
||||
chatBox.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function procesarConsulta(mensaje) {
|
||||
const logs = document.getElementById('chat-logs');
|
||||
|
||||
const divUsuario = document.createElement("div");
|
||||
divUsuario.className = "chat-msg-user";
|
||||
divUsuario.textContent = mensaje;
|
||||
logs.appendChild(divUsuario);
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
|
||||
fetch('consultar_bot.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: 'mensaje=' + encodeURIComponent(mensaje)
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
agregarMensaje(data.respuesta);
|
||||
|
||||
if (data.accion === 'abrir_mapa') {
|
||||
setTimeout(toggleMapa, 800);
|
||||
} else if (data.accion === 'abrir_horarios') {
|
||||
setTimeout(() => {
|
||||
const modal = document.getElementById('modal-horarios-visual');
|
||||
if (modal) modal.style.display = 'flex';
|
||||
}, 600);
|
||||
} else if (data.accion === 'abrir_novedades') {
|
||||
setTimeout(() => {
|
||||
const modal = document.getElementById('modal-novedades');
|
||||
if (modal) modal.style.display = 'flex';
|
||||
}, 600);
|
||||
} else if (data.accion === 'mostrar_telefonos') {
|
||||
mostrarTelefonos();
|
||||
} else if (data.accion === 'mostrar_contacto') {
|
||||
mostrarContacto();
|
||||
} else if (data.accion === 'mostrar_redes') {
|
||||
mostrarRedes();
|
||||
} else if (data.accion === 'mostrar_pagos') {
|
||||
const divBtns = document.createElement("div");
|
||||
divBtns.className = "chat-opciones";
|
||||
divBtns.innerHTML = `
|
||||
<button class="opt-btn" onclick="procesarPago('presencial')"><i class="fa-solid fa-store"></i> Retiro presencial</button>
|
||||
<button class="opt-btn" onclick="procesarPago('envio')"><i class="fa-solid fa-motorcycle"></i> Envío a domicilio</button>
|
||||
`;
|
||||
logs.appendChild(divBtns);
|
||||
|
||||
} else if (data.accion === 'forzar_cierre') {
|
||||
intentos++;
|
||||
if (intentos >= 3) {
|
||||
agregarMensaje("No puedo seguir ayudándote por este medio. ¡Llamanos o escribinos! 😊");
|
||||
// Guardar bloqueo
|
||||
const hasta = Date.now() + MINUTOS_BLOQUEO * 60 * 1000;
|
||||
localStorage.setItem('chat_bloqueado_hasta', hasta);
|
||||
setTimeout(() => {
|
||||
toggleChat();
|
||||
intentos = 0;
|
||||
}, 3000);
|
||||
}
|
||||
} else {
|
||||
intentos = 0;
|
||||
}
|
||||
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Error en el chatbot:", err);
|
||||
agregarMensaje("No pude procesar tu consulta en este momento. ¡Llamanos por teléfono!");
|
||||
});
|
||||
}
|
||||
|
||||
function procesarPago(tipo) {
|
||||
if (tipo === 'presencial') {
|
||||
agregarMensaje("💵 <b>Medios de pago — Retiro presencial:</b><br>• Efectivo<br>• Tarjeta de Débito<br>• Transferencia (Alias: <b>LA.PECOSA.PARANA</b>)");
|
||||
} else {
|
||||
agregarMensaje("🚚 <b>Medios de pago — Envío a domicilio:</b><br>• Solo transferencia al Alias: <b>LA.PECOSA.PARANA</b>");
|
||||
}
|
||||
}
|
||||
|
||||
function mostrarTelefonos() {
|
||||
//agregarMensaje("📞 Podés llamarnos a:");
|
||||
const logs = document.getElementById('chat-logs');
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-links";
|
||||
div.innerHTML = `
|
||||
<a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
|
||||
<a href="tel:03434312763" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 431-2763</a>
|
||||
`;
|
||||
logs.appendChild(div);
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
|
||||
function mostrarContacto() {
|
||||
//agregarMensaje("¡Contactanos por donde prefieras!");
|
||||
const logs = document.getElementById('chat-logs');
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-links";
|
||||
div.innerHTML = `
|
||||
<a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
|
||||
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
|
||||
<a href="tel:03434231400" class="chat-link-btn"><i class="fa-solid fa-phone"></i> 0343 423-1400</a>
|
||||
`;
|
||||
logs.appendChild(div);
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
|
||||
function mostrarRedes() {
|
||||
//agregarMensaje("📱 ¡Seguinos en nuestras redes!");
|
||||
const logs = document.getElementById('chat-logs');
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-links";
|
||||
div.innerHTML = `
|
||||
<a href="https://www.instagram.com/lapecosa.rotiseria" target="_blank" class="chat-link-btn chat-link-ig"><i class="fa-brands fa-instagram"></i> Instagram</a>
|
||||
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=lapecosaparana@gmail.com" target="_blank" class="chat-link-btn chat-link-mail"><i class="fa-solid fa-envelope"></i> Enviar correo</a>
|
||||
`;
|
||||
logs.appendChild(div);
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
|
||||
function agregarMensaje(texto) {
|
||||
const logs = document.getElementById('chat-logs');
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg";
|
||||
div.innerHTML = `<div class="cm-msg-text">${texto}</div>`;
|
||||
logs.appendChild(div);
|
||||
logs.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
|
||||
function talkToHuman() {
|
||||
window.open("https://wa.me/543434231400?text=Hola! Necesito ayuda con un pedido", "_blank");
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
PROMO FLOTANTE
|
||||
══════════════════════════════ */
|
||||
let ultimaPromoId = 0;
|
||||
let esPrimeraCarga = true;
|
||||
|
||||
function observarPromociones() {
|
||||
fetch('verificar_promo.php')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data && data.id) {
|
||||
if (esPrimeraCarga) {
|
||||
esPrimeraCarga = false;
|
||||
ultimaPromoId = data.id;
|
||||
mostrarPromoEnChatbot(data.mensaje, false);
|
||||
return;
|
||||
}
|
||||
if (data.id > ultimaPromoId) {
|
||||
ultimaPromoId = data.id;
|
||||
mostrarPromoEnChatbot(data.mensaje, true);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Error al observar promos:', err));
|
||||
}
|
||||
|
||||
function mostrarPromoEnChatbot(mensaje, forzarApertura) {
|
||||
const chatLogs = document.getElementById('chat-logs');
|
||||
const cartelFlotante = document.getElementById('alerta-flotante-promo');
|
||||
const textoFlotante = document.getElementById('texto-alerta-flotante');
|
||||
|
||||
if (chatLogs) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "chat-msg chat-promo";
|
||||
div.innerHTML = `<div class="cm-msg-text">📢 <b>¡MENÚ DEL DÍA!</b><br>${mensaje}</div>`;
|
||||
chatLogs.appendChild(div);
|
||||
chatLogs.scrollTop = chatLogs.scrollHeight;
|
||||
}
|
||||
|
||||
if (cartelFlotante && textoFlotante) {
|
||||
textoFlotante.innerHTML = mensaje;
|
||||
cartelFlotante.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
cartelFlotante.style.opacity = '1';
|
||||
cartelFlotante.style.transform = 'translateX(0)';
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function cerrarAlertaFlotante() {
|
||||
const cartel = document.getElementById('alerta-flotante-promo');
|
||||
if (cartel) {
|
||||
cartel.style.opacity = '0';
|
||||
cartel.style.transform = 'translateX(-20px)';
|
||||
setTimeout(() => { cartel.style.display = 'none'; }, 500);
|
||||
}
|
||||
}
|
||||
|
||||
observarPromociones();
|
||||
setInterval(observarPromociones, 10000);
|
||||
Reference in New Issue
Block a user