Modularización de GKACHELE SaaS
This commit is contained in:
gkachele
249
memoria/PROBLEMAS_CRITICOS_CUSTOMIZER.md
Normal file
249
memoria/PROBLEMAS_CRITICOS_CUSTOMIZER.md
Normal file
@@ -0,0 +1,249 @@
|
||||
# 🚨 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
|
||||
Reference in New Issue
Block a user