+
+
+ data['section']['show_section'] ?? true;
+ $sectionTitle = $this->data['section']['section_title'] ?? '¿Tienes alguna pregunta?';
+ $sectionSubtitle = $this->data['section']['section_subtitle'] ?? '';
+
+ ob_start();
+ ?>
+
+
+ buildSectionTab(); ?>
+ buildContactInfoTab(); ?>
+ buildFormTab(); ?>
+ buildStylesTab(); ?>
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+ data['contact_info'] ?? [];
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ data['form'] ?? [];
+
+ ob_start();
+ ?>
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Clase de Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+ Deja vacío para usar el email del administrador
+
+ data['styles'] ?? [];
+
+ ob_start();
+ ?>
+
+
+
+ Clase de Bootstrap (ej: bg-light, bg-secondary bg-opacity-25)
+
+
+
+ componentId;
+ }
+}
diff --git a/src/ContactFormSection/Infrastructure/Presentation/Public/ContactFormSectionRenderer.php b/src/ContactFormSection/Infrastructure/Presentation/Public/ContactFormSectionRenderer.php
new file mode 100644
index 00000000..2d8f2734
--- /dev/null
+++ b/src/ContactFormSection/Infrastructure/Presentation/Public/ContactFormSectionRenderer.php
@@ -0,0 +1,238 @@
+getData();
+
+ if (!($data['section']['show_section'] ?? true)) {
+ return '';
+ }
+
+ $componentId = $component->getId();
+ $sectionTitle = $data['section']['section_title'] ?? '¿Tienes alguna pregunta?';
+ $sectionSubtitle = $data['section']['section_subtitle'] ?? 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.';
+ $backgroundClass = $data['styles']['background_color'] ?? 'bg-secondary bg-opacity-25';
+ $customStyles = $this->generateCustomStyles($componentId, $data['styles'] ?? []);
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ renderContactInfo($data); ?>
+
+
+
+ renderForm($componentId, $data); ?>
+
+
+
+
+ Información de contacto
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ componentId = $componentId;
+ $this->data = $data;
+ }
+
+ public function build(): string
+ {
+ ob_start();
+ ?>
+
+
+
+ data['general'] ?? [];
+ $modalTitle = $general['modal_title'] ?? '¿Tienes alguna pregunta?';
+ $modalDescription = $general['modal_description'] ?? '';
+ $submitButton = $this->data['submit_button'] ?? [];
+ $buttonText = $submitButton['text'] ?? 'Enviar Mensaje';
+ $buttonIcon = $submitButton['icon'] ?? 'bi-send-fill';
+
+ ob_start();
+ ?>
+
+
+ buildGeneralTab(); ?>
+ buildFieldsTab(); ?>
+ buildMessagesTab(); ?>
+ buildSettingsTab(); ?>
+
+
+
+ Título que aparece en el encabezado del modal
+
+
+
+
+
+ Texto descriptivo debajo del título
+
+
+ + +
Botón de Envío
+ +
+
+
+ Texto que aparece en el botón de envío
+
+
+
+
+
+ Clase de Bootstrap Icons (ej: bi-send-fill). Ver íconos
+
+ data['form_fields'] ?? [];
+
+ ob_start();
+ ?>
+ + Configure las etiquetas, placeholders y si cada campo es obligatorio o no. +
+ + buildFieldConfig('fullName', 'Nombre Completo', $formFields['fullName'] ?? []); ?> + buildFieldConfig('company', 'Empresa', $formFields['company'] ?? []); ?> + buildFieldConfig('whatsapp', 'WhatsApp', $formFields['whatsapp'] ?? []); ?> + buildFieldConfig('email', 'Correo Electrónico', $formFields['email'] ?? []); ?> + buildFieldConfig('comments', 'Comentarios', $formFields['comments'] ?? [], true); ?> + +
+
+ data['messages'] ?? [];
+ $success = $messages['success'] ?? 'Mensaje enviado exitosamente. Te responderemos pronto.';
+ $error = $messages['error'] ?? 'Error al enviar el mensaje. Por favor intenta nuevamente.';
+ $validationError = $messages['validation_error'] ?? 'Por favor completa todos los campos requeridos.';
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+
+ + Configure los mensajes que se mostrarán al usuario según el resultado del envío del formulario. +
+ +
+
+
+ Mensaje que se muestra cuando el formulario se envía correctamente
+
+
+
+
+
+ Mensaje que se muestra cuando ocurre un error al enviar
+
+
+
+
+
+ Mensaje que se muestra cuando faltan campos obligatorios
+
+ data['settings'] ?? [];
+ $modalId = $settings['modal_id'] ?? 'contactModal';
+ $formId = $settings['form_id'] ?? 'modalContactForm';
+ $ajaxAction = $settings['ajax_action'] ?? 'roi_contact_modal_submit';
+ $emailTo = $settings['email_to'] ?? '';
+ $emailSubject = $settings['email_subject'] ?? 'Nuevo mensaje de contacto desde el sitio web';
+
+ ob_start();
+ ?>
+ + Configuración técnica del modal y envío de emails. +
+ +Configuración de Email
+ +
+
+
+ Email donde se recibirán los mensajes de contacto (vacío = admin email)
+
+
+
+
+
+ Asunto del email que se enviará
+
+
+ + +
Configuración Técnica
+ +
+
+ Advertencia: Los siguientes campos no deben modificarse a menos que sepas lo que estás haciendo.
+
+
+
+
+
+ ID HTML del modal (no modificar)
+
+
+
+
+
+ ID HTML del formulario (no modificar)
+
+
+
+
+
+ Nombre de la acción AJAX de WordPress (no modificar)
+
+ componentId;
+ }
+}
diff --git a/src/ContactModal/Infrastructure/Presentation/Public/ContactModalRenderer.php b/src/ContactModal/Infrastructure/Presentation/Public/ContactModalRenderer.php
new file mode 100644
index 00000000..4ff84c34
--- /dev/null
+++ b/src/ContactModal/Infrastructure/Presentation/Public/ContactModalRenderer.php
@@ -0,0 +1,350 @@
+getData();
+ $componentId = $component->getId();
+ $modalId = $data['settings']['modal_id'] ?? 'contactModal';
+ $formId = $data['settings']['form_id'] ?? 'modalContactForm';
+
+ ob_start();
+ ?>
+
+
+ renderScript($data, $formId, $modalId, $componentId); ?>
+
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ renderTextField('fullName', 'modalFullName', $formFields['fullName'], 'col-md-6');
+ }
+
+ // company
+ if (!empty($formFields['company'])) {
+ $html .= $this->renderTextField('company', 'modalCompany', $formFields['company'], 'col-md-6');
+ }
+
+ // whatsapp
+ if (!empty($formFields['whatsapp'])) {
+ $html .= $this->renderTelField('whatsapp', 'modalWhatsapp', $formFields['whatsapp'], 'col-md-6');
+ }
+
+ // email
+ if (!empty($formFields['email'])) {
+ $html .= $this->renderEmailField('email', 'modalEmail', $formFields['email'], 'col-md-6');
+ }
+
+ // comments
+ if (!empty($formFields['comments'])) {
+ $html .= $this->renderTextareaField('comments', 'modalComments', $formFields['comments'], 'col-12');
+ }
+
+ return $html;
+ }
+
+ private function renderTextField(string $name, string $id, array $fieldData, string $colClass): string
+ {
+ $label = $fieldData['label'] ?? '';
+ $placeholder = $fieldData['placeholder'] ?? '';
+ $required = $fieldData['required'] ?? false;
+
+ ob_start();
+ ?>
+
+
+ required
+ >
+
+
+
+ Por favor completa este campo
+
+
+
+ required
+ >
+
+
+
+ Por favor completa este campo
+
+
+
+ required
+ >
+
+
+
+ Por favor ingresa un email válido
+
+
+
+
+
+
+
+ Por favor completa este campo
+
+
+
+
+
+
+ componentId = $componentId;
+ $this->data = $data;
+ }
+
+ public function build(): string
+ {
+ ob_start();
+ ?>
+
+
+
+
+
+
+ data[$widgetKey] ?? [];
+ $enabled = $widgetData['enabled'] ?? true;
+ $title = $widgetData['title'] ?? '';
+ $links = $widgetData['links'] ?? [];
+
+ ob_start();
+ ?>
+
+ buildWidgetColumn('widget_1', 'Widget 1'); ?>
+
+
+ buildWidgetColumn('widget_2', 'Widget 2'); ?>
+
+
+ buildWidgetColumn('widget_3', 'Widget 3'); ?>
+
+
+
+ data['newsletter'] ?? [];
+ $enabled = $newsletter['enabled'] ?? true;
+ $title = $newsletter['title'] ?? 'Suscríbete a nuestro newsletter';
+ $description = $newsletter['description'] ?? '';
+ $placeholder = $newsletter['placeholder'] ?? 'Correo electrónico';
+ $buttonText = $newsletter['button_text'] ?? 'Suscribirse';
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ $link): ?>
+
+
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+ Título de la sección de newsletter
+
+
+
+
+
+ Texto descriptivo debajo del título
+
+
+
+
+
+ Texto placeholder del campo de email
+
+
+
+
+
+ Texto del botón de suscripción
+
+
+
+
+ Nota: Para configurar el servicio de email de newsletter, ve a la sección de configuración general del tema.
+
+ data['copyright'] ?? [];
+ $text = $copyright['text'] ?? 'ROI Theme. Todos los derechos reservados.';
+ $yearAuto = $copyright['year_auto'] ?? true;
+
+ ob_start();
+ ?>
+
+
+
+ Texto que aparece en el footer
+
+
+
+
+
+
+ >
+
+
+ Si está activado, mostrará el año actual antes del texto de copyright
+
+ Vista previa:
+ + © + + +
+ data['social_links'] ?? [];
+ $twitter = $social['twitter'] ?? '';
+ $instagram = $social['instagram'] ?? '';
+ $facebook = $social['facebook'] ?? '';
+ $linkedin = $social['linkedin'] ?? '';
+
+ ob_start();
+ ?>
+ + + © + + +
+ Configure los enlaces a sus redes sociales. Deje vacío para ocultar la red social correspondiente. +
+ +
+
+ data['styles'] ?? [];
+ $backgroundColor = $styles['background_color'] ?? 'bg-dark';
+ $textColor = $styles['text_color'] ?? 'text-white';
+ $linkHoverColor = $styles['link_hover_color'] ?? '#FF8600';
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Clase de Bootstrap (ej: bg-dark, bg-secondary, bg-primary)
+
+
+
+
+
+ Clase de Bootstrap (ej: text-white, text-light, text-dark)
+
+
+
+
+
+ Color que se mostrará cuando se pase el mouse sobre los enlaces
+
+
+
+
+ Sugerencia: Las clases de Bootstrap disponibles incluyen: bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark
+
+ componentId;
+ }
+}
diff --git a/src/Footer/Infrastructure/Presentation/Public/FooterRenderer.php b/src/Footer/Infrastructure/Presentation/Public/FooterRenderer.php
new file mode 100644
index 00000000..a0c6b115
--- /dev/null
+++ b/src/Footer/Infrastructure/Presentation/Public/FooterRenderer.php
@@ -0,0 +1,273 @@
+getData();
+ $componentId = $component->getId();
+ $backgroundClass = $data['styles']['background_color'] ?? 'bg-dark';
+ $textClass = $data['styles']['text_color'] ?? 'text-white';
+ $customStyles = $this->generateCustomStyles($data['styles'] ?? []);
+
+ ob_start();
+ ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + © + + +
+ 'bi-twitter', + 'instagram' => 'bi-instagram', + 'facebook' => 'bi-facebook', + 'linkedin' => 'bi-linkedin' + ]; + + $hasLinks = false; + foreach ($networks as $network => $icon) { + if (!empty($socialData[$network])) { + $hasLinks = true; + break; + } + } + + if (!$hasLinks) { + return ''; + } + + ob_start(); + ?> +-
+ $icon): ?>
+
+
- + + + + + + +
';
+ $html .= $this->buildTabsNavigation();
+ $html .= '
';
+ $html .= $this->buildFormScripts($componentId);
+
+ return $html;
+ }
+
+ private function buildTabsNavigation(): string
+ {
+ return <<
+
+
+
+
+
+HTML;
+ }
+
+ private function buildVisibilityTab(array $data, string $componentId): string
+ {
+ $html = '';
+ $html .= $this->buildVisibilityTab($data, $componentId);
+ $html .= $this->buildCategoriesTab($data, $componentId);
+ $html .= $this->buildTitleTab($data, $componentId);
+ $html .= $this->buildStylesTab($data, $componentId);
+ $html .= '
';
+ $isEnabled = $data['visibility']['is_enabled'] ?? true;
+ $html .= $this->buildToggle('is_enabled', 'Mostrar hero section', $isEnabled, $componentId, 'visibility');
+ $showOn = $data['visibility']['show_on_pages'] ?? 'posts';
+ $html .= $this->buildSelect('show_on_pages', 'Mostrar en', $showOn, ['all' => 'Todas las páginas', 'home' => 'Solo página de inicio', 'posts' => 'Solo posts individuales', 'pages' => 'Solo páginas', 'custom' => 'Tipos de post específicos'], $componentId, 'visibility');
+ $customPostTypes = $data['visibility']['custom_post_types'] ?? '';
+ $html .= $this->buildTextField('custom_post_types', 'Tipos de post personalizados', $customPostTypes, $componentId, 'visibility', 'Ej: post,page,producto', ['data-conditional-field' => 'show_on_pages', 'data-conditional-value' => 'custom']);
+ $html .= '
';
+ $showCategories = $data['categories']['show_categories'] ?? true;
+ $html .= $this->buildToggle('show_categories', 'Mostrar badges de categorías', $showCategories, $componentId, 'categories');
+ $categoriesSource = $data['categories']['categories_source'] ?? 'post_categories';
+ $html .= $this->buildSelect('categories_source', 'Fuente de categorías', $categoriesSource, ['post_categories' => 'Categorías del post', 'post_tags' => 'Etiquetas del post', 'custom_taxonomy' => 'Taxonomía personalizada', 'custom_list' => 'Lista personalizada'], $componentId, 'categories', ['data-conditional-field' => 'show_categories', 'data-conditional-value' => 'true']);
+ $customTaxonomy = $data['categories']['custom_taxonomy_name'] ?? '';
+ $html .= $this->buildTextField('custom_taxonomy_name', 'Nombre de taxonomía personalizada', $customTaxonomy, $componentId, 'categories', 'Ej: project_category', ['data-conditional-field' => 'categories_source', 'data-conditional-value' => 'custom_taxonomy']);
+ $customList = $data['categories']['custom_categories_list'] ?? '';
+ $html .= $this->buildTextArea('custom_categories_list', 'Lista personalizada de categorías', $customList, $componentId, 'categories', 'Análisis de Precios|#', 5, ['data-conditional-field' => 'categories_source', 'data-conditional-value' => 'custom_list']);
+ $maxCategories = $data['categories']['max_categories'] ?? 5;
+ $html .= $this->buildNumberField('max_categories', 'Máximo de categorías a mostrar', $maxCategories, $componentId, 'categories', 1, 20, ['data-conditional-field' => 'show_categories', 'data-conditional-value' => 'true']);
+ $categoryIcon = $data['categories']['category_icon'] ?? 'bi-folder-fill';
+ $html .= $this->buildTextField('category_icon', 'Ícono de categoría', $categoryIcon, $componentId, 'categories', 'Ej: bi-folder-fill', ['data-conditional-field' => 'show_categories', 'data-conditional-value' => 'true']);
+ $categoriesAlignment = $data['categories']['categories_alignment'] ?? 'center';
+ $html .= $this->buildSelect('categories_alignment', 'Alineación de categorías', $categoriesAlignment, ['left' => 'Izquierda', 'center' => 'Centro', 'right' => 'Derecha'], $componentId, 'categories', ['data-conditional-field' => 'show_categories', 'data-conditional-value' => 'true']);
+ $html .= '
';
+ $titleSource = $data['title']['title_source'] ?? 'post_title';
+ $html .= $this->buildSelect('title_source', 'Fuente del título', $titleSource, ['post_title' => 'Título del post', 'custom_field' => 'Campo personalizado', 'custom_text' => 'Texto personalizado'], $componentId, 'title');
+ $customField = $data['title']['custom_field_name'] ?? '';
+ $html .= $this->buildTextField('custom_field_name', 'Nombre del campo personalizado', $customField, $componentId, 'title', 'Ej: hero_title', ['data-conditional-field' => 'title_source', 'data-conditional-value' => 'custom_field']);
+ $customText = $data['title']['custom_text'] ?? '';
+ $html .= $this->buildTextArea('custom_text', 'Texto personalizado', $customText, $componentId, 'title', '', 3, ['data-conditional-field' => 'title_source', 'data-conditional-value' => 'custom_text']);
+ $titleTag = $data['title']['title_tag'] ?? 'h1';
+ $html .= $this->buildSelect('title_tag', 'Etiqueta HTML del título', $titleTag, ['h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'div' => 'DIV'], $componentId, 'title');
+ $titleClasses = $data['title']['title_classes'] ?? 'display-5 fw-bold';
+ $html .= $this->buildTextField('title_classes', 'Clases CSS adicionales', $titleClasses, $componentId, 'title', 'Ej: display-5 fw-bold');
+ $titleAlignment = $data['title']['title_alignment'] ?? 'center';
+ $html .= $this->buildSelect('title_alignment', 'Alineación del título', $titleAlignment, ['left' => 'Izquierda', 'center' => 'Centro', 'right' => 'Derecha'], $componentId, 'title');
+ $enableGradient = $data['title']['enable_gradient'] ?? false;
+ $html .= $this->buildToggle('enable_gradient', 'Activar gradiente en el texto', $enableGradient, $componentId, 'title');
+ $gradientStart = $data['title']['gradient_color_start'] ?? '#1e3a5f';
+ $html .= $this->buildColorField('gradient_color_start', 'Color inicial del gradiente', $gradientStart, $componentId, 'title', ['data-conditional-field' => 'enable_gradient', 'data-conditional-value' => 'true']);
+ $gradientEnd = $data['title']['gradient_color_end'] ?? '#FF8600';
+ $html .= $this->buildColorField('gradient_color_end', 'Color final del gradiente', $gradientEnd, $componentId, 'title', ['data-conditional-field' => 'enable_gradient', 'data-conditional-value' => 'true']);
+ $gradientDirection = $data['title']['gradient_direction'] ?? 'to-right';
+ $html .= $this->buildSelect('gradient_direction', 'Dirección del gradiente', $gradientDirection, ['to-right' => 'Izquierda a derecha', 'to-left' => 'Derecha a izquierda', 'to-bottom' => 'Arriba a abajo', 'to-top' => 'Abajo a arriba', 'diagonal' => 'Diagonal'], $componentId, 'title', ['data-conditional-field' => 'enable_gradient', 'data-conditional-value' => 'true']);
+ $html .= '
';
+ $backgroundType = $data['styles']['background_type'] ?? 'gradient';
+ $html .= $this->buildSelect('background_type', 'Tipo de fondo', $backgroundType, ['color' => 'Color sólido', 'gradient' => 'Gradiente', 'image' => 'Imagen', 'none' => 'Sin fondo'], $componentId, 'styles');
+ $bgColor = $data['styles']['background_color'] ?? '#1e3a5f';
+ $html .= $this->buildColorField('background_color', 'Color de fondo', $bgColor, $componentId, 'styles', ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'color']);
+ $gradientStart = $data['styles']['gradient_start_color'] ?? '#1e3a5f';
+ $html .= $this->buildColorField('gradient_start_color', 'Color inicial del gradiente', $gradientStart, $componentId, 'styles', ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'gradient']);
+ $gradientEnd = $data['styles']['gradient_end_color'] ?? '#2c5282';
+ $html .= $this->buildColorField('gradient_end_color', 'Color final del gradiente', $gradientEnd, $componentId, 'styles', ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'gradient']);
+ $gradientAngle = $data['styles']['gradient_angle'] ?? 135;
+ $html .= $this->buildNumberField('gradient_angle', 'Ángulo del gradiente (grados)', $gradientAngle, $componentId, 'styles', 0, 360, ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'gradient']);
+ $bgImage = $data['styles']['background_image_url'] ?? '';
+ $html .= $this->buildMediaField('background_image_url', 'Imagen de fondo', $bgImage, $componentId, 'styles', ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'image']);
+ $bgOverlay = $data['styles']['background_overlay'] ?? true;
+ $html .= $this->buildToggle('background_overlay', 'Overlay oscuro sobre imagen', $bgOverlay, $componentId, 'styles', ['data-conditional-field' => 'background_type', 'data-conditional-value' => 'image']);
+ $overlayOpacity = $data['styles']['overlay_opacity'] ?? 60;
+ $html .= $this->buildNumberField('overlay_opacity', 'Opacidad del overlay (%)', $overlayOpacity, $componentId, 'styles', 0, 100, ['data-conditional-field' => 'background_overlay', 'data-conditional-value' => 'true']);
+ $textColor = $data['styles']['text_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField('text_color', 'Color del texto', $textColor, $componentId, 'styles');
+ $padding = $data['styles']['padding_vertical'] ?? 'normal';
+ $html .= $this->buildSelect('padding_vertical', 'Padding vertical', $padding, ['compact' => 'Compacto (2rem)', 'normal' => 'Normal (3rem)', 'spacious' => 'Espacioso (4rem)', 'extra-spacious' => 'Extra espacioso (5rem)'], $componentId, 'styles');
+ $margin = $data['styles']['margin_bottom'] ?? 'normal';
+ $html .= $this->buildSelect('margin_bottom', 'Margen inferior', $margin, ['none' => 'Sin margen', 'small' => 'Pequeño (1rem)', 'normal' => 'Normal (1.5rem)', 'large' => 'Grande (2rem)'], $componentId, 'styles');
+ $badgeBg = $data['styles']['category_badge_background'] ?? 'rgba(255, 255, 255, 0.2)';
+ $html .= $this->buildTextField('category_badge_background', 'Fondo de badges', $badgeBg, $componentId, 'styles');
+ $badgeText = $data['styles']['category_badge_text_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField('category_badge_text_color', 'Color del texto de badges', $badgeText, $componentId, 'styles');
+ $badgeBlur = $data['styles']['category_badge_blur'] ?? true;
+ $html .= $this->buildToggle('category_badge_blur', 'Efecto blur en badges', $badgeBlur, $componentId, 'styles');
+ $html .= '
', esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), $checked, $attrString, esc_attr($fieldId), esc_html($label));
+ }
+
+ private function buildTextField(string $name, string $label, string $value, string $componentId, string $group, string $placeholder = '', array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+ return sprintf('', esc_attr($fieldId), esc_html($label), esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), esc_attr($value), esc_attr($placeholder), $attrString);
+ }
+
+ private function buildTextArea(string $name, string $label, string $value, string $componentId, string $group, string $placeholder = '', int $rows = 3, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+ return sprintf('', esc_attr($fieldId), esc_html($label), esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), $rows, esc_attr($placeholder), $attrString, esc_textarea($value));
+ }
+
+ private function buildSelect(string $name, string $label, string $value, array $options, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+ $html = sprintf('
', esc_attr($fieldId), esc_html($label));
+ $html .= sprintf('
';
+ return $html;
+ }
+
+ private function buildNumberField(string $name, string $label, $value, string $componentId, string $group, int $min = null, int $max = null, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrs['type'] = 'number';
+ if ($min !== null) $attrs['min'] = $min;
+ if ($max !== null) $attrs['max'] = $max;
+ $attrString = $this->buildAttributesString($attrs);
+ return sprintf('', esc_attr($fieldId), esc_html($label), esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), esc_attr($value), $attrString);
+ }
+
+ private function buildColorField(string $name, string $label, string $value, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ return sprintf('', esc_attr($fieldId), esc_html($label), esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), esc_attr($value), esc_attr($value));
+ }
+
+ private function buildMediaField(string $name, string $label, string $value, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+ $html = sprintf('
', esc_attr($fieldId), esc_html($label));
+ $html .= '
', esc_url($value));
+ }
+ $html .= '
';
+ return $html;
+ }
+
+ private function buildAttributesString(array $attrs): string
+ {
+ $attrString = '';
+ foreach ($attrs as $key => $value) {
+ $attrString .= sprintf(' %s="%s"', esc_attr($key), esc_attr($value));
+ }
+ return $attrString;
+ }
+
+ private function buildFormScripts(string $componentId): string
+ {
+ return <<
+SCRIPT;
+ }
+
+ public function getComponentId(): string
+ {
+ return $this->componentId;
+ }
+}
diff --git a/src/HeroSection/Infrastructure/Presentation/Public/HeroSectionRenderer.php b/src/HeroSection/Infrastructure/Presentation/Public/HeroSectionRenderer.php
new file mode 100644
index 00000000..a8a79258
--- /dev/null
+++ b/src/HeroSection/Infrastructure/Presentation/Public/HeroSectionRenderer.php
@@ -0,0 +1,465 @@
+getData();
+
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ if (!$this->shouldShowOnCurrentPage($data)) {
+ return '';
+ }
+
+ $classes = $this->buildSectionClasses($data);
+ $styles = $this->buildInlineStyles($data);
+
+ $html = sprintf(
+ '';
+ $html .= sprintf('', esc_attr($fieldId), esc_attr($componentId), esc_attr($group), esc_attr($name), esc_attr($value), $attrString);
+ $html .= sprintf('', esc_attr($fieldId));
+ $html .= '
';
+ if (!empty($value)) {
+ $html .= sprintf('',
+ esc_attr($classes),
+ $styles ? ' style="' . esc_attr($styles) . '"' : ''
+ );
+
+ $html .= '
';
+
+ // Custom styles
+ $html .= $this->buildCustomStyles($data);
+
+ return $html;
+ }
+
+ private function isEnabled(array $data): bool
+ {
+ return isset($data['visibility']['is_enabled']) &&
+ $data['visibility']['is_enabled'] === true;
+ }
+
+ private function shouldShowOnCurrentPage(array $data): bool
+ {
+ $showOn = $data['visibility']['show_on_pages'] ?? 'posts';
+
+ switch ($showOn) {
+ case 'all':
+ return true;
+
+ case 'home':
+ return is_front_page();
+
+ case 'posts':
+ return is_single() && get_post_type() === 'post';
+
+ case 'pages':
+ return is_page();
+
+ case 'custom':
+ $postTypes = $data['visibility']['custom_post_types'] ?? '';
+ $allowedTypes = array_map('trim', explode(',', $postTypes));
+ return in_array(get_post_type(), $allowedTypes, true);
+
+ default:
+ return true;
+ }
+ }
+
+ private function shouldShowCategories(array $data): bool
+ {
+ return isset($data['categories']['show_categories']) &&
+ $data['categories']['show_categories'] === true;
+ }
+
+ private function buildSectionClasses(array $data): string
+ {
+ $classes = ['container-fluid', 'hero-title'];
+
+ $paddingClass = $this->getPaddingClass($data['styles']['padding_vertical'] ?? 'normal');
+ $classes[] = $paddingClass;
+
+ $marginClass = $this->getMarginClass($data['styles']['margin_bottom'] ?? 'normal');
+ if ($marginClass) {
+ $classes[] = $marginClass;
+ }
+
+ return implode(' ', $classes);
+ }
+
+ private function getPaddingClass(string $padding): string
+ {
+ $paddings = [
+ 'compact' => 'py-3',
+ 'normal' => 'py-5',
+ 'spacious' => 'py-6',
+ 'extra-spacious' => 'py-7'
+ ];
+
+ return $paddings[$padding] ?? 'py-5';
+ }
+
+ private function getMarginClass(string $margin): string
+ {
+ $margins = [
+ 'none' => '',
+ 'small' => 'mb-2',
+ 'normal' => 'mb-4',
+ 'large' => 'mb-5'
+ ];
+
+ return $margins[$margin] ?? 'mb-4';
+ }
+
+ private function buildInlineStyles(array $data): string
+ {
+ $styles = [];
+ $backgroundType = $data['styles']['background_type'] ?? 'gradient';
+
+ switch ($backgroundType) {
+ case 'color':
+ $bgColor = $data['styles']['background_color'] ?? '#1e3a5f';
+ $styles[] = "background-color: {$bgColor}";
+ break;
+
+ case 'gradient':
+ $startColor = $data['styles']['gradient_start_color'] ?? '#1e3a5f';
+ $endColor = $data['styles']['gradient_end_color'] ?? '#2c5282';
+ $angle = $data['styles']['gradient_angle'] ?? 135;
+ $styles[] = "background: linear-gradient({$angle}deg, {$startColor}, {$endColor})";
+ break;
+
+ case 'image':
+ $imageUrl = $data['styles']['background_image_url'] ?? '';
+ if (!empty($imageUrl)) {
+ $styles[] = "background-image: url('" . esc_url($imageUrl) . "')";
+ $styles[] = "background-size: cover";
+ $styles[] = "background-position: center";
+ $styles[] = "background-repeat: no-repeat";
+
+ if (isset($data['styles']['background_overlay']) && $data['styles']['background_overlay']) {
+ $opacity = ($data['styles']['overlay_opacity'] ?? 60) / 100;
+ $styles[] = "position: relative";
+ }
+ }
+ break;
+ }
+
+ // Text color
+ if (!empty($data['styles']['text_color'])) {
+ $styles[] = 'color: ' . $data['styles']['text_color'];
+ }
+
+ return implode('; ', $styles);
+ }
+
+ private function buildCategoriesBadges(array $data): string
+ {
+ $categories = $this->getCategories($data);
+
+ if (empty($categories)) {
+ return '';
+ }
+
+ $maxCategories = $data['categories']['max_categories'] ?? 5;
+ $categories = array_slice($categories, 0, $maxCategories);
+
+ $alignment = $data['categories']['categories_alignment'] ?? 'center';
+ $alignmentClasses = [
+ 'left' => 'justify-content-start',
+ 'center' => 'justify-content-center',
+ 'right' => 'justify-content-end'
+ ];
+ $alignmentClass = $alignmentClasses[$alignment] ?? 'justify-content-center';
+
+ $icon = $data['categories']['category_icon'] ?? 'bi-folder-fill';
+ if (strpos($icon, 'bi-') !== 0) {
+ $icon = 'bi-' . $icon;
+ }
+
+ $html = sprintf('';
+
+ // Categories badges
+ if ($this->shouldShowCategories($data)) {
+ $html .= $this->buildCategoriesBadges($data);
+ }
+
+ // Title
+ $html .= $this->buildTitle($data);
+
+ $html .= '
';
+ $html .= '', esc_attr($alignmentClass));
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function getCategories(array $data): array
+ {
+ $source = $data['categories']['categories_source'] ?? 'post_categories';
+
+ switch ($source) {
+ case 'post_categories':
+ return $this->getPostCategories();
+
+ case 'post_tags':
+ return $this->getPostTags();
+
+ case 'custom_taxonomy':
+ $taxonomy = $data['categories']['custom_taxonomy_name'] ?? '';
+ return $this->getCustomTaxonomyTerms($taxonomy);
+
+ case 'custom_list':
+ $list = $data['categories']['custom_categories_list'] ?? '';
+ return $this->parseCustomCategoriesList($list);
+
+ default:
+ return [];
+ }
+ }
+
+ private function getPostCategories(): array
+ {
+ $categories = get_the_category();
+ if (empty($categories)) {
+ return [];
+ }
+
+ $result = [];
+ foreach ($categories as $category) {
+ $result[] = [
+ 'name' => $category->name,
+ 'url' => get_category_link($category->term_id)
+ ];
+ }
+
+ return $result;
+ }
+
+ private function getPostTags(): array
+ {
+ $tags = get_the_tags();
+ if (empty($tags)) {
+ return [];
+ }
+
+ $result = [];
+ foreach ($tags as $tag) {
+ $result[] = [
+ 'name' => $tag->name,
+ 'url' => get_tag_link($tag->term_id)
+ ];
+ }
+
+ return $result;
+ }
+
+ private function getCustomTaxonomyTerms(string $taxonomy): array
+ {
+ if (empty($taxonomy)) {
+ return [];
+ }
+
+ $terms = get_the_terms(get_the_ID(), $taxonomy);
+ if (empty($terms) || is_wp_error($terms)) {
+ return [];
+ }
+
+ $result = [];
+ foreach ($terms as $term) {
+ $result[] = [
+ 'name' => $term->name,
+ 'url' => get_term_link($term)
+ ];
+ }
+
+ return $result;
+ }
+
+ private function parseCustomCategoriesList(string $list): array
+ {
+ if (empty($list)) {
+ return [];
+ }
+
+ $lines = explode("\n", $list);
+ $result = [];
+
+ foreach ($lines as $line) {
+ $line = trim($line);
+ if (empty($line)) {
+ continue;
+ }
+
+ $parts = explode('|', $line);
+ if (count($parts) >= 2) {
+ $result[] = [
+ 'name' => trim($parts[0]),
+ 'url' => trim($parts[1])
+ ];
+ }
+ }
+
+ return $result;
+ }
+
+ private function buildTitle(array $data): string
+ {
+ $titleText = $this->getTitleText($data);
+
+ if (empty($titleText)) {
+ return '';
+ }
+
+ $titleTag = $data['title']['title_tag'] ?? 'h1';
+ $titleClasses = $data['title']['title_classes'] ?? 'display-5 fw-bold';
+ $alignment = $data['title']['title_alignment'] ?? 'center';
+
+ $alignmentClasses = [
+ 'left' => 'text-start',
+ 'center' => 'text-center',
+ 'right' => 'text-end'
+ ];
+ $alignmentClass = $alignmentClasses[$alignment] ?? 'text-center';
+
+ $classes = trim($titleClasses . ' ' . $alignmentClass);
+
+ $titleStyle = '';
+ if (isset($data['title']['enable_gradient']) && $data['title']['enable_gradient']) {
+ $titleStyle = $this->buildGradientStyle($data);
+ $classes .= ' roi-gradient-text';
+ }
+
+ return sprintf(
+ '<%s class="%s"%s>%s',
+ esc_attr($titleTag),
+ esc_attr($classes),
+ $titleStyle ? ' style="' . esc_attr($titleStyle) . '"' : '',
+ esc_html($titleText),
+ esc_attr($titleTag)
+ );
+ }
+
+ private function getTitleText(array $data): string
+ {
+ $source = $data['title']['title_source'] ?? 'post_title';
+
+ switch ($source) {
+ case 'post_title':
+ return get_the_title();
+
+ case 'custom_field':
+ $fieldName = $data['title']['custom_field_name'] ?? '';
+ if (!empty($fieldName)) {
+ $value = get_post_meta(get_the_ID(), $fieldName, true);
+ return is_string($value) ? $value : '';
+ }
+ return '';
+
+ case 'custom_text':
+ return $data['title']['custom_text'] ?? '';
+
+ default:
+ return get_the_title();
+ }
+ }
+
+ private function buildGradientStyle(array $data): string
+ {
+ $startColor = $data['title']['gradient_color_start'] ?? '#1e3a5f';
+ $endColor = $data['title']['gradient_color_end'] ?? '#FF8600';
+ $direction = $data['title']['gradient_direction'] ?? 'to-right';
+
+ $directions = [
+ 'to-right' => 'to right',
+ 'to-left' => 'to left',
+ 'to-bottom' => 'to bottom',
+ 'to-top' => 'to top',
+ 'diagonal' => '135deg'
+ ];
+
+ $gradientDirection = $directions[$direction] ?? 'to right';
+
+ return "background: linear-gradient({$gradientDirection}, {$startColor}, {$endColor}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;";
+ }
+
+ private function buildCustomStyles(array $data): string
+ {
+ $badgeBg = $data['styles']['category_badge_background'] ?? 'rgba(255, 255, 255, 0.2)';
+ $badgeTextColor = $data['styles']['category_badge_text_color'] ?? '#FFFFFF';
+ $badgeBlur = isset($data['styles']['category_badge_blur']) && $data['styles']['category_badge_blur'];
+
+ $blurStyle = $badgeBlur ? 'backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);' : '';
+
+ $overlayStyle = '';
+ if (($data['styles']['background_type'] ?? '') === 'image' &&
+ isset($data['styles']['background_overlay']) &&
+ $data['styles']['background_overlay']) {
+ $opacity = ($data['styles']['overlay_opacity'] ?? 60) / 100;
+ $overlayStyle = <<';
+
+ foreach ($categories as $category) {
+ $html .= sprintf(
+ '%s',
+ esc_url($category['url']),
+ esc_attr($icon),
+ esc_html($category['name'])
+ );
+ }
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildLogoTab(array $data, string $componentId): string
+ {
+ $html = '';
+
+ $isEnabled = $data['visibility']['is_enabled'] ?? true;
+ $html .= $this->buildToggle('is_enabled', 'Mostrar navbar', $isEnabled, $componentId, 'visibility');
+
+ $isSticky = $data['visibility']['is_sticky'] ?? true;
+ $html .= $this->buildToggle('is_sticky', 'Navbar fijo (sticky)', $isSticky, $componentId, 'visibility');
+
+ $hideOnScroll = $data['visibility']['hide_on_scroll'] ?? false;
+ $html .= $this->buildToggle('hide_on_scroll', 'Ocultar al hacer scroll hacia abajo', $hideOnScroll, $componentId, 'visibility');
+
+ $showOnMobile = $data['visibility']['show_on_mobile'] ?? true;
+ $html .= $this->buildToggle('show_on_mobile', 'Mostrar en dispositivos móviles', $showOnMobile, $componentId, 'visibility');
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildMenuTab(array $data, string $componentId): string
+ {
+ $html = '';
+
+ return $html;
+ }
+
+ private function buildCtaButtonTab(array $data, string $componentId): string
+ {
+ $html = '';
+
+ $logoType = $data['logo']['logo_type'] ?? 'image';
+ $html .= $this->buildSelect(
+ 'logo_type',
+ 'Tipo de logo',
+ $logoType,
+ ['image' => 'Imagen', 'text' => 'Texto', 'none' => 'Sin logo'],
+ $componentId,
+ 'logo'
+ );
+
+ $logoImageUrl = $data['logo']['logo_image_url'] ?? '';
+ $html .= $this->buildMediaField(
+ 'logo_image_url',
+ 'Imagen del logo',
+ $logoImageUrl,
+ $componentId,
+ 'logo',
+ ['data-conditional-field' => 'logo_type', 'data-conditional-value' => 'image']
+ );
+
+ $logoWidth = $data['logo']['logo_image_width'] ?? 150;
+ $html .= $this->buildNumberField(
+ 'logo_image_width',
+ 'Ancho del logo (px)',
+ $logoWidth,
+ $componentId,
+ 'logo',
+ 50,
+ 400,
+ ['data-conditional-field' => 'logo_type', 'data-conditional-value' => 'image']
+ );
+
+ $logoText = $data['logo']['logo_text'] ?? '';
+ $html .= $this->buildTextField(
+ 'logo_text',
+ 'Texto del logo',
+ $logoText,
+ $componentId,
+ 'logo',
+ '',
+ ['data-conditional-field' => 'logo_type', 'data-conditional-value' => 'text']
+ );
+
+ $logoLink = $data['logo']['logo_link'] ?? '';
+ $html .= $this->buildUrlField(
+ 'logo_link',
+ 'Enlace del logo',
+ $logoLink,
+ $componentId,
+ 'logo',
+ 'Dejar vacío para usar la URL del home'
+ );
+
+ $logoPosition = $data['logo']['logo_position'] ?? 'left';
+ $html .= $this->buildSelect(
+ 'logo_position',
+ 'Posición del logo',
+ $logoPosition,
+ ['left' => 'Izquierda', 'center' => 'Centro', 'right' => 'Derecha'],
+ $componentId,
+ 'logo'
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildStylesTab(array $data, string $componentId): string
+ {
+ $html = '';
+
+ $buttonEnabled = $data['cta_button']['button_enabled'] ?? true;
+ $html .= $this->buildToggle('button_enabled', 'Mostrar botón CTA', $buttonEnabled, $componentId, 'cta_button');
+
+ $buttonText = $data['cta_button']['button_text'] ?? 'Let\'s Talk';
+ $html .= $this->buildTextField(
+ 'button_text',
+ 'Texto del botón',
+ $buttonText,
+ $componentId,
+ 'cta_button',
+ '',
+ ['data-conditional-field' => 'button_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $buttonIcon = $data['cta_button']['button_icon'] ?? 'bi-lightning-charge-fill';
+ $html .= $this->buildTextField(
+ 'button_icon',
+ 'Ícono del botón',
+ $buttonIcon,
+ $componentId,
+ 'cta_button',
+ 'Ej: bi-lightning-charge-fill',
+ ['data-conditional-field' => 'button_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $actionType = $data['cta_button']['button_action_type'] ?? 'modal';
+ $html .= $this->buildSelect(
+ 'button_action_type',
+ 'Tipo de acción del botón',
+ $actionType,
+ ['modal' => 'Abrir modal', 'link' => 'Ir a URL', 'scroll' => 'Scroll a sección'],
+ $componentId,
+ 'cta_button',
+ ['data-conditional-field' => 'button_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $modalTarget = $data['cta_button']['button_modal_target'] ?? '#contactModal';
+ $html .= $this->buildTextField(
+ 'button_modal_target',
+ 'ID del modal',
+ $modalTarget,
+ $componentId,
+ 'cta_button',
+ '#contactModal',
+ ['data-conditional-field' => 'button_action_type', 'data-conditional-value' => 'modal']
+ );
+
+ $linkUrl = $data['cta_button']['button_link_url'] ?? '';
+ $html .= $this->buildUrlField(
+ 'button_link_url',
+ 'URL del enlace',
+ $linkUrl,
+ $componentId,
+ 'cta_button',
+ 'https://',
+ ['data-conditional-field' => 'button_action_type', 'data-conditional-value' => 'link']
+ );
+
+ $linkTarget = $data['cta_button']['button_link_target'] ?? '_self';
+ $html .= $this->buildSelect(
+ 'button_link_target',
+ 'Abrir enlace en',
+ $linkTarget,
+ ['_self' => 'Misma ventana', '_blank' => 'Nueva ventana'],
+ $componentId,
+ 'cta_button',
+ ['data-conditional-field' => 'button_action_type', 'data-conditional-value' => 'link']
+ );
+
+ $scrollTarget = $data['cta_button']['button_scroll_target'] ?? '';
+ $html .= $this->buildTextField(
+ 'button_scroll_target',
+ 'ID de la sección',
+ $scrollTarget,
+ $componentId,
+ 'cta_button',
+ '#contact',
+ ['data-conditional-field' => 'button_action_type', 'data-conditional-value' => 'scroll']
+ );
+
+ $buttonPosition = $data['cta_button']['button_position'] ?? 'right';
+ $html .= $this->buildSelect(
+ 'button_position',
+ 'Posición del botón',
+ $buttonPosition,
+ ['left' => 'Antes del menú', 'right' => 'Después del menú'],
+ $componentId,
+ 'cta_button',
+ ['data-conditional-field' => 'button_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ // Helper methods (similar to TopNotificationBarFormBuilder)
+ private function buildToggle(string $name, string $label, bool $value, string $componentId, string $group): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $checked = $value ? 'checked' : '';
+
+ $html = '';
+
+ $bgColor = $data['styles']['background_color'] ?? '#1e3a5f';
+ $html .= $this->buildColorField('background_color', 'Color de fondo', $bgColor, $componentId, 'styles');
+
+ $textColor = $data['styles']['text_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField('text_color', 'Color del texto', $textColor, $componentId, 'styles');
+
+ $hoverColor = $data['styles']['hover_color'] ?? '#FF8600';
+ $html .= $this->buildColorField('hover_color', 'Color hover', $hoverColor, $componentId, 'styles');
+
+ $activeColor = $data['styles']['active_color'] ?? '#FF8600';
+ $html .= $this->buildColorField('active_color', 'Color del item activo', $activeColor, $componentId, 'styles');
+
+ $buttonBg = $data['styles']['button_background'] ?? '#FF8600';
+ $html .= $this->buildColorField('button_background', 'Color de fondo del botón', $buttonBg, $componentId, 'styles');
+
+ $buttonTextColor = $data['styles']['button_text_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField('button_text_color', 'Color del texto del botón', $buttonTextColor, $componentId, 'styles');
+
+ $buttonHoverBg = $data['styles']['button_hover_background'] ?? '#FF6B35';
+ $html .= $this->buildColorField('button_hover_background', 'Color hover del botón', $buttonHoverBg, $componentId, 'styles');
+
+ $padding = $data['styles']['padding_vertical'] ?? 'normal';
+ $html .= $this->buildSelect(
+ 'padding_vertical',
+ 'Padding vertical',
+ $padding,
+ ['compact' => 'Compacto (0.5rem)', 'normal' => 'Normal (1rem)', 'spacious' => 'Espacioso (1.5rem)'],
+ $componentId,
+ 'styles'
+ );
+
+ $shadowEnabled = $data['styles']['shadow_enabled'] ?? true;
+ $html .= $this->buildToggle('shadow_enabled', 'Activar sombra', $shadowEnabled, $componentId, 'styles');
+
+ $shadowIntensity = $data['styles']['shadow_intensity'] ?? 'medium';
+ $html .= $this->buildSelect(
+ 'shadow_intensity',
+ 'Intensidad de la sombra',
+ $shadowIntensity,
+ ['light' => 'Ligera', 'medium' => 'Media', 'strong' => 'Fuerte'],
+ $componentId,
+ 'styles',
+ ['data-conditional-field' => 'shadow_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $borderEnabled = $data['styles']['border_bottom_enabled'] ?? false;
+ $html .= $this->buildToggle('border_bottom_enabled', 'Borde inferior', $borderEnabled, $componentId, 'styles');
+
+ $borderColor = $data['styles']['border_bottom_color'] ?? '#FF8600';
+ $html .= $this->buildColorField(
+ 'border_bottom_color',
+ 'Color del borde inferior',
+ $borderColor,
+ $componentId,
+ 'styles',
+ ['data-conditional-field' => 'border_bottom_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $borderWidth = $data['styles']['border_bottom_width'] ?? 3;
+ $html .= $this->buildNumberField(
+ 'border_bottom_width',
+ 'Grosor del borde (px)',
+ $borderWidth,
+ $componentId,
+ 'styles',
+ 1,
+ 10,
+ ['data-conditional-field' => 'border_bottom_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildTextField(string $name, string $label, string $value, string $componentId, string $group, string $placeholder = '', array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html = '';
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($group),
+ esc_attr($name),
+ $checked
+ );
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '
';
+ $html .= '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($group),
+ esc_attr($name),
+ esc_attr($value),
+ esc_attr($placeholder),
+ $attrString
+ );
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildSelect(string $name, string $label, string $value, array $options, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= sprintf(
+ '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildNumberField(string $name, string $label, $value, string $componentId, string $group, int $min = null, int $max = null, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+
+ $attrs['type'] = 'number';
+ if ($min !== null) $attrs['min'] = $min;
+ if ($max !== null) $attrs['max'] = $max;
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($group),
+ esc_attr($name),
+ esc_attr($value),
+ $attrString
+ );
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildUrlField(string $name, string $label, string $value, string $componentId, string $group, string $placeholder = '', array $attrs = []): string
+ {
+ $attrs['type'] = 'url';
+ return $this->buildTextField($name, $label, $value, $componentId, $group, $placeholder, $attrs);
+ }
+
+ private function buildColorField(string $name, string $label, string $value, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildMediaField(string $name, string $label, string $value, string $componentId, string $group, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$group}_{$name}";
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html = '';
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($group),
+ esc_attr($name),
+ esc_attr($value)
+ );
+ $html .= sprintf('', esc_attr($value));
+ $html .= '
';
+ $html .= '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '', esc_url($value));
+ }
+
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildAttributesString(array $attrs): string
+ {
+ $attrString = '';
+ foreach ($attrs as $key => $value) {
+ $attrString .= sprintf(' %s="%s"', esc_attr($key), esc_attr($value));
+ }
+ return $attrString;
+ }
+
+ private function buildFormScripts(string $componentId): string
+ {
+ return <<
+SCRIPT;
+ }
+
+ public function getComponentId(): string
+ {
+ return $this->componentId;
+ }
+}
diff --git a/src/Navbar/Infrastructure/Presentation/Public/NavbarRenderer.php b/src/Navbar/Infrastructure/Presentation/Public/NavbarRenderer.php
new file mode 100644
index 00000000..63444ee3
--- /dev/null
+++ b/src/Navbar/Infrastructure/Presentation/Public/NavbarRenderer.php
@@ -0,0 +1,507 @@
+getData();
+
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ $classes = $this->buildNavbarClasses($data);
+ $styles = $this->buildInlineStyles($data);
+ $containerClasses = $this->buildContainerClasses($data);
+
+ $html = sprintf(
+ '';
+
+ // Add custom styles
+ $html .= $this->buildCustomStyles($data);
+
+ // Add sticky/hide on scroll scripts
+ if ($this->needsScrollScript($data)) {
+ $html .= $this->buildScrollScript($data);
+ }
+
+ return $html;
+ }
+
+ private function isEnabled(array $data): bool
+ {
+ return isset($data['visibility']['is_enabled']) &&
+ $data['visibility']['is_enabled'] === true;
+ }
+
+ private function shouldShowOnMobile(array $data): bool
+ {
+ return isset($data['visibility']['show_on_mobile']) &&
+ $data['visibility']['show_on_mobile'] === true;
+ }
+
+ private function shouldShowLogo(array $data): bool
+ {
+ $logoType = $data['logo']['logo_type'] ?? 'none';
+ return $logoType !== 'none';
+ }
+
+ private function isButtonPosition(array $data, string $position): bool
+ {
+ if (!isset($data['cta_button']['button_enabled']) || !$data['cta_button']['button_enabled']) {
+ return false;
+ }
+
+ $buttonPosition = $data['cta_button']['button_position'] ?? 'right';
+ return $buttonPosition === $position;
+ }
+
+ private function needsScrollScript(array $data): bool
+ {
+ return (isset($data['visibility']['is_sticky']) && $data['visibility']['is_sticky']) ||
+ (isset($data['visibility']['hide_on_scroll']) && $data['visibility']['hide_on_scroll']);
+ }
+
+ private function buildNavbarClasses(array $data): string
+ {
+ $classes = ['navbar', 'navbar-expand-' . ($data['menu']['mobile_breakpoint'] ?? 'lg'), 'navbar-dark'];
+
+ if (isset($data['visibility']['is_sticky']) && $data['visibility']['is_sticky']) {
+ $classes[] = 'sticky-top';
+ }
+
+ if (isset($data['visibility']['hide_on_scroll']) && $data['visibility']['hide_on_scroll']) {
+ $classes[] = 'roi-navbar-autohide';
+ }
+
+ $paddingClass = $this->getPaddingClass($data['styles']['padding_vertical'] ?? 'normal');
+ $classes[] = $paddingClass;
+
+ return implode(' ', $classes);
+ }
+
+ private function getPaddingClass(string $padding): string
+ {
+ $paddings = [
+ 'compact' => 'py-2',
+ 'normal' => 'py-3',
+ 'spacious' => 'py-4'
+ ];
+
+ return $paddings[$padding] ?? 'py-3';
+ }
+
+ private function buildContainerClasses(array $data): string
+ {
+ return 'container';
+ }
+
+ private function buildInlineStyles(array $data): string
+ {
+ $styles = [];
+
+ if (!empty($data['styles']['background_color'])) {
+ $styles[] = 'background-color: ' . $data['styles']['background_color'];
+ }
+
+ if (isset($data['styles']['border_bottom_enabled']) && $data['styles']['border_bottom_enabled']) {
+ $borderColor = $data['styles']['border_bottom_color'] ?? '#FF8600';
+ $borderWidth = $data['styles']['border_bottom_width'] ?? 3;
+ $styles[] = "border-bottom: {$borderWidth}px solid {$borderColor}";
+ }
+
+ return implode('; ', $styles);
+ }
+
+ private function buildLogo(array $data): string
+ {
+ $logoType = $data['logo']['logo_type'] ?? 'image';
+ $logoLink = $data['logo']['logo_link'] ?? home_url('/');
+ $logoPosition = $data['logo']['logo_position'] ?? 'left';
+
+ $logoHtml = '';
+
+ switch ($logoType) {
+ case 'image':
+ $imageUrl = $data['logo']['logo_image_url'] ?? '';
+ $imageWidth = $data['logo']['logo_image_width'] ?? 150;
+ if (!empty($imageUrl)) {
+ $logoHtml .= sprintf(
+ '';
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($group),
+ esc_attr($name),
+ esc_attr($value),
+ $attrString
+ );
+ $html .= sprintf('', esc_attr($fieldId));
+ $html .= '
';
+
+ if (!empty($value)) {
+ $html .= sprintf('' . $logoHtml . '
';
+ }
+
+ return $logoHtml;
+ }
+
+ private function buildMobileToggle(array $data): string
+ {
+ return '';
+ }
+
+ private function buildMenu(array $data): string
+ {
+ $menuLocation = $data['menu']['menu_location'] ?? 'primary';
+ $menuAlignment = $data['menu']['menu_alignment'] ?? 'left';
+ $enableDropdowns = $data['menu']['enable_dropdowns'] ?? true;
+
+ $alignmentClasses = [
+ 'left' => 'me-auto',
+ 'center' => 'mx-auto',
+ 'right' => 'ms-auto'
+ ];
+
+ $ulClass = 'navbar-nav mb-2 mb-lg-0 ' . ($alignmentClasses[$menuAlignment] ?? 'me-auto');
+
+ $args = [
+ 'theme_location' => $menuLocation === 'custom' ? '' : $menuLocation,
+ 'menu' => $menuLocation === 'custom' ? ($data['menu']['custom_menu_id'] ?? 0) : '',
+ 'container' => false,
+ 'menu_class' => $ulClass,
+ 'fallback_cb' => '__return_false',
+ 'items_wrap' => '- %3$s
- \n";
+ }
+
+ public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
+ {
+ $indent = ($depth) ? str_repeat("\t", $depth) : '';
+
+ $classes = empty($item->classes) ? [] : (array) $item->classes;
+ $classes[] = 'nav-item';
+
+ if ($args->walker->has_children) {
+ $classes[] = 'dropdown';
+ }
+
+ $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args, $depth));
+ $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
+
+ $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth);
+ $id = $id ? ' id="' . esc_attr($id) . '"' : '';
+
+ $output .= $indent . '
- Los posts se seleccionan según el criterio elegido (categoría, tags, etc.) +
- Si no hay posts relacionados, se mostrarán los más recientes +
- La paginación solo aparece si hay más de una página de resultados +
- Instagram no tiene API de compartir directa, se muestra como enlace inactivo (#) +
- Las URLs de compartir se generan automáticamente con el permalink del post +
- Todos los botones incluyen aria-label para lectores de pantalla +
- El ScrollSpy requiere Bootstrap 5 cargado en el sitio +
- Los IDs se generan automáticamente desde los encabezados del contenido +
- El TOC es responsive y se adapta a pantallas pequeñas +
- + + + + + +
+
+
+ >
+
+
+ Activa o desactiva el componente de posts relacionados
+
+
+
+ Título que aparece antes del grid de posts
+
+ data['query']['posts_per_page'] ?? 12;
+ $postSelection = $this->data['query']['post_selection'] ?? 'category';
+ $excludeCurrent = $this->data['query']['exclude_current_post'] ?? true;
+
+ ob_start();
+ ?>
+
+
+
+ Cantidad de posts a mostrar por página
+
+
+
+
+ Cómo seleccionar los posts relacionados
+
+
+
+ data['layout']['columns'] ?? '3';
+ $cardHeight = $this->data['layout']['card_height'] ?? 'equal';
+
+ ob_start();
+ ?>
+
+ >
+
+
+ Excluye el post actual de los resultados
+
+
+
+ Número de columnas en el grid
+
+
+
+
+ Controla cómo se muestran las cards
+
+ data['pagination']['show_pagination'] ?? true;
+ $paginationPosition = $this->data['pagination']['pagination_position'] ?? 'center';
+
+ ob_start();
+ ?>
+
+
+
+ >
+
+
+ Muestra u oculta la paginación
+
+
+
+ Alineación de la paginación
+
+ data['styles']['container_classes'] ?? 'my-5 related-posts';
+ $gridGap = $this->data['styles']['grid_gap'] ?? '4';
+
+ ob_start();
+ ?>
+
+
+
+ Clases CSS adicionales para el contenedor principal
+
+
+
+
+ Espaciado entre cards
+
+
+
+ componentId;
+ }
+}
diff --git a/src/RelatedPosts/Infrastructure/Presentation/Public/RelatedPostsRenderer.php b/src/RelatedPosts/Infrastructure/Presentation/Public/RelatedPostsRenderer.php
new file mode 100644
index 00000000..0bd5dcc4
--- /dev/null
+++ b/src/RelatedPosts/Infrastructure/Presentation/Public/RelatedPostsRenderer.php
@@ -0,0 +1,242 @@
+currentPostId = get_the_ID() ?: 0;
+ }
+
+ public function render(Component $component): string
+ {
+ $data = $component->getData();
+
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ $this->query = $this->buildQuery($data);
+
+ if (!$this->query->have_posts()) {
+ $this->query = $this->buildFallbackQuery($data);
+ }
+
+ if (!$this->query->have_posts()) {
+ wp_reset_postdata();
+ return '';
+ }
+
+ $containerClasses = $data['styles']['container_classes'] ?? 'my-5 related-posts';
+ $sectionTitle = $data['visibility']['section_title'] ?? 'Descubre Más Contenido';
+
+ ob_start();
+ ?>
+ Notas:
+-
+
+
+ renderPostsGrid($data); ?>
+ renderPagination($data); ?>
+
+ 'post',
+ 'post_status' => 'publish',
+ 'posts_per_page' => $postsPerPage,
+ 'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
+ 'ignore_sticky_posts' => true,
+ ];
+
+ if ($excludeCurrent) {
+ $args['post__not_in'] = [$this->currentPostId];
+ }
+
+ switch ($postSelection) {
+ case 'category':
+ $args['category__in'] = wp_get_post_categories($this->currentPostId);
+ break;
+
+ case 'tags':
+ $tags = wp_get_post_tags($this->currentPostId, ['fields' => 'ids']);
+ if (!empty($tags)) {
+ $args['tag__in'] = $tags;
+ }
+ break;
+
+ case 'both':
+ $args['category__in'] = wp_get_post_categories($this->currentPostId);
+ $tags = wp_get_post_tags($this->currentPostId, ['fields' => 'ids']);
+ if (!empty($tags)) {
+ $args['tag__in'] = $tags;
+ }
+ break;
+
+ case 'random':
+ $args['orderby'] = 'rand';
+ break;
+
+ case 'recent':
+ default:
+ $args['orderby'] = 'date';
+ $args['order'] = 'DESC';
+ break;
+ }
+
+ return new WP_Query($args);
+ }
+
+ private function buildFallbackQuery(array $data): WP_Query
+ {
+ $postsPerPage = $data['query']['posts_per_page'] ?? 12;
+
+ $args = [
+ 'post_type' => 'post',
+ 'post_status' => 'publish',
+ 'posts_per_page' => $postsPerPage,
+ 'orderby' => 'date',
+ 'order' => 'DESC',
+ 'post__not_in' => [$this->currentPostId],
+ 'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
+ ];
+
+ return new WP_Query($args);
+ }
+
+ private function renderPostsGrid(array $data): string
+ {
+ $columns = $data['layout']['columns'] ?? '3';
+ $gridGap = 'g-' . ($data['styles']['grid_gap'] ?? '4');
+ $columnClass = $this->getColumnClass($columns);
+
+ ob_start();
+ ?>
+
+ query->have_posts()) {
+ $this->query->the_post();
+ echo $this->renderPostCard($data, $columnClass);
+ }
+ ?>
+
+ 'col-12',
+ '2' => 'col-md-6',
+ '3' => 'col-md-4',
+ '4' => 'col-md-3',
+ ];
+
+ return $columnMap[$columns] ?? 'col-md-4';
+ }
+
+ private function renderPostCard(array $data, string $columnClass): string
+ {
+ $cardHeight = $data['layout']['card_height'] ?? 'equal';
+ $heightClass = $cardHeight === 'equal' ? 'h-100' : '';
+ $textCenterClass = $cardHeight === 'equal' ? 'text-center' : '';
+ $dFlexClass = $cardHeight === 'equal' ? 'd-flex align-items-center justify-content-center' : '';
+
+ ob_start();
+ ?>
+
+
+
+ query->max_num_pages <= 1) {
+ return '';
+ }
+
+ $paginationPosition = $data['pagination']['pagination_position'] ?? 'center';
+ $positionClass = 'justify-content-' . $paginationPosition;
+
+ $currentPage = max(1, get_query_var('paged'));
+ $totalPages = $this->query->max_num_pages;
+
+ ob_start();
+ ?>
+
+ componentId = $componentId;
+ $this->data = $data;
+ }
+
+ public function build(): string
+ {
+ ob_start();
+ ?>
+
+ data['visibility']['is_enabled'] ?? true;
+ $showLabel = $this->data['visibility']['show_label'] ?? true;
+ $labelText = $this->data['visibility']['label_text'] ?? 'Compartir:';
+
+ ob_start();
+ ?>
+
+
+
+
+
+ + +
+
+
+
+ >
+
+
+ Activa o desactiva los botones de compartir en redes sociales
+
+
+
+ >
+
+
+ Muestra u oculta el texto de etiqueta antes de los botones
+
+
+
+ Texto que aparece antes de los botones
+
+ data['networks']['enabled_networks'] ?? ['facebook', 'instagram', 'linkedin', 'whatsapp', 'twitter', 'email'];
+ $showLabels = $this->data['networks']['show_network_labels'] ?? false;
+
+ $networks = [
+ 'facebook' => 'Facebook',
+ 'instagram' => 'Instagram',
+ 'linkedin' => 'LinkedIn',
+ 'whatsapp' => 'WhatsApp',
+ 'twitter' => 'Twitter / X',
+ 'email' => 'Email',
+ ];
+
+ ob_start();
+ ?>
+
+
+
+ Selecciona qué redes sociales mostrar en los botones de compartir
+ $label): ?> +
+ >
+
+
+
+
+
+ data['button_styles']['button_style'] ?? 'outline';
+ $buttonSize = $this->data['button_styles']['button_size'] ?? 'sm';
+
+ ob_start();
+ ?>
+
+ >
+
+
+ Muestra el nombre de la red social junto al icono
+
+
+
+ Estilo visual de los botones
+
+
+
+
+ Tamaño de los botones
+
+ data['advanced']['container_classes'] ?? 'my-5 py-4 border-top';
+ $wrapperClasses = $this->data['advanced']['buttons_wrapper_classes'] ?? 'd-flex gap-2 flex-wrap share-buttons';
+
+ ob_start();
+ ?>
+
+
+
+ Clases CSS adicionales para el contenedor principal
+
+
+
+
+ Clases CSS para el wrapper de los botones
+
+
+
+ componentId;
+ }
+}
diff --git a/src/ShareButtons/Infrastructure/Presentation/Public/ShareButtonsRenderer.php b/src/ShareButtons/Infrastructure/Presentation/Public/ShareButtonsRenderer.php
new file mode 100644
index 00000000..67429759
--- /dev/null
+++ b/src/ShareButtons/Infrastructure/Presentation/Public/ShareButtonsRenderer.php
@@ -0,0 +1,159 @@
+ [
+ 'url_template' => 'https://www.facebook.com/sharer/sharer.php?u={url}',
+ 'icon_class' => 'bi bi-facebook',
+ 'button_class' => 'btn-outline-primary',
+ 'aria_label' => 'Compartir en Facebook',
+ ],
+ 'instagram' => [
+ 'url_template' => '#',
+ 'icon_class' => 'bi bi-instagram',
+ 'button_class' => 'btn-outline-danger',
+ 'aria_label' => 'Compartir en Instagram',
+ ],
+ 'linkedin' => [
+ 'url_template' => 'https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}',
+ 'icon_class' => 'bi bi-linkedin',
+ 'button_class' => 'btn-outline-info',
+ 'aria_label' => 'Compartir en LinkedIn',
+ ],
+ 'whatsapp' => [
+ 'url_template' => 'https://wa.me/?text={title}%20{url}',
+ 'icon_class' => 'bi bi-whatsapp',
+ 'button_class' => 'btn-outline-success',
+ 'aria_label' => 'Compartir en WhatsApp',
+ ],
+ 'twitter' => [
+ 'url_template' => 'https://twitter.com/intent/tweet?url={url}&text={title}',
+ 'icon_class' => 'bi bi-twitter-x',
+ 'button_class' => 'btn-outline-dark',
+ 'aria_label' => 'Compartir en X',
+ ],
+ 'email' => [
+ 'url_template' => 'mailto:?subject={title}&body={url}',
+ 'icon_class' => 'bi bi-envelope',
+ 'button_class' => 'btn-outline-secondary',
+ 'aria_label' => 'Compartir por Email',
+ ],
+ ];
+
+ public function render(Component $component): string
+ {
+ $data = $component->getData();
+
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ $enabledNetworks = $data['networks']['enabled_networks'] ?? [];
+ if (empty($enabledNetworks)) {
+ return '';
+ }
+
+ $containerClasses = $data['advanced']['container_classes'] ?? 'my-5 py-4 border-top';
+ $wrapperClasses = $data['advanced']['buttons_wrapper_classes'] ?? 'd-flex gap-2 flex-wrap share-buttons';
+
+ $html = sprintf('Notas:
+-
+
', esc_attr($containerClasses));
+
+ if ($this->shouldShowLabel($data)) {
+ $labelText = $data['visibility']['label_text'] ?? 'Compartir:';
+ $html .= sprintf('
';
+
+ return $html;
+ }
+
+ private function isEnabled(array $data): bool
+ {
+ return isset($data['visibility']['is_enabled']) &&
+ $data['visibility']['is_enabled'] === true;
+ }
+
+ private function shouldShowLabel(array $data): bool
+ {
+ return isset($data['visibility']['show_label']) &&
+ $data['visibility']['show_label'] === true;
+ }
+
+ private function renderButtons(array $data, array $enabledNetworks): string
+ {
+ $postUrl = get_permalink() ?: '';
+ $postTitle = get_the_title() ?: '';
+ $buttonStyle = $data['button_styles']['button_style'] ?? 'outline';
+ $buttonSize = $data['button_styles']['button_size'] ?? 'sm';
+ $showLabels = $data['networks']['show_network_labels'] ?? false;
+
+ $output = '';
+
+ foreach ($enabledNetworks as $network) {
+ if (!isset($this->networksConfig[$network])) {
+ continue;
+ }
+
+ $networkConfig = $this->networksConfig[$network];
+ $url = $this->buildShareUrl($network, $networkConfig['url_template'], $postUrl, $postTitle);
+ $buttonClass = $this->getButtonClass($networkConfig['button_class'], $buttonStyle, $buttonSize);
+
+ $label = $showLabels ? ' ' . esc_html(ucfirst($network)) : '';
+
+ $output .= sprintf(
+ '
+ %s
+ ',
+ esc_url($url),
+ esc_attr($buttonClass),
+ esc_attr($networkConfig['aria_label']),
+ esc_attr($networkConfig['icon_class']),
+ $label
+ );
+ }
+
+ return $output;
+ }
+
+ private function buildShareUrl(string $network, string $template, string $postUrl, string $postTitle): string
+ {
+ if ($network === 'instagram') {
+ return '#';
+ }
+
+ $replacements = [
+ '{url}' => urlencode($postUrl),
+ '{title}' => urlencode($postTitle),
+ ];
+
+ return str_replace(array_keys($replacements), array_values($replacements), $template);
+ }
+
+ private function getButtonClass(string $networkClass, string $buttonStyle, string $buttonSize): string
+ {
+ $baseClass = 'btn';
+ $sizeClass = 'btn-' . $buttonSize;
+
+ if ($buttonStyle === 'solid') {
+ $networkClass = str_replace('btn-outline-', 'btn-', $networkClass);
+ }
+
+ return "{$baseClass} {$networkClass} {$sizeClass}";
+ }
+
+ public function supports(string $componentType): bool
+ {
+ return $componentType === 'share-buttons';
+ }
+}
diff --git a/src/Shared/Domain/.gitkeep b/src/Shared/Domain/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Shared/Domain/ComponentDefaultsRepositoryInterface.php b/src/Shared/Domain/ComponentDefaultsRepositoryInterface.php
new file mode 100644
index 00000000..d6236f24
--- /dev/null
+++ b/src/Shared/Domain/ComponentDefaultsRepositoryInterface.php
@@ -0,0 +1,76 @@
+getByName(ComponentName::fromString('top_bar'));
+ * $component = new Component(
+ * ComponentName::fromString('top_bar'),
+ * $defaults // configuración por defecto
+ * );
+ *
+ * // Resetear componente a valores por defecto
+ * $component = $component->updateConfiguration($defaults);
+ * ```
+ *
+ * @package ROITheme\Domain\Contracts
+ */
+interface ComponentDefaultsRepositoryInterface
+{
+ /**
+ * Obtener configuración por defecto de un componente
+ *
+ * @param ComponentName $name Nombre del componente
+ * @return ComponentConfiguration Configuración por defecto
+ */
+ public function getByName(ComponentName $name): ComponentConfiguration;
+
+ /**
+ * Guardar configuración por defecto para un componente
+ *
+ * @param ComponentName $name Nombre del componente
+ * @param ComponentConfiguration $configuration Configuración por defecto
+ * @return void
+ */
+ public function save(ComponentName $name, ComponentConfiguration $configuration): void;
+
+ /**
+ * Verificar si existen defaults para un componente
+ *
+ * @param ComponentName $name
+ * @return bool
+ */
+ public function exists(ComponentName $name): bool;
+
+ /**
+ * Obtener todos los defaults
+ *
+ * @return array%s
', esc_html($labelText)); + } + + $html .= sprintf('', esc_attr($wrapperClasses));
+ $html .= $this->renderButtons($data, $enabledNetworks);
+ $html .= '
';
+ $html .= '
+
+
+ data['visibility']['is_enabled'] ?? true;
+ $sticky = $this->data['visibility']['sticky'] ?? true;
+ $showOnMobile = $this->data['visibility']['show_on_mobile'] ?? false;
+
+ ob_start();
+ ?>
+
+
+ buildVisibilityTab(); ?>
+ buildConfigTab(); ?>
+ buildManualItemsTab(); ?>
+ buildStylesTab(); ?>
+
+
+
+ >
+
+
+ Activa o desactiva el componente de tabla de contenido
+
+
+
+ >
+
+
+ Mantiene el TOC visible mientras el usuario navega
+
+
+ data['config']['title'] ?? 'Tabla de Contenido';
+ $headingLevels = $this->data['config']['heading_levels'] ?? ['h2', 'h3'];
+ $autoGenerate = $this->data['config']['auto_generate'] ?? true;
+ $offsetTop = $this->data['config']['offset_top'] ?? 100;
+ $smoothScroll = $this->data['config']['smooth_scroll'] ?? true;
+ $maxHeight = $this->data['config']['max_height'] ?? 'calc(100vh - 400px)';
+ $customCssClass = $this->data['config']['custom_css_class'] ?? '';
+
+ ob_start();
+ ?>
+
+ >
+
+
+ Muestra el TOC en pantallas pequeñas
+
+
+
+ Título que aparece en el encabezado del TOC
+
+
+
+ Selecciona qué niveles incluir en el TOC
+ 'H2', 'h3' => 'H3', 'h4' => 'H4', 'h5' => 'H5', 'h6' => 'H6'];
+ foreach ($availableLevels as $level => $label):
+ ?>
+
+
+ >
+
+
+
+
+
+
+ >
+
+
+ Si está desactivado, usa items manuales
+
+
+
+ Offset desde el top para el ScrollSpy
+
+
+
+
+ >
+
+
+ Activar scroll suave al hacer clic en enlaces
+
+
+
+ CSS válido (ej: 500px, calc(100vh - 200px))
+
+
+
+
+ Opcional: agregar clase CSS adicional
+
+ data['manual_items']['items'] ?? [];
+
+ ob_start();
+ ?>
+
+ Nota: Los items manuales solo se usan si "Generar automáticamente" está desactivado en la pestaña Configuración.
+
+
+ '', 'anchor' => '', 'level' => 2]];
+ }
+
+ foreach ($items as $index => $item):
+ ?>
+
+
+
+
+ data['styles']['background_color'] ?? '#ffffff';
+ $borderColor = $this->data['styles']['border_color'] ?? '#E6E9ED';
+ $titleColor = $this->data['styles']['title_color'] ?? '#0E2337';
+ $linkColor = $this->data['styles']['link_color'] ?? '#6B7280';
+ $linkHoverColor = $this->data['styles']['link_hover_color'] ?? '#0E2337';
+ $activeBorderColor = $this->data['styles']['active_border_color'] ?? '#0E2337';
+ $activeBgColor = $this->data['styles']['active_bg_color'] ?? '#F9FAFB';
+
+ ob_start();
+ ?>
+
+
+
+
+ Item #
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ componentId;
+ }
+}
diff --git a/src/TableOfContents/Infrastructure/Presentation/Public/TableOfContentsRenderer.php b/src/TableOfContents/Infrastructure/Presentation/Public/TableOfContentsRenderer.php
new file mode 100644
index 00000000..5b2e8fe1
--- /dev/null
+++ b/src/TableOfContents/Infrastructure/Presentation/Public/TableOfContentsRenderer.php
@@ -0,0 +1,265 @@
+currentPostId = get_the_ID() ?: 0;
+ }
+
+ public function render(Component $component): string
+ {
+ $data = $component->getData();
+
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ $autoGenerate = $data['config']['auto_generate'] ?? true;
+ $tocItems = $autoGenerate
+ ? $this->generateTocFromContent($data)
+ : $this->getManualItems($data);
+
+ if (empty($tocItems)) {
+ return '';
+ }
+
+ $componentId = $component->getId();
+ $customStyles = $this->generateCustomStyles($componentId, $data['styles'] ?? []);
+ $stickyClass = ($data['visibility']['sticky'] ?? true) ? 'sidebar-sticky' : '';
+ $mobileClass = !($data['visibility']['show_on_mobile'] ?? false) ? 'd-none d-lg-block' : '';
+ $title = $data['config']['title'] ?? 'Tabla de Contenido';
+ $maxHeight = $data['config']['max_height'] ?? 'calc(100vh - 400px)';
+ $offsetTop = $data['config']['offset_top'] ?? 100;
+
+ ob_start();
+ ?>
+
+
+
+
+ Notas sobre el TOC:
+-
+
+
+
+
+
+
+
+
+
+
+ post_content)) {
+ return [];
+ }
+
+ $headingLevels = $data['config']['heading_levels'] ?? ['h2', 'h3'];
+ $content = apply_filters('the_content', $post->post_content);
+
+ $dom = new DOMDocument();
+ libxml_use_internal_errors(true);
+ $dom->loadHTML('' . $content);
+ libxml_clear_errors();
+
+ $xpath = new DOMXPath($dom);
+ $xpathQuery = implode(' | ', array_map(function($level) {
+ return '//' . $level;
+ }, $headingLevels));
+
+ $headings = $xpath->query($xpathQuery);
+
+ if ($headings->length === 0) {
+ return [];
+ }
+
+ $tocItems = [];
+ $headingCounter = [];
+
+ foreach ($headings as $heading) {
+ $tagName = strtolower($heading->tagName);
+ $level = intval(substr($tagName, 1));
+ $text = trim($heading->textContent);
+
+ if (empty($text)) {
+ continue;
+ }
+
+ $existingId = $heading->getAttribute('id');
+ $anchor = !empty($existingId)
+ ? $existingId
+ : $this->generateAnchorId($text, $headingCounter);
+
+ $tocItems[] = [
+ 'text' => $text,
+ 'anchor' => $anchor,
+ 'level' => $level
+ ];
+ }
+
+ return $tocItems;
+ }
+
+ private function getManualItems(array $data): array
+ {
+ return $data['manual_items']['items'] ?? [];
+ }
+
+ private function generateAnchorId(string $text, array &$counter): string
+ {
+ $id = strtolower($text);
+ $id = remove_accents($id);
+ $id = preg_replace('/[^a-z0-9]+/', '-', $id);
+ $id = trim($id, '-');
+
+ $baseId = $id;
+ $count = 1;
+
+ while (isset($counter[$id])) {
+ $id = $baseId . '-' . $count;
+ $count++;
+ }
+
+ $counter[$id] = true;
+
+ return $id;
+ }
+
+ private function generateCustomStyles(string $componentId, array $styles): string
+ {
+ if (empty($styles)) {
+ return '';
+ }
+
+ $css = [];
+
+ if (isset($styles['background_color'])) {
+ $css[] = "#$componentId.toc-container { background: {$styles['background_color']}; }";
+ }
+
+ if (isset($styles['border_color'])) {
+ $css[] = "#$componentId.toc-container { border-color: {$styles['border_color']}; }";
+ }
+
+ if (isset($styles['title_color'])) {
+ $css[] = "#$componentId.toc-container h4 { color: {$styles['title_color']}; }";
+ }
+
+ if (isset($styles['link_color'])) {
+ $css[] = "#$componentId .toc-link { color: {$styles['link_color']}; }";
+ }
+
+ if (isset($styles['link_hover_color'])) {
+ $css[] = "#$componentId .toc-link:hover { color: {$styles['link_hover_color']}; }";
+ }
+
+ if (isset($styles['active_border_color'])) {
+ $css[] = "#$componentId .toc-link.active { border-left-color: {$styles['active_border_color']}; }";
+ }
+
+ if (isset($styles['active_bg_color'])) {
+ $css[] = "#$componentId .toc-link.active { background-color: {$styles['active_bg_color']}; }";
+ }
+
+ return implode("\n", $css);
+ }
+
+ public function supports(string $componentType): bool
+ {
+ return $componentType === 'table-of-contents';
+ }
+}
diff --git a/src/TopNotificationBar/Infrastructure/Presentation/Admin/TopNotificationBarFormBuilder.php b/src/TopNotificationBar/Infrastructure/Presentation/Admin/TopNotificationBarFormBuilder.php
new file mode 100644
index 00000000..19ef1acb
--- /dev/null
+++ b/src/TopNotificationBar/Infrastructure/Presentation/Admin/TopNotificationBarFormBuilder.php
@@ -0,0 +1,691 @@
+componentId = $componentId;
+ $this->data = $data;
+ }
+
+ public function build(): string
+ {
+ $data = $this->data;
+ $componentId = $this->componentId;
+
+ $html = '';
+
+ // Agregar scripts de formulario
+ $html .= $this->buildFormScripts($componentId);
+
+ return $html;
+ }
+
+ private function buildVisibilitySection(array $data, string $componentId): string
+ {
+ $html = '-
+
+ 2 ? 'toc-level-' . $level : '';
+ ?>
+
';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildContentSection(array $data, string $componentId): string
+ {
+ $html = 'Visibilidad
'; + $html .= '';
+
+ // Is Enabled
+ $isEnabled = $data['visibility']['is_enabled'] ?? true;
+ $html .= $this->buildToggle(
+ 'is_enabled',
+ 'Mostrar barra de notificación',
+ $isEnabled,
+ $componentId,
+ 'Activa o desactiva la barra de notificación superior'
+ );
+
+ // Show On Pages
+ $showOn = $data['visibility']['show_on_pages'] ?? 'all';
+ $html .= $this->buildSelect(
+ 'show_on_pages',
+ 'Mostrar en',
+ $showOn,
+ [
+ 'all' => 'Todas las páginas',
+ 'home' => 'Solo página de inicio',
+ 'posts' => 'Solo posts individuales',
+ 'pages' => 'Solo páginas',
+ 'custom' => 'Páginas específicas'
+ ],
+ $componentId,
+ 'Define en qué páginas se mostrará la barra'
+ );
+
+ // Custom Page IDs
+ $customPageIds = $data['visibility']['custom_page_ids'] ?? '';
+ $html .= $this->buildTextField(
+ 'custom_page_ids',
+ 'IDs de páginas específicas',
+ $customPageIds,
+ $componentId,
+ 'IDs de páginas separados por comas',
+ 'Ej: 1,5,10',
+ ['data-conditional-field' => 'show_on_pages', 'data-conditional-value' => 'custom']
+ );
+
+ // Hide On Mobile
+ $hideOnMobile = $data['visibility']['hide_on_mobile'] ?? false;
+ $html .= $this->buildToggle(
+ 'hide_on_mobile',
+ 'Ocultar en dispositivos móviles',
+ $hideOnMobile,
+ $componentId,
+ 'Oculta la barra en pantallas menores a 768px'
+ );
+
+ // Is Dismissible
+ $isDismissible = $data['visibility']['is_dismissible'] ?? false;
+ $html .= $this->buildToggle(
+ 'is_dismissible',
+ 'Permitir cerrar',
+ $isDismissible,
+ $componentId,
+ 'Agrega botón X para que el usuario pueda cerrar la barra'
+ );
+
+ // Dismissible Cookie Days
+ $cookieDays = $data['visibility']['dismissible_cookie_days'] ?? 7;
+ $html .= $this->buildNumberField(
+ 'dismissible_cookie_days',
+ 'Días antes de volver a mostrar',
+ $cookieDays,
+ $componentId,
+ 'Días que permanece oculta después de cerrarla',
+ 1,
+ 365,
+ ['data-conditional-field' => 'is_dismissible', 'data-conditional-value' => 'true']
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildStylesSection(array $data, string $componentId): string
+ {
+ $html = 'Contenido
'; + $html .= '';
+
+ // Icon Type
+ $iconType = $data['content']['icon_type'] ?? 'bootstrap';
+ $html .= $this->buildSelect(
+ 'icon_type',
+ 'Tipo de ícono',
+ $iconType,
+ [
+ 'bootstrap' => 'Bootstrap Icons',
+ 'custom' => 'Imagen personalizada',
+ 'none' => 'Sin ícono'
+ ],
+ $componentId,
+ 'Selecciona el tipo de ícono a mostrar'
+ );
+
+ // Bootstrap Icon
+ $bootstrapIcon = $data['content']['bootstrap_icon'] ?? 'bi-megaphone-fill';
+ $html .= $this->buildTextField(
+ 'bootstrap_icon',
+ 'Clase de ícono Bootstrap',
+ $bootstrapIcon,
+ $componentId,
+ 'Nombre de la clase del ícono sin el prefijo \'bi\' (ej: megaphone-fill)',
+ 'Ej: bi-megaphone-fill',
+ ['data-conditional-field' => 'icon_type', 'data-conditional-value' => 'bootstrap']
+ );
+
+ // Custom Icon URL
+ $customIconUrl = $data['content']['custom_icon_url'] ?? '';
+ $html .= $this->buildMediaField(
+ 'custom_icon_url',
+ 'Imagen personalizada',
+ $customIconUrl,
+ $componentId,
+ 'Sube una imagen personalizada (recomendado: PNG 24x24px)',
+ ['data-conditional-field' => 'icon_type', 'data-conditional-value' => 'custom']
+ );
+
+ // Announcement Label
+ $announcementLabel = $data['content']['announcement_label'] ?? 'Nuevo:';
+ $html .= $this->buildTextField(
+ 'announcement_label',
+ 'Etiqueta del anuncio',
+ $announcementLabel,
+ $componentId,
+ 'Texto destacado en negrita antes del mensaje',
+ 'Ej: Nuevo:, Importante:, Aviso:'
+ );
+
+ // Announcement Text
+ $announcementText = $data['content']['announcement_text'] ?? 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.';
+ $html .= $this->buildTextArea(
+ 'announcement_text',
+ 'Texto del anuncio',
+ $announcementText,
+ $componentId,
+ 'Mensaje principal del anuncio (máximo 200 caracteres)',
+ 3
+ );
+
+ // Link Enabled
+ $linkEnabled = $data['content']['link_enabled'] ?? true;
+ $html .= $this->buildToggle(
+ 'link_enabled',
+ 'Mostrar enlace',
+ $linkEnabled,
+ $componentId,
+ 'Activa o desactiva el enlace de acción'
+ );
+
+ // Link Text
+ $linkText = $data['content']['link_text'] ?? 'Ver Catálogo';
+ $html .= $this->buildTextField(
+ 'link_text',
+ 'Texto del enlace',
+ $linkText,
+ $componentId,
+ 'Texto del enlace de acción',
+ '',
+ ['data-conditional-field' => 'link_enabled', 'data-conditional-value' => 'true']
+ );
+
+ // Link URL
+ $linkUrl = $data['content']['link_url'] ?? '#';
+ $html .= $this->buildUrlField(
+ 'link_url',
+ 'URL del enlace',
+ $linkUrl,
+ $componentId,
+ 'URL de destino del enlace',
+ 'https://',
+ ['data-conditional-field' => 'link_enabled', 'data-conditional-value' => 'true']
+ );
+
+ // Link Target
+ $linkTarget = $data['content']['link_target'] ?? '_self';
+ $html .= $this->buildSelect(
+ 'link_target',
+ 'Abrir enlace en',
+ $linkTarget,
+ [
+ '_self' => 'Misma ventana',
+ '_blank' => 'Nueva ventana'
+ ],
+ $componentId,
+ 'Define cómo se abrirá el enlace',
+ ['data-conditional-field' => 'link_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildPreviewSection(array $data): string
+ {
+ $html = 'Estilos
'; + $html .= '';
+
+ // Background Color
+ $bgColor = $data['styles']['background_color'] ?? '#FF8600';
+ $html .= $this->buildColorField(
+ 'background_color',
+ 'Color de fondo',
+ $bgColor,
+ $componentId,
+ 'Color de fondo de la barra (por defecto: orange primary)'
+ );
+
+ // Text Color
+ $textColor = $data['styles']['text_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField(
+ 'text_color',
+ 'Color del texto',
+ $textColor,
+ $componentId,
+ 'Color del texto del anuncio'
+ );
+
+ // Link Color
+ $linkColor = $data['styles']['link_color'] ?? '#FFFFFF';
+ $html .= $this->buildColorField(
+ 'link_color',
+ 'Color del enlace',
+ $linkColor,
+ $componentId,
+ 'Color del enlace de acción'
+ );
+
+ // Font Size
+ $fontSize = $data['styles']['font_size'] ?? 'small';
+ $html .= $this->buildSelect(
+ 'font_size',
+ 'Tamaño de fuente',
+ $fontSize,
+ [
+ 'extra-small' => 'Muy pequeño (0.75rem)',
+ 'small' => 'Pequeño (0.875rem)',
+ 'normal' => 'Normal (1rem)',
+ 'large' => 'Grande (1.125rem)'
+ ],
+ $componentId,
+ 'Tamaño del texto del anuncio'
+ );
+
+ // Padding Vertical
+ $padding = $data['styles']['padding_vertical'] ?? 'normal';
+ $html .= $this->buildSelect(
+ 'padding_vertical',
+ 'Padding vertical',
+ $padding,
+ [
+ 'compact' => 'Compacto (0.5rem)',
+ 'normal' => 'Normal (0.75rem)',
+ 'spacious' => 'Espacioso (1rem)'
+ ],
+ $componentId,
+ 'Espaciado vertical interno de la barra'
+ );
+
+ // Text Alignment
+ $alignment = $data['styles']['text_alignment'] ?? 'center';
+ $html .= $this->buildSelect(
+ 'text_alignment',
+ 'Alineación del texto',
+ $alignment,
+ [
+ 'left' => 'Izquierda',
+ 'center' => 'Centro',
+ 'right' => 'Derecha'
+ ],
+ $componentId,
+ 'Alineación del contenido de la barra'
+ );
+
+ // Animation Enabled
+ $animationEnabled = $data['styles']['animation_enabled'] ?? false;
+ $html .= $this->buildToggle(
+ 'animation_enabled',
+ 'Activar animación',
+ $animationEnabled,
+ $componentId,
+ 'Activa animación de entrada al cargar la página'
+ );
+
+ // Animation Type
+ $animationType = $data['styles']['animation_type'] ?? 'slide-down';
+ $html .= $this->buildSelect(
+ 'animation_type',
+ 'Tipo de animación',
+ $animationType,
+ [
+ 'slide-down' => 'Deslizar desde arriba',
+ 'fade-in' => 'Aparecer gradualmente'
+ ],
+ $componentId,
+ 'Tipo de animación de entrada',
+ ['data-conditional-field' => 'animation_enabled', 'data-conditional-value' => 'true']
+ );
+
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildToggle(string $name, string $label, bool $value, string $componentId, string $description = ''): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+ $checked = $value ? 'checked' : '';
+
+ $html = 'Vista Previa
'; + $html .= '';
+ $html .= '
';
+ $html .= '';
+ $html .= '
';
+ $html .= 'La vista previa se actualizará automáticamente al modificar los campos.
'; + $html .= '';
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildTextField(string $name, string $label, string $value, string $componentId, string $description = '', string $placeholder = '', array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ $checked
+ );
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '
';
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ esc_attr($value),
+ esc_attr($placeholder),
+ $attrString
+ );
+
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildTextArea(string $name, string $label, string $value, string $componentId, string $description = '', int $rows = 3, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ $rows,
+ $attrString,
+ esc_textarea($value)
+ );
+
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildSelect(string $name, string $label, string $value, array $options, string $componentId, string $description = '', array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html .= sprintf(
+ '';
+
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildNumberField(string $name, string $label, $value, string $componentId, string $description = '', int $min = null, int $max = null, array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+
+ $attrs['type'] = 'number';
+ if ($min !== null) {
+ $attrs['min'] = $min;
+ }
+ if ($max !== null) {
+ $attrs['max'] = $max;
+ }
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ esc_attr($value),
+ $attrString
+ );
+
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildUrlField(string $name, string $label, string $value, string $componentId, string $description = '', string $placeholder = '', array $attrs = []): string
+ {
+ $attrs['type'] = 'url';
+ return $this->buildTextField($name, $label, $value, $componentId, $description, $placeholder, $attrs);
+ }
+
+ private function buildColorField(string $name, string $label, string $value, string $componentId, string $description = ''): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildMediaField(string $name, string $label, string $value, string $componentId, string $description = '', array $attrs = []): string
+ {
+ $fieldId = "roi_{$componentId}_{$name}";
+
+ $html = '';
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ esc_attr($value)
+ );
+ $html .= sprintf(
+ '',
+ esc_attr($value)
+ );
+ $html .= '
';
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '';
+ $html .= sprintf('', esc_attr($fieldId), esc_html($label));
+ $html .= '', esc_url($value));
+ }
+
+ if (!empty($description)) {
+ $html .= sprintf('%s', esc_html($description));
+ }
+ $html .= '
';
+
+ return $html;
+ }
+
+ private function buildAttributesString(array $attrs): string
+ {
+ $attrString = '';
+ foreach ($attrs as $key => $value) {
+ $attrString .= sprintf(' %s="%s"', esc_attr($key), esc_attr($value));
+ }
+ return $attrString;
+ }
+
+ private function buildFormScripts(string $componentId): string
+ {
+ return <<
+SCRIPT;
+ }
+
+ public function getComponentId(): string
+ {
+ return $this->componentId;
+ }
+}
diff --git a/src/TopNotificationBar/Infrastructure/Presentation/Public/TopNotificationBarRenderer.php b/src/TopNotificationBar/Infrastructure/Presentation/Public/TopNotificationBarRenderer.php
new file mode 100644
index 00000000..016a677c
--- /dev/null
+++ b/src/TopNotificationBar/Infrastructure/Presentation/Public/TopNotificationBarRenderer.php
@@ -0,0 +1,348 @@
+getData();
+
+ // Verificar si el componente está habilitado
+ if (!$this->isEnabled($data)) {
+ return '';
+ }
+
+ // Verificar si debe mostrarse en la página actual
+ if (!$this->shouldShowOnCurrentPage($data)) {
+ return '';
+ }
+
+ // Verificar si el usuario ha cerrado la barra (si es dismissible)
+ if ($this->isDismissed($data)) {
+ return '';
+ }
+
+ $classes = $this->buildClasses($data);
+ $styles = $this->buildInlineStyles($data);
+ $content = $this->buildContent($data);
+
+ $html = sprintf(
+ '';
+
+ $attrString = $this->buildAttributesString($attrs);
+
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId),
+ esc_attr($componentId),
+ esc_attr($name),
+ esc_attr($value),
+ $attrString
+ );
+ $html .= sprintf(
+ '',
+ esc_attr($fieldId)
+ );
+ $html .= '
';
+
+ if (!empty($value)) {
+ $html .= sprintf('%s
',
+ esc_attr($classes),
+ $styles ? ' style="' . esc_attr($styles) . '"' : '',
+ $this->buildDataAttributes($data),
+ $content
+ );
+
+ // Agregar script si es dismissible
+ if ($this->isDismissible($data)) {
+ $html .= $this->buildDismissScript($data);
+ }
+
+ // Agregar estilos de animación si está habilitada
+ if ($this->isAnimationEnabled($data)) {
+ $html .= $this->buildAnimationStyles($data);
+ }
+
+ return $html;
+ }
+
+ private function isEnabled(array $data): bool
+ {
+ return isset($data['visibility']['is_enabled']) &&
+ $data['visibility']['is_enabled'] === true;
+ }
+
+ private function shouldShowOnCurrentPage(array $data): bool
+ {
+ $showOn = $data['visibility']['show_on_pages'] ?? 'all';
+
+ switch ($showOn) {
+ case 'all':
+ return true;
+
+ case 'home':
+ return is_front_page();
+
+ case 'posts':
+ return is_single();
+
+ case 'pages':
+ return is_page();
+
+ case 'custom':
+ $pageIds = $data['visibility']['custom_page_ids'] ?? '';
+ $allowedIds = array_map('trim', explode(',', $pageIds));
+ return in_array((string)get_the_ID(), $allowedIds, true);
+
+ default:
+ return true;
+ }
+ }
+
+ private function isDismissed(array $data): bool
+ {
+ if (!$this->isDismissible($data)) {
+ return false;
+ }
+
+ $cookieName = 'roi_notification_bar_dismissed';
+ return isset($_COOKIE[$cookieName]) && $_COOKIE[$cookieName] === '1';
+ }
+
+ private function isDismissible(array $data): bool
+ {
+ return isset($data['visibility']['is_dismissible']) &&
+ $data['visibility']['is_dismissible'] === true;
+ }
+
+ private function isAnimationEnabled(array $data): bool
+ {
+ return isset($data['styles']['animation_enabled']) &&
+ $data['styles']['animation_enabled'] === true;
+ }
+
+ private function buildClasses(array $data): string
+ {
+ $classes = ['top-notification-bar'];
+
+ // Ocultar en móvil si está configurado
+ if (isset($data['visibility']['hide_on_mobile']) && $data['visibility']['hide_on_mobile']) {
+ $classes[] = 'd-none';
+ $classes[] = 'd-md-block';
+ }
+
+ // Agregar clase de animación
+ if ($this->isAnimationEnabled($data)) {
+ $animationType = $data['styles']['animation_type'] ?? 'slide-down';
+ $classes[] = 'roi-animated';
+ $classes[] = 'roi-' . $animationType;
+ }
+
+ return implode(' ', $classes);
+ }
+
+ private function buildInlineStyles(array $data): string
+ {
+ $styles = [];
+
+ // Color de fondo
+ if (!empty($data['styles']['background_color'])) {
+ $styles[] = 'background-color: ' . $data['styles']['background_color'];
+ }
+
+ // Color de texto
+ if (!empty($data['styles']['text_color'])) {
+ $styles[] = 'color: ' . $data['styles']['text_color'];
+ }
+
+ // Tamaño de fuente
+ $fontSize = $data['styles']['font_size'] ?? 'small';
+ $fontSizes = [
+ 'extra-small' => '0.75rem',
+ 'small' => '0.875rem',
+ 'normal' => '1rem',
+ 'large' => '1.125rem'
+ ];
+ if (isset($fontSizes[$fontSize])) {
+ $styles[] = 'font-size: ' . $fontSizes[$fontSize];
+ }
+
+ // Padding vertical
+ $padding = $data['styles']['padding_vertical'] ?? 'normal';
+ $paddings = [
+ 'compact' => '0.5rem 0',
+ 'normal' => '0.75rem 0',
+ 'spacious' => '1rem 0'
+ ];
+ if (isset($paddings[$padding])) {
+ $styles[] = 'padding: ' . $paddings[$padding];
+ }
+
+ return implode('; ', $styles);
+ }
+
+ private function buildContent(array $data): string
+ {
+ $alignment = $data['styles']['text_alignment'] ?? 'center';
+ $alignmentClasses = [
+ 'left' => 'justify-content-start',
+ 'center' => 'justify-content-center',
+ 'right' => 'justify-content-end'
+ ];
+ $alignmentClass = $alignmentClasses[$alignment] ?? 'justify-content-center';
+
+ $html = '';
+ $html .= sprintf('
';
+
+ return $html;
+ }
+
+ private function buildIcon(array $data): string
+ {
+ $iconType = $data['content']['icon_type'] ?? 'bootstrap';
+
+ switch ($iconType) {
+ case 'bootstrap':
+ $iconClass = $data['content']['bootstrap_icon'] ?? 'bi-megaphone-fill';
+ // Asegurar que tenga el prefijo 'bi'
+ if (strpos($iconClass, 'bi-') !== 0) {
+ $iconClass = 'bi-' . $iconClass;
+ }
+ return sprintf('', esc_attr($iconClass));
+
+ case 'custom':
+ $iconUrl = $data['content']['custom_icon_url'] ?? '';
+ if (!empty($iconUrl)) {
+ return sprintf(
+ '', esc_attr($alignmentClass));
+
+ // Ícono
+ $html .= $this->buildIcon($data);
+
+ // Texto del anuncio
+ $html .= $this->buildAnnouncementText($data);
+
+ // Enlace
+ $html .= $this->buildLink($data);
+
+ // Botón de cerrar (si es dismissible)
+ if ($this->isDismissible($data)) {
+ $html .= $this->buildDismissButton();
+ }
+
+ $html .= '
';
+ $html .= '