admin/gkachele-saas

Fork 0

Files

gkachele b6820848b8 Modularización de GKACHELE SaaS

2026-01-17 11:40:17 +01:00

5.7 KiB

Raw Blame History

🎨 Sistema de Templates - GKACHELE™

📋 Descripción

Sistema de templates similar a WordPress que permite:

✅ Escanear automáticamente todos los templates disponibles
✅ Seleccionar/cambiar template desde el customizer
✅ Cargar configuración automáticamente desde config.json
✅ Aplicar colores y tipografía por defecto del template

📁 Estructura de un Template

Para añadir un nuevo template, simplemente crea una carpeta en demo/themes/ con esta estructura:

demo/themes/
  └── mi-template/
      ├── config.json      (OBLIGATORIO)
      └── template.html     (OBLIGATORIO)
      ├── style.css         (OPCIONAL)
      └── preview.jpg       (OPCIONAL - para mostrar preview)

📝 Formato de `config.json`

{
  "name": "Nombre del Template",
  "rubro": "restaurante",
  "description": "Descripción del template",
  "sections": [
    "hero",
    "menu",
    "horarios",
    "reservas",
    "contacto"
  ],
  "colors": {
    "primary": "#c94d4d",
    "secondary": "#d97757",
    "accent": "#f4a261",
    "text": "#2c2c2c"
  },
  "typography": {
    "font_family": "Roboto",
    "headings": "Playfair Display"
  },
  "features": {
    "menu_url": true,
    "horarios": true,
    "reservas": true
  }
}

Campos del `config.json`:

name: Nombre visible del template
rubro: Categoría (restaurante, gimnasio, general, etc.)
description: Descripción breve
sections: Array de secciones disponibles
colors: Colores por defecto (primary, secondary, accent, text)
typography: Tipografía por defecto
features: Características del template

🚀 Cómo Añadir un Nuevo Template

Paso 1: Crear la carpeta

mkdir demo/themes/mi-nuevo-template

Paso 2: Crear `config.json`

Copia el formato de arriba y ajusta los valores.

Paso 3: Crear `template.html`

Usa Jinja2 para variables dinámicas:

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary: {{ colors.primary if colors else '#c94d4d' }};
            --secondary: {{ colors.secondary if colors else '#d97757' }};
        }
    </style>
</head>
<body>
    <h1>{{ hero_title or 'Bienvenido' }}</h1>
    <p>{{ hero_description or '' }}</p>
</body>
</html>

Paso 4: ¡Listo!

El sistema lo detectará automáticamente al recargar.

🔧 Funciones del Sistema

`scan_available_themes()`

Escanear todos los templates disponibles y cargar sus configuraciones.

`get_theme_config(theme_id)`

Obtener configuración de un template específico.

`get_themes_by_rubro(rubro)`

Obtener templates filtrados por rubro.

🌐 Endpoints API

`GET /api/themes`

Listar todos los templates disponibles.

Query params:

rubro: Filtrar por rubro (opcional)

Respuesta:

{
  "success": true,
  "themes": {
    "restaurante-moderno": {
      "id": "restaurante-moderno",
      "name": "Restaurante Moderno",
      "description": "Tema elegante para restaurantes",
      "rubro": "restaurante",
      "colors": {...},
      "typography": {...}
    }
  },
  "total": 3
}

`GET /api/themes/<theme_id>`

Obtener información detallada de un template.

🎨 Uso en el Customizer

El customizer ahora incluye un selector de templates en la parte superior:

Selector de Template: Dropdown con todos los templates disponibles
Cambio de Template: Al cambiar, se aplican automáticamente los colores y configuración por defecto
Confirmación: Pide confirmación antes de cambiar para evitar pérdida de datos

📌 Notas Importantes

Carpetas que empiezan con _: Se ignoran (ej: _gkachele/)
Archivos requeridos: config.json y template.html son obligatorios
Detección automática: No necesitas registrar templates manualmente
Colores dinámicos: Los templates usan variables CSS que se actualizan desde el customizer

🎯 Ejemplo Completo

Template: `restaurante-asiatico`

config.json:

{
  "name": "Restaurante Asiático",
  "rubro": "restaurante",
  "description": "Tema moderno para restaurantes asiáticos",
  "sections": ["hero", "menu", "reservas", "contacto"],
  "colors": {
    "primary": "#e63946",
    "secondary": "#f77f00",
    "accent": "#fcbf49",
    "text": "#1d3557"
  },
  "typography": {
    "font_family": "Roboto",
    "headings": "Oswald"
  },
  "features": {
    "menu_url": true,
    "reservas": true
  }
}

template.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>{{ site_name or 'Restaurante' }}</title>
    <style>
        :root {
            --primary: {{ colors.primary if colors else '#e63946' }};
            --secondary: {{ colors.secondary if colors else '#f77f00' }};
        }
        body {
            font-family: '{{ typography.font_family if typography else 'Roboto' }}', sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>{{ site_name or 'Restaurante' }}</h1>
    </header>
    <main>
        <section class="hero">
            <h1>{{ hero_title or 'Bienvenido' }}</h1>
            <p>{{ hero_description or '' }}</p>
        </section>
    </main>
</body>
</html>

✅ Checklist para Nuevo Template

Crear carpeta en demo/themes/
Crear config.json con todos los campos
Crear template.html con variables Jinja2
Probar que se detecta en /api/themes
Probar cambio desde customizer
Verificar que colores se aplican correctamente

Última actualización: 14 Enero 2025
Hash: gkachele-sistema-templates-20250114

5.7 KiB Raw Blame History

🎨 Sistema de Templates - GKACHELE™

📋 Descripción

📁 Estructura de un Template

📝 Formato de config.json

Campos del config.json: