Modularización de GKACHELE SaaS
This commit is contained in:
gkachele
250
memoria/SISTEMA_TEMPLATES.md
Normal file
250
memoria/SISTEMA_TEMPLATES.md
Normal file
@@ -0,0 +1,250 @@
|
||||
# 🎨 Sistema de Templates - GKACHELE™
|
||||
|
||||
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
||||
|
||||
## 📋 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`
|
||||
|
||||
```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
|
||||
```bash
|
||||
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:
|
||||
|
||||
```html
|
||||
<!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:**
|
||||
```json
|
||||
{
|
||||
"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:
|
||||
|
||||
1. **Selector de Template**: Dropdown con todos los templates disponibles
|
||||
2. **Cambio de Template**: Al cambiar, se aplican automáticamente los colores y configuración por defecto
|
||||
3. **Confirmación**: Pide confirmación antes de cambiar para evitar pérdida de datos
|
||||
|
||||
---
|
||||
|
||||
## 📌 Notas Importantes
|
||||
|
||||
1. **Carpetas que empiezan con `_`**: Se ignoran (ej: `_gkachele/`)
|
||||
2. **Archivos requeridos**: `config.json` y `template.html` son obligatorios
|
||||
3. **Detección automática**: No necesitas registrar templates manualmente
|
||||
4. **Colores dinámicos**: Los templates usan variables CSS que se actualizan desde el customizer
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Ejemplo Completo
|
||||
|
||||
### Template: `restaurante-asiatico`
|
||||
|
||||
**`config.json`:**
|
||||
```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`:**
|
||||
```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`
|
||||
|
||||
---
|
||||
|
||||
**© 2025 GKACHELE™. Todos los derechos reservados.**
|
||||
Reference in New Issue
Block a user