308 lines
8.9 KiB
Markdown
308 lines
8.9 KiB
Markdown
# 📋 Pendientes y Mejoras - GKACHELE™
|
|
|
|
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
|
|
|
**Hash:** `gkachele-pendientes-20250115-004`
|
|
|
|
**Fecha:** 2025-01-15
|
|
|
|
**⚠️ VER:** `PROBLEMAS_CRITICOS_CUSTOMIZER.md` - **REHACER COMPLETAMENTE EL CUSTOMIZER**
|
|
|
|
---
|
|
|
|
## ✅ FUNCIONALIDADES COMPLETADAS
|
|
|
|
1. ✅ **Sistema de bloques añadibles COMPLETO** (video, imagen, texto, redes sociales, mapa)
|
|
- ✅ Función `addNewBlock()` implementada
|
|
- ✅ Función `removeBlock()` implementada
|
|
- ✅ Función `loadBlocksList()` implementada
|
|
- ✅ Lista de bloques en sidebar funcional
|
|
- ✅ Integración completa con backend
|
|
- ✅ Notificaciones de éxito/error
|
|
2. ✅ Iconos SVG para redes sociales
|
|
3. ✅ Click to edit en preview
|
|
4. ✅ Gestión de platos del menú (añadir/eliminar)
|
|
5. ✅ Actualización en tiempo real del preview
|
|
6. ✅ Drag & drop básico para bloques
|
|
|
|
---
|
|
|
|
## 🔧 MEJORAS PENDIENTES
|
|
|
|
### 1. 🗺️ Mapa Automático desde Dirección
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Requisito:**
|
|
- El mapa debe generarse automáticamente usando la dirección del campo "Dirección"
|
|
- No debe requerir URL manual
|
|
- Usar Google Maps Embed API sin API key (o geocoding simple)
|
|
|
|
**Implementación:**
|
|
```javascript
|
|
// Cuando cambie la dirección, generar automáticamente el mapa
|
|
function generateMapFromAddress(address) {
|
|
// Convertir dirección a URL de Google Maps embed
|
|
const encodedAddress = encodeURIComponent(address);
|
|
const mapUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSy...&q=${encodedAddress}`;
|
|
// O usar iframe con búsqueda directa
|
|
const mapUrl = `https://www.google.com/maps?q=${encodedAddress}&output=embed`;
|
|
return mapUrl;
|
|
}
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/templates/customizer.html` - Auto-generar mapa_url cuando cambie dirección
|
|
- `demo/themes/restaurante-moderno/template.html` - Usar dirección si no hay mapa_url
|
|
|
|
---
|
|
|
|
### 2. 📁 Upload de Archivos (Drag & Drop)
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Requisito:**
|
|
- Arrastrar y soltar archivos en campos de Media
|
|
- O abrir navegador de archivos
|
|
- No usar URLs manuales
|
|
- Subir a servidor y guardar ruta
|
|
|
|
**Implementación:**
|
|
```html
|
|
<!-- En customizer.html -->
|
|
<div class="media-upload-area" ondrop="handleFileDrop(event)" ondragover="allowDrop(event)">
|
|
<input type="file" id="media_upload" style="display: none;" onchange="handleFileSelect(event)">
|
|
<button onclick="document.getElementById('media_upload').click()">📁 Seleccionar archivo</button>
|
|
<p>O arrastra y suelta aquí</p>
|
|
</div>
|
|
```
|
|
|
|
```python
|
|
# En app.py
|
|
@app.route('/api/upload', methods=['POST'])
|
|
def upload_file():
|
|
if 'file' not in request.files:
|
|
return jsonify({'error': 'No file'}), 400
|
|
file = request.files['file']
|
|
if file.filename == '':
|
|
return jsonify({'error': 'No file selected'}), 400
|
|
filename = secure_filename(file.filename)
|
|
filepath = os.path.join(UPLOAD_FOLDER, filename)
|
|
file.save(filepath)
|
|
return jsonify({'url': f'/uploads/{filename}'})
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/templates/customizer.html` - Añadir drag & drop a campos Media
|
|
- `demo/app.py` - Endpoint de upload
|
|
- `demo/static/` - Carpeta para uploads
|
|
|
|
---
|
|
|
|
### 3. ✏️ Editar Contenido de Bloques Existentes
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Problema:**
|
|
- Los bloques se pueden añadir y eliminar, pero no editar su contenido
|
|
- No hay forma de modificar el contenido de un bloque después de crearlo
|
|
|
|
**Solución:**
|
|
```javascript
|
|
// En template.html - función debe estar disponible globalmente
|
|
function removeBlockFromPreview(blockId) {
|
|
if (window.parent !== window) {
|
|
window.parent.postMessage({
|
|
type: 'remove-block',
|
|
block_id: blockId
|
|
}, '*');
|
|
} else {
|
|
// Si no está en iframe, llamar directamente
|
|
removeBlock(blockId);
|
|
}
|
|
}
|
|
|
|
// En customizer.html - escuchar mensaje
|
|
window.addEventListener('message', function(e) {
|
|
if (e.data && e.data.type === 'remove-block') {
|
|
removeBlock(e.data.block_id);
|
|
}
|
|
});
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/templates/customizer.html` - Añadir función `editBlock(blockId)` que abra modal según tipo
|
|
- `demo/templates/customizer.html` - Hacer bloques clickeables en la lista para editar
|
|
- `demo/app.py` - Endpoint `/api/customizer/update-block` para actualizar contenido
|
|
|
|
---
|
|
|
|
### 4. 🧩 Eliminar Zonas/Secciones (Como WordPress)
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Requisito:**
|
|
- Poder eliminar secciones completas (Hero, Menú, Horarios, Contacto, etc.)
|
|
- Como WordPress: cada sección puede ocultarse/eliminarse
|
|
- Guardar estado en content_json
|
|
|
|
**Implementación:**
|
|
```json
|
|
{
|
|
"sections": {
|
|
"hero": {"visible": true, "enabled": true},
|
|
"menu": {"visible": true, "enabled": true},
|
|
"horarios": {"visible": false, "enabled": false},
|
|
"contacto": {"visible": true, "enabled": true}
|
|
}
|
|
}
|
|
```
|
|
|
|
```html
|
|
<!-- En template.html -->
|
|
{% if sections.hero.enabled %}
|
|
<section id="hero" class="section hero">
|
|
<!-- Contenido -->
|
|
<button class="section-delete" onclick="toggleSection('hero')">🗑️ Ocultar sección</button>
|
|
</section>
|
|
{% endif %}
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/templates/customizer.html` - Añadir controles para secciones
|
|
- `demo/themes/restaurante-moderno/template.html` - Renderizar condicionalmente
|
|
- `demo/app.py` - Endpoint para toggle de secciones
|
|
|
|
---
|
|
|
|
### 5. ✏️ Edición de Contenido de Bloques
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Requisito:**
|
|
- Cada bloque añadido debe ser editable
|
|
- Click en bloque → editar contenido
|
|
- Modal o inline editor según tipo
|
|
|
|
**Implementación:**
|
|
```javascript
|
|
function editBlock(blockId) {
|
|
const block = blocks.find(b => b.id === blockId);
|
|
if (!block) return;
|
|
|
|
// Abrir modal según tipo
|
|
if (block.type === 'texto') {
|
|
openTextEditor(block);
|
|
} else if (block.type === 'video') {
|
|
openVideoEditor(block);
|
|
} else if (block.type === 'redes_sociales') {
|
|
openSocialEditor(block);
|
|
}
|
|
}
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/templates/customizer.html` - Añadir función editBlock
|
|
- `demo/themes/restaurante-moderno/template.html` - Hacer bloques clickeables
|
|
|
|
---
|
|
|
|
### 6. 🔄 Guardado Automático de Orden (Drag & Drop)
|
|
|
|
**Estado:** Pendiente
|
|
|
|
**Requisito:**
|
|
- Al arrastrar y soltar bloques, guardar orden automáticamente
|
|
- No esperar a añadir/eliminar
|
|
|
|
**Implementación:**
|
|
```javascript
|
|
function handleDrop(e) {
|
|
e.preventDefault();
|
|
// Reordenar bloques
|
|
const newOrder = Array.from(document.querySelectorAll('.gk-block'))
|
|
.map(block => block.dataset.blockId);
|
|
|
|
// Guardar orden inmediatamente
|
|
fetch('/api/customizer/reorder-blocks', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
site_id: siteId,
|
|
block_ids: newOrder
|
|
})
|
|
});
|
|
}
|
|
```
|
|
|
|
**Archivos a modificar:**
|
|
- `demo/themes/restaurante-moderno/template.html` - Mejorar drag & drop
|
|
- `demo/templates/customizer.html` - Guardar orden automáticamente
|
|
|
|
---
|
|
|
|
## 🚨 PROBLEMAS CRÍTICOS (REHACER COMPLETAMENTE)
|
|
|
|
**Ver documento completo:** `PROBLEMAS_CRITICOS_CUSTOMIZER.md`
|
|
|
|
### Problemas Identificados:
|
|
1. ❌ **Diseño horrible** - No se parece a WordPress
|
|
2. ❌ **Colores horribles** - No usa paleta WordPress
|
|
3. ❌ **Guardado inconsistente** - Algunas cosas guardan, otras no
|
|
4. ❌ **No hay botón Cancelar** - Hay que refrescar o salir
|
|
5. ❌ **Mapa no funciona**
|
|
6. ❌ **No hay WhatsApp flotante**
|
|
7. ❌ **No hay scroll suave**
|
|
8. ❌ **No hay iconos a elegir** (solo emojis)
|
|
|
|
**Solución:** REHACER COMPLETAMENTE copiando EXACTAMENTE WordPress Customizer
|
|
|
|
---
|
|
|
|
## 📝 CHECKLIST DE IMPLEMENTACIÓN
|
|
|
|
### Prioridad CRÍTICA (REHACER TODO)
|
|
- [ ] **Rehacer diseño visual** - Copiar EXACTAMENTE WordPress
|
|
- [ ] **Rehacer sistema de guardado** - Botón "Guardar y Publicar" + "Descartar"
|
|
- [ ] **Arreglar mapa** - Generar automáticamente desde dirección
|
|
- [ ] **Añadir WhatsApp flotante** - Configurable desde sidebar
|
|
- [ ] **Añadir selector de iconos** - Dashicons o Font Awesome
|
|
- [ ] **Añadir scroll suave** - Mejorar navegación
|
|
|
|
### Prioridad Alta
|
|
- [ ] Editar contenido de bloques existentes
|
|
- [ ] Upload de archivos (drag & drop)
|
|
|
|
### Prioridad Media
|
|
- [ ] Eliminar/ocultar secciones
|
|
- [ ] Edición de contenido de bloques
|
|
- [ ] Guardado automático de orden
|
|
|
|
### Prioridad Baja
|
|
- [ ] Mejoras de UI/UX
|
|
- [ ] Validaciones adicionales
|
|
- [ ] Optimizaciones de rendimiento
|
|
|
|
---
|
|
|
|
## 🔗 REFERENCIAS
|
|
|
|
- WordPress: Sistema de secciones ocultables
|
|
- Elementor: Drag & drop de bloques
|
|
- Google Maps: Embed sin API key (búsqueda directa)
|
|
|
|
---
|
|
|
|
## 📌 NOTAS
|
|
|
|
- El menú de platos ya funciona correctamente (añadir/eliminar) ✅
|
|
- Los iconos de redes sociales ya están implementados ✅
|
|
- **El sistema de bloques está COMPLETAMENTE funcional (añadir/eliminar/listar) ✅**
|
|
- **Hash de implementación:** `gkachele-bloques-funcionales-20250115-001`
|
|
|
|
---
|
|
|
|
**Última actualización:** 2025-01-15
|
|
**Hash:** `gkachele-pendientes-20250115-004`
|
|
**Próxima sesión:** **REHACER COMPLETAMENTE EL CUSTOMIZER** - Ver `PROBLEMAS_CRITICOS_CUSTOMIZER.md`
|