Detalle de programa
Visión general
El widget de detalle de programa es una solución completa para mostrar toda la información de un programa académico. Incluye múltiples secciones configurables (hero, highlights, plan de estudios, FAQs, galería, fechas de inicio, docentes, requisitos, certificado) y tres layouts predefinidos (Full, Compact, Sales).
Nota: Este widget requiere un program-id para cargar los datos del programa específico. La configuración de secciones y layout se gestiona desde el panel.
Instalación
Instalación básica
<script src="https://plurivium.com/widgets/loader.js"></script>
<pv-program-detail program-id="YOUR_PROGRAM_ID"></pv-program-detail>
Tag HTML
pv-program-detail
Propiedades del widget
Propiedades requeridas
- program-id: ID del programa a mostrar (string, requerido)
Propiedades opcionales
- widget-id: ID del widget para cargar configuración (string, opcional)
- layout: Layout a usar - 'full' | 'compact' | 'sales' (string, default: 'full')
- base-url: URL base de la API (string, opcional)
Configuración desde el panel
Cuando se usa un widget-id, las siguientes propiedades se configuran desde el panel:
Configuración general
- layout: Layout predefinido - 'full' | 'compact' | 'sales' (string)
- show_breadcrumbs: Mostrar migas de pan (boolean)
- enable_sticky_cta: CTA sticky al hacer scroll (boolean)
Secciones configurables
Cada sección tiene la siguiente estructura de configuración:
- type: Tipo de sección (hero, highlights, study_plan, faqs, gallery, etc.)
- visible: Si la sección se muestra (boolean)
- order: Orden de aparición (int)
- config: Configuración específica de la sección (object)
Layouts disponibles
Full Layout
Layout completo con todas las secciones disponibles. Ideal para páginas de programa detalladas.
- ✓ Hero completo con imagen de fondo
- ✓ Todas las secciones disponibles
- ✓ Sidebar con información adicional
- ✓ CTA prominente
Compact Layout
Layout compacto para páginas con espacio limitado.
- ✓ Hero reducido
- ✓ Secciones esenciales
- ✓ Sin sidebar
- ✓ Optimizado para mobile
Sales Layout
Layout orientado a conversión con CTAs destacados.
- ✓ Hero con formulario integrado
- ✓ CTAs estratégicamente ubicados
- ✓ Highlights prominentes
- ✓ Optimizado para landing pages
Secciones disponibles
Hero
Sección principal con título, descripción, imagen y CTA
Highlights
Puntos destacados del programa (duración, modalidad, etc.)
Study Plan
Plan de estudios con módulos y asignaturas
FAQs
Preguntas frecuentes con acordeón expandible
Gallery
Galería de imágenes del programa
Start Dates
Fechas de inicio disponibles
Teachers
Docentes del programa
Requirements
Requisitos de admisión
Certificate
Información sobre el certificado otorgado
Additional Info
Información adicional personalizada
Ejemplos
Ejemplo básico
<pv-program-detail program-id="123"></pv-program-detail>
Ejemplo con layout específico
<pv-program-detail
program-id="123"
layout="sales">
</pv-program-detail>
Ejemplo con widget-id (configuración desde panel)
<pv-program-detail
program-id="123"
widget-id="abc456">
</pv-program-detail>
Ejemplo con URL base personalizada
<pv-program-detail
program-id="123"
base-url="https://api.example.com">
</pv-program-detail>
Soporte técnico
Para consultas sobre la implementación o configuración del detalle de programa:
- Revisar el código fuente en
resources/js/widgets/svelte/ProgramDetail.svelte - Revisar los layouts en
resources/js/widgets/svelte/program-detail/layouts/ - Revisar las secciones en
resources/js/widgets/svelte/program-detail/sections/ - Revisar la Data class en
app/Data/Widgets/ProgramDetailData.php - Contactar al equipo de desarrollo