getData();
if (!$this->isEnabled($data)) {
return '';
}
if (!$this->shouldShowOnCurrentPage($data)) {
return '';
}
$css = $this->generateCSS($data);
$html = $this->buildHTML($data);
$script = $this->buildScript();
return sprintf("\n%s\n%s", $css, $html, $script);
}
public function supports(string $componentType): bool
{
return $componentType === 'cta-box-sidebar';
}
private function isEnabled(array $data): bool
{
return ($data['visibility']['is_enabled'] ?? false) === true;
}
private function shouldShowOnCurrentPage(array $data): bool
{
$showOn = $data['visibility']['show_on_pages'] ?? 'posts';
switch ($showOn) {
case 'all':
return true;
case 'posts':
return is_single();
case 'pages':
return is_page();
default:
return true;
}
}
private function generateCSS(array $data): string
{
$colors = $data['colors'] ?? [];
$spacing = $data['spacing'] ?? [];
$typography = $data['typography'] ?? [];
$effects = $data['visual_effects'] ?? [];
$behavior = $data['behavior'] ?? [];
$visibility = $data['visibility'] ?? [];
$cssRules = [];
$transitionDuration = $effects['transition_duration'] ?? '0.3s';
// Container styles - Match template exactly (height: 250px, flexbox centering)
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar', [
'background' => $colors['background_color'] ?? '#FF8600',
'border-radius' => $effects['border_radius'] ?? '8px',
'padding' => $spacing['container_padding'] ?? '24px',
'text-align' => $behavior['text_align'] ?? 'center',
'box-shadow' => $effects['box_shadow'] ?? '0 4px 12px rgba(255, 133, 0, 0.2)',
'margin-top' => '0',
'margin-bottom' => '15px',
'height' => '250px',
'display' => 'flex',
'flex-direction' => 'column',
'justify-content' => 'center',
]);
// Title styles
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar .cta-box-title', [
'color' => $colors['title_color'] ?? '#ffffff',
'font-weight' => $typography['title_font_weight'] ?? '700',
'font-size' => $typography['title_font_size'] ?? '1.25rem',
'margin-bottom' => $spacing['title_margin_bottom'] ?? '1rem',
'margin-top' => '0',
]);
// Description styles
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar .cta-box-text', [
'color' => $colors['description_color'] ?? 'rgba(255, 255, 255, 0.95)',
'font-size' => $typography['description_font_size'] ?? '0.9rem',
'margin-bottom' => $spacing['description_margin_bottom'] ?? '1rem',
]);
// Button styles
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar .btn-cta-box', [
'background-color' => $colors['button_background_color'] ?? '#ffffff',
'color' => $colors['button_text_color'] ?? '#FF8600',
'font-weight' => $typography['button_font_weight'] ?? '700',
'font-size' => $typography['button_font_size'] ?? '1rem',
'border' => 'none',
'padding' => $spacing['button_padding'] ?? '0.75rem 1.5rem',
'border-radius' => $effects['button_border_radius'] ?? '8px',
'transition' => "all {$transitionDuration} ease",
'cursor' => 'pointer',
'display' => 'inline-flex',
'align-items' => 'center',
'justify-content' => 'center',
'width' => '100%',
]);
// Button hover styles (template uses --color-navy-primary = #1e3a5f)
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar .btn-cta-box:hover', [
'background-color' => $colors['button_hover_background'] ?? '#1e3a5f',
'color' => $colors['button_hover_text_color'] ?? '#ffffff',
]);
// Button icon spacing
$cssRules[] = $this->cssGenerator->generate('.cta-box-sidebar .btn-cta-box i', [
'margin-right' => $spacing['icon_margin_right'] ?? '0.5rem',
]);
// Responsive visibility
$showOnDesktop = $visibility['show_on_desktop'] ?? true;
$showOnMobile = $visibility['show_on_mobile'] ?? false;
if (!$showOnMobile) {
$cssRules[] = "@media (max-width: 991.98px) {
.cta-box-sidebar { display: none !important; }
}";
}
if (!$showOnDesktop) {
$cssRules[] = "@media (min-width: 992px) {
.cta-box-sidebar { display: none !important; }
}";
}
return implode("\n", $cssRules);
}
private function buildHTML(array $data): string
{
$content = $data['content'] ?? [];
$title = $content['title'] ?? '¿Listo para potenciar tus proyectos?';
$description = $content['description'] ?? 'Accede a nuestra biblioteca completa de APUs y herramientas profesionales.';
$buttonText = $content['button_text'] ?? 'Solicitar Demo';
$buttonIcon = $content['button_icon'] ?? 'bi bi-calendar-check';
$buttonAction = $content['button_action'] ?? 'modal';
$buttonLink = $content['button_link'] ?? '#contactModal';
// Build button attributes based on action type
$buttonAttributes = $this->getButtonAttributes($buttonAction, $buttonLink);
$html = '';
return $html;
}
private function getButtonAttributes(string $action, string $link): string
{
switch ($action) {
case 'modal':
// Extract modal ID from link (e.g., #contactModal -> contactModal)
$modalId = ltrim($link, '#');
return sprintf(
'type="button" data-bs-toggle="modal" data-bs-target="#%s"',
esc_attr($modalId)
);
case 'link':
return sprintf(
'type="button" data-cta-action="link" data-cta-href="%s"',
esc_url($link)
);
case 'scroll':
$targetId = ltrim($link, '#');
return sprintf(
'type="button" data-cta-action="scroll" data-cta-target="%s"',
esc_attr($targetId)
);
default:
return 'type="button"';
}
}
private function getVisibilityClasses(bool $desktop, bool $mobile): ?string
{
if (!$desktop && !$mobile) {
return null;
}
if (!$desktop && $mobile) {
return 'd-lg-none';
}
if ($desktop && !$mobile) {
return 'd-none d-lg-block';
}
return '';
}
private function buildScript(): string
{
return <<
document.addEventListener('DOMContentLoaded', function() {
var ctaButtons = document.querySelectorAll('.btn-cta-box[data-cta-action]');
ctaButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
var action = this.getAttribute('data-cta-action');
if (action === 'link') {
var href = this.getAttribute('data-cta-href');
if (href) window.location.href = href;
} else if (action === 'scroll') {
var target = this.getAttribute('data-cta-target');
var el = document.getElementById(target);
if (el) el.scrollIntoView({behavior: 'smooth'});
}
});
});
});
JS;
}
}