4f25297f14
Implementación completa del sistema de Critical CSS dinámico según plan 13.01: Domain Layer: - Crear CriticalCSSCollectorInterface para DIP compliance Infrastructure Layer: - Implementar CriticalCSSCollector (singleton via DIContainer) - Crear CriticalCSSHooksRegistrar para inyección en wp_head - Actualizar DIContainer con getCriticalCSSCollector() Schemas: - Agregar campo is_critical a navbar, top-notification-bar, hero - Sincronizar con BD (18+39+31 campos) Renderers (navbar, top-notification-bar, hero): - Inyectar CriticalCSSCollectorInterface via constructor - Lógica condicional: si is_critical=true → CSS a <head> Admin (FormBuilders + FieldMappers): - Toggle "CSS Crítico" en sección visibility - Mapeo AJAX para persistencia Beneficios: - LCP optimizado: CSS crítico inline en <head> - Above-the-fold rendering sin FOUC - Componentes configurables desde admin panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
180 lines
5.6 KiB
JSON
180 lines
5.6 KiB
JSON
{
|
|
"component_name": "top-notification-bar",
|
|
"version": "1.0.0",
|
|
"description": "Barra de notificación superior con anuncio destacado, ícono y enlace de acción",
|
|
"groups": {
|
|
"visibility": {
|
|
"label": "Visibilidad",
|
|
"priority": 10,
|
|
"fields": {
|
|
"is_enabled": {
|
|
"type": "boolean",
|
|
"label": "Mostrar barra de notificación",
|
|
"default": true,
|
|
"editable": true,
|
|
"required": true,
|
|
"description": "Activa o desactiva la barra de notificación superior"
|
|
},
|
|
"show_on_pages": {
|
|
"type": "select",
|
|
"label": "Mostrar en",
|
|
"default": "all",
|
|
"editable": true,
|
|
"required": true,
|
|
"options": {
|
|
"all": "Todas las páginas",
|
|
"home": "Solo página de inicio",
|
|
"posts": "Solo posts individuales",
|
|
"pages": "Solo páginas"
|
|
},
|
|
"description": "Define en qué páginas se mostrará la barra"
|
|
},
|
|
"show_on_desktop": {
|
|
"type": "boolean",
|
|
"label": "Mostrar en desktop",
|
|
"default": true,
|
|
"editable": true,
|
|
"required": true,
|
|
"description": "Muestra la barra en dispositivos desktop (pantallas grandes)"
|
|
},
|
|
"show_on_mobile": {
|
|
"type": "boolean",
|
|
"label": "Mostrar en mobile",
|
|
"default": true,
|
|
"editable": true,
|
|
"required": true,
|
|
"description": "Muestra la barra en dispositivos móviles (pantallas pequeñas)"
|
|
},
|
|
"is_critical": {
|
|
"type": "boolean",
|
|
"label": "CSS Crítico",
|
|
"default": true,
|
|
"editable": true,
|
|
"description": "Inyectar CSS inline en <head> para optimizar LCP (componente above-the-fold)"
|
|
}
|
|
}
|
|
},
|
|
"content": {
|
|
"label": "Contenido",
|
|
"priority": 20,
|
|
"fields": {
|
|
"icon_class": {
|
|
"type": "text",
|
|
"label": "Clase del ícono Bootstrap",
|
|
"default": "bi-megaphone-fill",
|
|
"editable": true,
|
|
"required": true,
|
|
"placeholder": "Ej: bi-megaphone-fill",
|
|
"description": "Clase del ícono Bootstrap Icons (sin prefijo 'bi')"
|
|
},
|
|
"label_text": {
|
|
"type": "text",
|
|
"label": "Etiqueta del anuncio",
|
|
"default": "Nueva imagen, mejor experiencia:",
|
|
"editable": true,
|
|
"required": true,
|
|
"maxlength": 30,
|
|
"placeholder": "Ej: Nuevo:, Importante:, Aviso:",
|
|
"description": "Texto destacado en negrita antes del mensaje"
|
|
},
|
|
"message_text": {
|
|
"type": "textarea",
|
|
"label": "Texto del mensaje",
|
|
"default": "+200,000 APUs disponibles. 10,000 con costos 2025, actualizamos los costos de 300 más cada día.",
|
|
"editable": true,
|
|
"required": true,
|
|
"maxlength": 200,
|
|
"rows": 3,
|
|
"description": "Mensaje principal del anuncio (máximo 200 caracteres)"
|
|
},
|
|
"link_text": {
|
|
"type": "text",
|
|
"label": "Texto del enlace",
|
|
"default": "Convertirme en V.I.P.",
|
|
"editable": true,
|
|
"required": true,
|
|
"maxlength": 50,
|
|
"description": "Texto del enlace de acción"
|
|
},
|
|
"link_url": {
|
|
"type": "url",
|
|
"label": "URL del enlace",
|
|
"default": "/suscripcion-vip",
|
|
"editable": true,
|
|
"required": true,
|
|
"placeholder": "https://",
|
|
"description": "URL de destino del enlace. Fase 4.4: Debe coincidir con otros CTAs del mismo texto"
|
|
}
|
|
}
|
|
},
|
|
"colors": {
|
|
"label": "Colores",
|
|
"priority": 30,
|
|
"fields": {
|
|
"background_color": {
|
|
"type": "color",
|
|
"label": "Color de fondo",
|
|
"default": "#0E2337",
|
|
"editable": true,
|
|
"description": "Color de fondo de la barra (por defecto: navy dark)"
|
|
},
|
|
"text_color": {
|
|
"type": "color",
|
|
"label": "Color del texto",
|
|
"default": "#FFFFFF",
|
|
"editable": true,
|
|
"description": "Color del texto del mensaje"
|
|
},
|
|
"label_color": {
|
|
"type": "color",
|
|
"label": "Color de la etiqueta",
|
|
"default": "#FF8600",
|
|
"editable": true,
|
|
"description": "Color del texto en negrita (etiqueta del anuncio)"
|
|
},
|
|
"icon_color": {
|
|
"type": "color",
|
|
"label": "Color del ícono",
|
|
"default": "#FF8600",
|
|
"editable": true,
|
|
"description": "Color del ícono Bootstrap"
|
|
},
|
|
"link_color": {
|
|
"type": "color",
|
|
"label": "Color del enlace",
|
|
"default": "#FFFFFF",
|
|
"editable": true,
|
|
"description": "Color del enlace de acción"
|
|
},
|
|
"link_hover_color": {
|
|
"type": "color",
|
|
"label": "Color del enlace (hover)",
|
|
"default": "#FF8600",
|
|
"editable": true,
|
|
"description": "Color del enlace al pasar el mouse"
|
|
}
|
|
}
|
|
},
|
|
"spacing": {
|
|
"label": "Espaciado",
|
|
"priority": 40,
|
|
"fields": {
|
|
"font_size": {
|
|
"type": "text",
|
|
"label": "Tamaño de fuente",
|
|
"default": "0.9rem",
|
|
"editable": true,
|
|
"description": "Tamaño del texto (usar unidades CSS: rem, px, em)"
|
|
},
|
|
"padding": {
|
|
"type": "text",
|
|
"label": "Padding vertical",
|
|
"default": "0.5rem 0",
|
|
"editable": true,
|
|
"description": "Espaciado interno vertical (usar formato CSS: 0.5rem 0)"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|