gkachele-saas/memoria/PROBLEMAS_CRITICOS_CUSTOMIZER.md

🚨 PROBLEMAS CRÍTICOS DEL CUSTOMIZER - GKACHELE™

© 2025 GKACHELE™. Todos los derechos reservados.

Fecha: 15 Enero 2025
Hash: gkachele-problemas-customizer-20250115-001
Prioridad: 🔴 CRÍTICA - REHACER COMPLETAMENTE

---

📋 PROBLEMAS IDENTIFICADOS

1. 🎨 DISEÑO Y UI/UX HORRIBLE

Problemas:

• ❌ Formulario horrible - No se parece a WordPress
• ❌ Colores horribles - No usa la paleta de WordPress
• ❌ No hay scroll suave en sidebar
• ❌ Falta espaciado y padding adecuado
• ❌ Tipografía incorrecta
• ❌ Botones mal diseñados
• ❌ No hay iconos a elegir (solo emojis)

Solución:

• ✅ Copiar EXACTAMENTE el diseño de WordPress Customizer
• ✅ Usar colores oficiales de WordPress (#2271b1, #f0f0f1, etc.)
• ✅ Implementar scroll suave
• ✅ Usar iconos Dashicons o Font Awesome
• ✅ Mejorar tipografía y espaciado

---

2. 💾 GUARDADO INCONSISTENTE

Problemas:

• ❌ Algunas cosas guardan automáticamente
• ❌ Otras cosas NO guardan automáticamente
• ❌ No hay botón "Cancelar" - hay que refrescar o salir
• ❌ No hay botón "Descartar cambios"
• ❌ No hay indicador de cambios sin guardar
• ❌ No hay confirmación antes de salir con cambios sin guardar

Solución (copiar WordPress):

• ✅ Botón "Guardar y Publicar" (siempre visible en footer)
• ✅ Botón "Descartar cambios" (solo visible si hay cambios)
• ✅ Indicador de cambios sin guardar (punto rojo o badge)
• ✅ Confirmación antes de salir si hay cambios sin guardar
• ✅ Auto-guardado solo para preview, NO para guardar definitivamente
• ✅ Estado de guardado visible (guardado, guardando, error)

---

3. 🗺️ MAPA NO FUNCIONA

Problemas:

• ❌ Mapa no se muestra
• ❌ No genera automáticamente desde dirección
• ❌ Requiere URL manual (muy complicado)

Solución:

• ✅ Generar mapa automáticamente desde campo "Dirección"
• ✅ Usar Google Maps Embed sin API key
• ✅ Mostrar preview del mapa en tiempo real
• ✅ Permitir editar posición manualmente si es necesario

---

4. 📱 WHATSAPP FLOTANTE NO EXISTE

Problemas:

• ❌ No hay botón flotante de WhatsApp
• ❌ No se puede configurar número
• ❌ No aparece en el sitio

Solución:

• ✅ Añadir opción en sidebar: "Activar WhatsApp flotante"
• ✅ Campo para número de WhatsApp
• ✅ Botón flotante en esquina inferior derecha
• ✅ Icono de WhatsApp
• ✅ Mensaje predefinido editable

---

5. 🧩 FUNCIONALIDADES FALTANTES

Problemas:

• ❌ No hay iconos a elegir (solo emojis)
• ❌ No hay selector de iconos
• ❌ No hay biblioteca de iconos

Solución:

• ✅ Integrar Dashicons (como WordPress)
• ✅ O Font Awesome
• ✅ Selector visual de iconos
• ✅ Búsqueda de iconos
• ✅ Preview del icono seleccionado

---

6. 📜 SCROLL Y NAVEGACIÓN

Problemas:

• ❌ No hay scroll suave
• ❌ Sidebar no tiene scroll independiente
• ❌ No hay navegación entre secciones
• ❌ No hay menú lateral de secciones (como WordPress)

Solución:

• ✅ Scroll suave en sidebar
• ✅ Menú lateral de secciones (como WordPress)
• ✅ Navegación rápida entre secciones
• ✅ Scroll independiente para sidebar y preview

---

🎯 CÓMO FUNCIONA WORDPRESS CUSTOMIZER (ANÁLISIS)

Estructura Visual:

┌─────────────────────────────────────────────────┐
│  Header: Logo + "Personalizar" + X (cerrar)      │
├──────────┬───────────────────────────────────────┤
│          │                                       │
│ SIDEBAR  │         PREVIEW IFRAME                │
│ (350px)  │         (flex: 1)                     │
│          │                                       │
│ ┌──────┐ │                                       │
│ │Menú │ │                                       │
│ │Sec. │ │                                       │
│ └──────┘ │                                       │
│          │                                       │
│ Sección  │                                       │
│ Contenido│                                       │
│          │                                       │
│ Sección  │                                       │
│ Colores  │                                       │
│          │                                       │
│ Sección  │                                       │
│ Media    │                                       │
│          │                                       │
│ ...      │                                       │
│          │                                       │
├──────────┴───────────────────────────────────────┤
│ Footer: [Descartar] [Guardar y Publicar]        │
└─────────────────────────────────────────────────┘

Características Clave de WordPress:

1. Header:

   • Logo WordPress a la izquierda
   • Título "Personalizar" centrado
   • Botón X para cerrar (arriba derecha)
   • Fondo: #23282d

2. Sidebar:

   • Ancho fijo: 300px (no 350px)
   • Menú lateral de secciones (colapsable)
   • Scroll independiente
   • Fondo: #fff
   • Borde derecho: 1px solid #ddd

3. Controles:

   • Cada control tiene label arriba
   • Inputs con bordes suaves
   • Color primario: #2271b1
   • Hover: #135e96
   • Focus: box-shadow azul

4. Footer:

   • Siempre visible (sticky)
   • Botón "Descartar" (gris, solo si hay cambios)
   • Botón "Guardar y Publicar" (azul, siempre visible)
   • Indicador de estado (guardando...)

5. Preview:

   • Iframe a pantalla completa
   • Actualización en tiempo real
   • No se recarga completo, solo cambia CSS/HTML

6. Guardado:

   • NO guarda automáticamente (solo preview)
   • Solo guarda cuando presionas "Guardar y Publicar"
   • Muestra "Guardando..." mientras guarda
   • Muestra "Guardado" cuando termina
   • Si hay cambios sin guardar, muestra punto rojo

---

✅ PLAN DE REHACER CUSTOMIZER

Fase 1: Diseño Visual (Copiar WordPress)

• Cambiar colores a paleta WordPress
• Rediseñar header (logo + título + cerrar)
• Rediseñar sidebar (300px, scroll suave)
• Rediseñar controles (inputs, labels, botones)
• Rediseñar footer (sticky, botones correctos)
• Añadir menú lateral de secciones

Fase 2: Sistema de Guardado (Copiar WordPress)

• Eliminar auto-guardado (solo preview)
• Implementar botón "Guardar y Publicar"
• Implementar botón "Descartar cambios"
• Indicador de cambios sin guardar
• Confirmación antes de salir
• Estado de guardado visible

Fase 3: Funcionalidades Faltantes

• Mapa automático desde dirección
• WhatsApp flotante configurable
• Selector de iconos (Dashicons/Font Awesome)
• Scroll suave
• Navegación entre secciones

Fase 4: Testing y Pulido

• Probar todo el flujo
• Verificar que guarda correctamente
• Verificar que descarta correctamente
• Verificar preview en tiempo real
• Verificar todas las funcionalidades

---

📝 NOTAS IMPORTANTES

1. NO inventar nada nuevo - Copiar EXACTAMENTE WordPress

2. Colores oficiales WordPress:

   • Azul primario: #2271b1
   • Azul hover: #135e96
   • Gris fondo: #f0f0f1
   • Gris borde: #c3c4c7
   • Texto: #1d2327
   • Header: #23282d

3. Comportamiento de guardado:

   • Preview = Cambios visibles pero NO guardados
   • Guardar = Cambios guardados en base de datos
   • Descartar = Volver al último estado guardado

4. Referencias:

   • WordPress Customizer: /wp-admin/customize.php
   • Código fuente: wp-content/themes/*/inc/customizer/
   • JavaScript: wp.customize API

---

Última actualización: 2025-01-15
Prioridad: 🔴 CRÍTICA - REHACER COMPLETAMENTE
Próxima acción: Rehacer customizer copiando EXACTAMENTE WordPress