gkachele-saas/memoria/PENDIENTES_MEJORAS.md

📋 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:

// 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:

<!-- 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>

# 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:

// 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:

{
  "sections": {
    "hero": {"visible": true, "enabled": true},
    "menu": {"visible": true, "enabled": true},
    "horarios": {"visible": false, "enabled": false},
    "contacto": {"visible": true, "enabled": true}
  }
}

<!-- 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:

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:

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