# 🎨 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
{{ hero_title or 'Bienvenido' }}
{{ hero_description or '' }}
```
### 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/`
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
{{ site_name or 'Restaurante' }}
{{ site_name or 'Restaurante' }}
{{ hero_title or 'Bienvenido' }}
{{ hero_description or '' }}
```
---
## ✅ 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.**