inicio
This commit is contained in:
@@ -0,0 +1,255 @@
|
||||
// ============================================================
|
||||
// AMOR & ROMA — Diagnóstico interactivo
|
||||
// 5 preguntas máx., con lógica condicional real:
|
||||
// - La pregunta 3 cambia según la respuesta de la pregunta 1.
|
||||
// - Si el usuario llega con contexto (?interes=redes o ?plan=premium
|
||||
// desde Servicios/Planes), se preselecciona y se saltea esa pregunta.
|
||||
// - El resultado combina las 5 respuestas en una recomendación de
|
||||
// servicio + plan sugerido.
|
||||
// ============================================================
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const form = document.getElementById("diagnostico");
|
||||
if (!form) return;
|
||||
|
||||
/* ---------- Contexto heredado desde otras páginas ---------- */
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const preInteres = params.get("interes"); // ej: redes, web, marca, automatizacion, captacion, varias
|
||||
const prePlan = params.get("plan"); // ej: esencial, impulso, premium, elite
|
||||
|
||||
const state = {
|
||||
necesidad: preInteres || null,
|
||||
etapa: null,
|
||||
desafio: null,
|
||||
objetivo: null,
|
||||
madurez: null,
|
||||
planPrevio: prePlan || null,
|
||||
};
|
||||
|
||||
/* ---------- Banco de preguntas ---------- */
|
||||
const desafiosPorNecesidad = {
|
||||
marca: [
|
||||
["identidad-debil", "Mi identidad no refleja el valor real de mi negocio"],
|
||||
["sin-relato", "No sé cómo comunicar lo que hago de forma consistente"],
|
||||
["rediseno", "Necesito un rediseño completo, lo actual ya no funciona"],
|
||||
],
|
||||
presencia: [
|
||||
["redes-sin-resultado", "Tengo redes, pero no generan resultados"],
|
||||
["sin-web", "No tengo una web propia"],
|
||||
["inconsistencia", "Todo se ve desordenado o inconsistente entre canales"],
|
||||
],
|
||||
contenido: [
|
||||
["sin-tiempo", "No tengo tiempo para crear contenido de forma constante"],
|
||||
["sin-estrategia", "No sé qué contenido realmente funciona"],
|
||||
["calidad", "Necesito subir la calidad de producción"],
|
||||
],
|
||||
web: [
|
||||
["sin-web-propia", "No tengo web propia todavía"],
|
||||
["no-convierte", "Tengo web, pero no convierte visitas en clientes"],
|
||||
["ecommerce", "Necesito catálogo o e-commerce"],
|
||||
],
|
||||
captacion: [
|
||||
["pocos-leads", "No estoy generando suficientes oportunidades"],
|
||||
["procesos-manuales", "Pierdo oportunidades por procesos manuales"],
|
||||
["necesito-ads", "Necesito publicidad paga para atraer clientes"],
|
||||
],
|
||||
automatizacion: [
|
||||
["todo-manual", "Respondo consultas manualmente y no llego a todo"],
|
||||
["sin-seguimiento", "Pierdo leads por falta de seguimiento"],
|
||||
["integracion", "Necesito integrar WhatsApp, redes y CRM"],
|
||||
],
|
||||
varias: [
|
||||
["desde-cero", "Necesito ordenar todo desde cero"],
|
||||
["piezas-sueltas", "Tengo piezas sueltas que no están integradas"],
|
||||
["ecosistema", "Quiero un ecosistema digital completo"],
|
||||
],
|
||||
};
|
||||
|
||||
const necesidadLabels = {
|
||||
marca: "Marca",
|
||||
presencia: "Presencia digital",
|
||||
contenido: "Contenido",
|
||||
web: "Web",
|
||||
captacion: "Captación de clientes",
|
||||
automatizacion: "Automatización",
|
||||
varias: "Varias cosas",
|
||||
};
|
||||
|
||||
/* ---------- Elementos del DOM ---------- */
|
||||
const steps = Array.from(form.querySelectorAll(".diag-step"));
|
||||
const progressWrap = form.querySelector(".diag-progress");
|
||||
const resultBox = document.getElementById("diag-result");
|
||||
const captureBox = document.getElementById("diag-capture");
|
||||
|
||||
let order = ["necesidad", "etapa", "desafio", "objetivo", "madurez"];
|
||||
if (preInteres && necesidadLabels[preInteres]) {
|
||||
order = order.filter((k) => k !== "necesidad");
|
||||
}
|
||||
let currentIndex = 0;
|
||||
|
||||
function buildProgress() {
|
||||
progressWrap.innerHTML = "";
|
||||
order.forEach(() => {
|
||||
const span = document.createElement("span");
|
||||
progressWrap.appendChild(span);
|
||||
});
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
Array.from(progressWrap.children).forEach((span, i) => {
|
||||
span.dataset.state = i < currentIndex ? "done" : i === currentIndex ? "active" : "";
|
||||
});
|
||||
}
|
||||
|
||||
function renderDesafioOptions() {
|
||||
const target = form.querySelector('[data-step="desafio"] .diag-options');
|
||||
const necesidad = state.necesidad || "varias";
|
||||
const options = desafiosPorNecesidad[necesidad] || desafiosPorNecesidad.varias;
|
||||
target.innerHTML = "";
|
||||
options.forEach(([value, label]) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "diag-option";
|
||||
btn.dataset.field = "desafio";
|
||||
btn.dataset.value = value;
|
||||
btn.setAttribute("aria-pressed", "false");
|
||||
btn.textContent = label;
|
||||
target.appendChild(btn);
|
||||
});
|
||||
attachOptionHandlers(target);
|
||||
}
|
||||
|
||||
function attachOptionHandlers(scope) {
|
||||
scope.querySelectorAll(".diag-option").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
scope.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
state[btn.dataset.field] = btn.dataset.value;
|
||||
setTimeout(goNext, 220);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showStep(key) {
|
||||
steps.forEach((s) => s.classList.toggle("active", s.dataset.step === key));
|
||||
if (key === "desafio") renderDesafioOptions();
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
function goNext() {
|
||||
if (currentIndex < order.length - 1) {
|
||||
currentIndex++;
|
||||
showStep(order[currentIndex]);
|
||||
} else {
|
||||
showResult();
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
showStep(order[currentIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
form.querySelectorAll("[data-action='back']").forEach((btn) => btn.addEventListener("click", goBack));
|
||||
|
||||
// Handlers for static (non-dynamic) option steps
|
||||
form.querySelectorAll('.diag-step[data-step]').forEach((stepEl) => {
|
||||
if (stepEl.dataset.step === "desafio") return; // built dynamically
|
||||
attachOptionHandlers(stepEl);
|
||||
});
|
||||
|
||||
/* ---------- Motor de recomendación ---------- */
|
||||
const solucionPorNecesidad = {
|
||||
marca: "Branding & Identidad",
|
||||
presencia: "Redes Sociales & Contenido + Desarrollo Web",
|
||||
contenido: "Redes Sociales & Contenido",
|
||||
web: "Desarrollo Web",
|
||||
captacion: "Paid Media + Automatizaciones",
|
||||
automatizacion: "Automatizaciones",
|
||||
varias: "Solución Integral (Branding + Web + Redes)",
|
||||
};
|
||||
|
||||
function planSugerido() {
|
||||
const etapaScore = { comenzando: 0, validando: 1, creciendo: 2, consolidado: 3 };
|
||||
const madurezScore = { nula: 0, basica: 1, intermedia: 2, avanzada: 3 };
|
||||
const e = etapaScore[state.etapa] ?? 1;
|
||||
const m = madurezScore[state.madurez] ?? 1;
|
||||
const score = Math.round((e + m) / 2);
|
||||
const plan = ["esencial", "impulso", "premium", "elite"][Math.min(score, 3)];
|
||||
return plan;
|
||||
}
|
||||
|
||||
const planLabels = { esencial: "Plan Esencial", impulso: "Plan Impulso", premium: "Plan Premium", elite: "Plan Élite" };
|
||||
|
||||
function showResult() {
|
||||
steps.forEach((s) => s.classList.remove("active"));
|
||||
progressWrap.querySelectorAll("span").forEach((s) => (s.dataset.state = "done"));
|
||||
|
||||
const necesidadKey = state.necesidad || "varias";
|
||||
const solucion = solucionPorNecesidad[necesidadKey];
|
||||
const plan = state.planPrevio && planLabels[state.planPrevio] ? state.planPrevio : planSugerido();
|
||||
|
||||
resultBox.innerHTML = `
|
||||
<p class="eyebrow">Nuestra recomendación</p>
|
||||
<h3>Te conviene priorizar: ${solucion}</h3>
|
||||
<p class="lede">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p>
|
||||
<p style="margin-top:1rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p>
|
||||
<p style="margin-top:0.4rem; color:var(--text-soft); font-size:0.9rem;">Esto es una orientación inicial, no un diagnóstico definitivo — lo afinamos juntos en una conversación.</p>
|
||||
`;
|
||||
resultBox.hidden = false;
|
||||
captureBox.hidden = false;
|
||||
document.getElementById("diag-plan-hidden").value = plan;
|
||||
document.getElementById("diag-solucion-hidden").value = solucion;
|
||||
resultBox.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
|
||||
function etapaLabel(v) {
|
||||
return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir";
|
||||
}
|
||||
function madurezLabel(v) {
|
||||
return { nula: "nula", basica: "básica", intermedia: "intermedia", avanzada: "avanzada" }[v] || "sin definir";
|
||||
}
|
||||
function objetivoLabel(v) {
|
||||
return {
|
||||
vender: "vender más",
|
||||
profesionalizar: "profesionalizar su imagen",
|
||||
clientes: "generar más clientes",
|
||||
tiempo: "ahorrar tiempo con procesos",
|
||||
referente: "posicionarse como referente",
|
||||
}[v] || "crecer";
|
||||
}
|
||||
|
||||
form.querySelector("[data-action='restart']")?.addEventListener("click", () => {
|
||||
currentIndex = 0;
|
||||
state.desafio = state.objetivo = state.madurez = state.etapa = null;
|
||||
if (!preInteres) state.necesidad = null;
|
||||
form.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
||||
resultBox.hidden = true;
|
||||
captureBox.hidden = true;
|
||||
showStep(order[0]);
|
||||
});
|
||||
|
||||
const finalForm = document.getElementById("diag-lead-form");
|
||||
if (finalForm) {
|
||||
finalForm.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
const confirmBox = document.getElementById("diag-confirmation");
|
||||
finalForm.hidden = true;
|
||||
confirmBox.classList.add("show");
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Inicio ---------- */
|
||||
buildProgress();
|
||||
if (preInteres && necesidadLabels[preInteres]) {
|
||||
const banner = document.getElementById("diag-context-banner");
|
||||
if (banner) {
|
||||
banner.hidden = false;
|
||||
banner.textContent = `Ya sabemos que tu interés inicial es "${necesidadLabels[preInteres]}" — seguimos desde ahí.`;
|
||||
}
|
||||
}
|
||||
showStep(order[0]);
|
||||
})();
|
||||
Reference in New Issue
Block a user