281 lines
7.0 KiB
Markdown
281 lines
7.0 KiB
Markdown
# 🎨 Editor Visual en Preview - GKACHELE™
|
|
|
|
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
|
|
|
## 📋 ANÁLISIS: Edición en Preview vs Sidebar
|
|
|
|
**Hash:** `gkachele-editor-visual-20250114-1425`
|
|
|
|
---
|
|
|
|
## 🎯 OBJETIVO
|
|
|
|
Permitir editar el contenido del sitio de dos formas:
|
|
1. **Desde el sidebar** (actual) - Controles organizados
|
|
2. **Directamente en el preview** (nuevo) - Click to edit, como sistemas modernos
|
|
|
|
---
|
|
|
|
## 🔍 ANÁLISIS DE OPCIONES
|
|
|
|
### Opción A: Click to Edit en Preview (Recomendado)
|
|
|
|
**Cómo funciona:**
|
|
- Usuario hace click en cualquier elemento del preview (título, texto, imagen)
|
|
- Se abre un modal o inline editor
|
|
- Cambios se reflejan inmediatamente
|
|
- Similar a WordPress Gutenberg o Elementor
|
|
|
|
**Ventajas:**
|
|
- ✅ Más intuitivo y visual
|
|
- ✅ El usuario ve exactamente qué está editando
|
|
- ✅ Experiencia moderna y profesional
|
|
- ✅ Reduce la necesidad de buscar en el sidebar
|
|
|
|
**Desventajas:**
|
|
- ⚠️ Requiere JavaScript más complejo
|
|
- ⚠️ Necesita identificar elementos editables
|
|
- ⚠️ Puede ser más lento en sitios grandes
|
|
|
|
**Implementación:**
|
|
```javascript
|
|
// Agregar atributos data-editable a elementos del preview
|
|
<div data-editable="hero_title" data-type="text">
|
|
{{ hero_title }}
|
|
</div>
|
|
|
|
// JavaScript para detectar clicks y abrir editor
|
|
document.querySelectorAll('[data-editable]').forEach(el => {
|
|
el.addEventListener('click', (e) => {
|
|
openInlineEditor(el);
|
|
});
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
### Opción B: Mejorar Sidebar Actual
|
|
|
|
**Cómo funciona:**
|
|
- Mantener sidebar actual
|
|
- Añadir más controles específicos
|
|
- Mejorar organización y UX
|
|
- Añadir previews visuales en el sidebar
|
|
|
|
**Ventajas:**
|
|
- ✅ Más fácil de implementar
|
|
- ✅ Ya funciona
|
|
- ✅ Controles organizados
|
|
|
|
**Desventajas:**
|
|
- ⚠️ Menos intuitivo
|
|
- ⚠️ Usuario debe buscar en el sidebar
|
|
- ⚠️ Menos visual
|
|
|
|
---
|
|
|
|
### Opción C: Híbrido (Mejor Opción)
|
|
|
|
**Cómo funciona:**
|
|
- **Sidebar:** Controles avanzados, configuración, colores, etc.
|
|
- **Preview:** Click to edit para contenido principal (títulos, textos, imágenes)
|
|
- **Ambos sincronizados:** Cambios en uno se reflejan en el otro
|
|
|
|
**Ventajas:**
|
|
- ✅ Lo mejor de ambos mundos
|
|
- ✅ Usuario elige cómo editar
|
|
- ✅ Flexible y potente
|
|
- ✅ Experiencia profesional
|
|
|
|
**Implementación:**
|
|
1. Sidebar para configuración avanzada
|
|
2. Preview con click to edit para contenido
|
|
3. Sincronización bidireccional
|
|
|
|
---
|
|
|
|
## 🚀 PLAN DE IMPLEMENTACIÓN (Opción C - Híbrido)
|
|
|
|
### Fase 1: Click to Edit en Preview
|
|
|
|
**Elementos editables:**
|
|
- `hero_title` - Título principal
|
|
- `hero_description` - Descripción
|
|
- `site_name` - Nombre del sitio (en header)
|
|
- Textos de secciones (menú, horarios, etc.)
|
|
- Imágenes (click para cambiar URL)
|
|
|
|
**Funcionalidad:**
|
|
1. Agregar `data-editable` a elementos del template
|
|
2. JavaScript detecta clicks
|
|
3. Abre editor inline (modal o input overlay)
|
|
4. Guarda cambios automáticamente
|
|
5. Actualiza preview en tiempo real
|
|
|
|
### Fase 2: Sincronización Bidireccional
|
|
|
|
**Cómo funciona:**
|
|
- Cambio en sidebar → Actualiza preview
|
|
- Cambio en preview → Actualiza sidebar
|
|
- Todo se guarda en `content_json`
|
|
|
|
### Fase 3: Mejoras del Sidebar
|
|
|
|
- Agregar previews visuales
|
|
- Mejor organización
|
|
- Búsqueda de controles
|
|
- Atajos de teclado
|
|
|
|
---
|
|
|
|
## 📝 ESTRUCTURA TÉCNICA
|
|
|
|
### Template HTML (con data-editable)
|
|
|
|
```html
|
|
<!-- En template.html -->
|
|
<h1 data-editable="hero_title" data-type="text" class="editable">
|
|
{{ hero_title or 'Bienvenido' }}
|
|
</h1>
|
|
|
|
<p data-editable="hero_description" data-type="textarea" class="editable">
|
|
{{ hero_description or '' }}
|
|
</p>
|
|
|
|
<img data-editable="media.hero_image" data-type="image"
|
|
src="{{ media.hero_image or '' }}" class="editable">
|
|
```
|
|
|
|
### JavaScript (Click to Edit)
|
|
|
|
```javascript
|
|
// Detectar clicks en elementos editables
|
|
document.querySelectorAll('[data-editable]').forEach(el => {
|
|
el.addEventListener('click', function(e) {
|
|
if (e.target.closest('.editable')) {
|
|
const field = this.dataset.editable;
|
|
const type = this.dataset.type;
|
|
openEditor(this, field, type);
|
|
}
|
|
});
|
|
|
|
// Indicador visual de que es editable
|
|
el.style.cursor = 'pointer';
|
|
el.title = 'Click para editar';
|
|
});
|
|
|
|
function openEditor(element, field, type) {
|
|
// Crear overlay con input
|
|
const overlay = createEditorOverlay(element, field, type);
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
function createEditorOverlay(element, field, type) {
|
|
// Modal o input inline
|
|
// Guardar al hacer blur o Enter
|
|
// Actualizar preview
|
|
}
|
|
```
|
|
|
|
### Backend (Guardar cambios)
|
|
|
|
```python
|
|
@app.route('/api/customizer/update-field', methods=['POST'])
|
|
def update_field():
|
|
"""Actualizar un campo específico desde preview"""
|
|
data = request.get_json()
|
|
site_id = data.get('site_id')
|
|
field = data.get('field') # 'hero_title', 'horarios.lunes_viernes', etc.
|
|
value = data.get('value')
|
|
|
|
# Actualizar content_json
|
|
# Retornar éxito
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 UX/UI
|
|
|
|
### Indicadores Visuales
|
|
|
|
- **Hover:** Borde punteado o sombra
|
|
- **Cursor:** Pointer
|
|
- **Tooltip:** "Click para editar"
|
|
- **Icono:** ✏️ en esquina del elemento
|
|
|
|
### Editor Inline
|
|
|
|
- **Input/Textarea:** Aparece sobre el elemento
|
|
- **Botones:** Guardar, Cancelar
|
|
- **Atajos:** Enter = Guardar, Esc = Cancelar
|
|
- **Auto-save:** Guardar después de 2 segundos sin escribir
|
|
|
|
---
|
|
|
|
## ✅ CHECKLIST DE IMPLEMENTACIÓN
|
|
|
|
### Fase 1: Click to Edit
|
|
- [ ] Agregar `data-editable` a elementos del template
|
|
- [ ] JavaScript para detectar clicks
|
|
- [ ] Crear editor inline/modal
|
|
- [ ] Guardar cambios automáticamente
|
|
- [ ] Actualizar preview en tiempo real
|
|
|
|
### Fase 2: Sincronización
|
|
- [ ] Sidebar → Preview (ya funciona)
|
|
- [ ] Preview → Sidebar (nuevo)
|
|
- [ ] Validar que ambos estén sincronizados
|
|
|
|
### Fase 3: Mejoras
|
|
- [ ] Indicadores visuales de elementos editables
|
|
- [ ] Tooltips y ayuda contextual
|
|
- [ ] Atajos de teclado
|
|
- [ ] Búsqueda en sidebar
|
|
|
|
---
|
|
|
|
## 🔄 FLUJO COMPLETO
|
|
|
|
```
|
|
1. Usuario abre customizer
|
|
2. Ve preview con elementos editables (indicados visualmente)
|
|
3. Click en "Bienvenido" (hero_title)
|
|
4. Se abre editor inline
|
|
5. Usuario escribe nuevo título
|
|
6. Presiona Enter o hace blur
|
|
7. Cambio se guarda en content_json
|
|
8. Preview se actualiza automáticamente
|
|
9. Sidebar también se actualiza (si tiene ese campo)
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 COMPARACIÓN CON SISTEMAS SIMILARES
|
|
|
|
| Característica | WordPress | Elementor | GKACHELE™ (Propuesto) |
|
|
|----------------|-----------|-----------|------------------------|
|
|
| Click to Edit | ✅ | ✅ | ✅ (Fase 1) |
|
|
| Sidebar Controls | ✅ | ✅ | ✅ (Actual) |
|
|
| Preview en Tiempo Real | ✅ | ✅ | ✅ (Actual) |
|
|
| Sincronización Bidireccional | ✅ | ✅ | ✅ (Fase 2) |
|
|
| Editor Inline | ✅ | ✅ | ✅ (Fase 1) |
|
|
|
|
---
|
|
|
|
## 🎯 DECISIÓN
|
|
|
|
**Implementar Opción C (Híbrido):**
|
|
- Mantener sidebar actual (funciona bien)
|
|
- Añadir click to edit en preview
|
|
- Sincronización bidireccional
|
|
- Mejoras progresivas
|
|
|
|
---
|
|
|
|
**Última actualización:** 14 Enero 2025 - 14:25
|
|
**Hash:** `gkachele-editor-visual-20250114-1425`
|
|
|
|
---
|
|
|
|
**© 2025 GKACHELE™. Todos los derechos reservados.**
|