Esta guía es una referencia técnica para desarrolladores que trabajan con la integración Divi de Charitable. La integración Divi se introdujo en Charitable Pro 1.8.12.
Visión general
Esta guía es una referencia para usar y extender la integración Divi de Charitable. La integración Divi se introdujo en Charitable Pro 1.8.12 y se reconstruyó con módulos nativos de Divi 5 en la serie 1.8.16.
Charitable añade su propia categoría de módulos al Divi Builder para que puedas colocar campañas, formularios de donación, botones de donación y varios widgets de recaudación de fondos directamente en un diseño de Divi, con controles de diseño completos de Divi y vista previa en vivo en el Visual Builder.
Arquitectura
La integración incluye dos conjuntos paralelos de módulos:
- Módulos nativos de Divi 5 (
includes/divi/d5-modules/) implementan laDependencyInterfacede Divi 5 y se registran a través deModuleRegistration. Se renderizan y previsualizan en vivo de forma nativa dentro del lienzo del Visual Builder de Divi 5, sin la etiqueta "Legacy". - Módulos legacy de Divi 4 (
includes/divi/modules/) extiendenET_Builder_Module. Se utilizan en sitios Divi 4 y permanecen disponibles en Divi 5 para compatibilidad retroactiva.
En un sitio Divi 5, Charitable registra los módulos nativos de Divi 5 y omite el registro de los módulos legacy, por lo que cada módulo aparece solo una vez en el selector. En un sitio Divi 4, se utilizan los módulos legacy. Los diseños guardados con módulos Divi 4 se migran automáticamente al módulo nativo de Divi 5 correspondiente sin ninguna alteración visual.
Compatibilidad Divi 4 vs Divi 5
Charitable soporta tanto Divi 4.x como Divi 5.x.
| Divi 4 | Divi 5 | |
|---|---|---|
| API de Módulos | ET_Builder_Module (obsoleto) | DependencyInterface / ModuleRegistration (nativo) |
| Módulos disponibles | Los 4 originales | Los 9 |
| Vista previa del Visual Builder | Estándar | En vivo, a través de la API de Estilos React de Divi |
| Diseños guardados de Divi 4 | Se renderizan tal cual | Migran automáticamente a módulos nativos de Divi 5 |
Importante: los cuatro módulos originales (Botón de Donación, Formulario de Donación, Campaña, Campañas) están disponibles tanto en Divi 4 como en Divi 5. Los cinco módulos adicionales (Showcase de Campaña, Feed de Donaciones, Cuenta Atrás de Campaña, Mini Widget de Donación, Tabla de Clasificación de Donantes) son módulos nativos solo para Divi 5. En un sitio Divi 4, utiliza el bloque Gutenberg o el shortcode correspondiente en su lugar.
Módulos Disponibles
Abre el Divi Builder y busca la categoría de módulos Charitable. Los siguientes módulos están disponibles.
Módulos principales (Divi 4 y Divi 5)
Botón de Donación Charitable Un botón o enlace de texto para una campaña específica. Las opciones incluyen la campaña, la etiqueta del botón, el tipo de visualización (botón o enlace), la alineación y la apertura en una nueva pestaña, además del conjunto completo de controles de diseño de Divi.
Formulario de Donación Charitable Un formulario de donación incrustado para una campaña. Elige la campaña y el tipo de formulario (Completo o Mínimo), luego personaliza el contenido, los botones de cantidad, el botón de donación, los acentos y la tipografía con los controles de diseño de Divi.
Campaña Benéfica Una única campaña con su título, descripción, progreso de recaudación de fondos y acción de donar. Selecciona la campaña y estiliza cada elemento a través de Divi.
Campañas Benéficas Una cuadrícula o lista de múltiples campañas. Los controles cubren cuántas campañas mostrar, ordenación, filtrado por categoría y creador, columnas y estilo por tarjeta.
Módulos adicionales (solo Divi 5)
Showcase de Campañas Benéficas Un showcase de campañas navegable con controles de navegación integrados (filtrado AJAX y búsqueda), opciones de visualización y un bucle de consulta configurable. Útil cuando quieres que los visitantes exploren muchas campañas en una sola página. Grupos de configuración: Bucle, Visualización, Controles de Navegación.
Feed de Donaciones Benéficas Un feed en vivo de donaciones recientes en un diseño de lista o tarjeta, con controles de bucle de consulta, opciones de visualización, configuraciones de comportamiento (como paginación y sondeo en vivo), y controles de tipografía y color. Genial para prueba social. Grupos de configuración: Bucle, Visualización, Comportamiento, Tipografía y Colores.
Cuenta Atrás de Campaña Benéfica Un temporizador de cuenta atrás para la fecha de finalización de una campaña, mostrado en días, horas, minutos y segundos. Elige qué unidades de tiempo mostrar, establece el contenido y los colores, y activa un efecto de celebración de fecha de finalización. Grupos de configuración: Contenido, Unidades de Tiempo, Colores de Cuenta Atrás, Comportamiento.
Widget de Mini Donación Benéfica Un widget de donación compacto que puedes colocar en cualquier lugar. Establece preajustes de cantidad única y opcional mensual con un valor predeterminado, personaliza el botón de llamada a la acción y estiliza la apariencia del widget y el contenedor, incluyendo el color de fondo y el borde. Al enviar, puede redirigir a la página de donación o abrir un modal. Grupos de configuración: Contenido, Preajustes de Cantidad, Llamada a la Acción, Apariencia del Widget, Contenedor, Tipografía.
Tabla de Clasificación de Donantes Benéficos Una tabla de clasificación de los principales donantes. Configura la cabecera, el bucle de consulta y el alcance (por campaña o en todo el sitio), quién está incluido, el diseño de tarjeta o fila, los colores del podio y las opciones de visualización. Grupos de configuración: Cabecera, Bucle / Alcance, Inclusión, Tarjetas / Filas, Colores del Podio, Visualización.
Los cinco módulos de Divi 5 reutilizan los mismos renderizadores del lado del servidor que sus bloques de Gutenberg correspondientes, por lo que la salida es idéntica tanto si construyes con Divi como con el editor de bloques.
Desactivar la Integración
Para desactivar completamente la integración de Divi, añade esta constante a wp-config.php:
define( ‘CHARITABLE_DISABLE_DIVI_INTEGRATION’, true );
Esto evita que la integración se cargue por completo, lo que puede ser útil para:
- Solucionar conflictos
- Sitios que no usan Divi
- Implementaciones personalizadas
Identificadores de Módulo
Nombres nativos de módulos de Divi 5 (registrados a través de ModuleRegistration):
| Módulo | Nombre del módulo Divi 5 | Respaldado por |
|---|---|---|
| Botón de Donación de Charitable | charitable/donate-button | [charitable_donate_button] |
| Formulario de Donación de Charitable | charitable/donation-form | [charitable_donation_form] |
| Campaña de Charitable | charitable/campaign | [campaign] |
| Campañas de Charitable | charitable/campaigns | [campaigns] |
| Showcase de Campañas Benéficas | charitable/divi-campaign-showcase | renderizado de bloque charitable/campaign-showcase |
| Feed de Donaciones Benéficas | charitable/divi-donations-feed | [charitable_donations_feed] / renderizado de bloque |
| Cuenta Atrás de Campaña Benéfica | charitable/divi-campaign-countdown | [charitable_campaign_countdown]/ renderizado de bloque |
| Mini Widget de Donación Benéfica | charitable/divi-mini-donation-widget | [charitable_mini_widget] / renderizado de bloque |
| Tabla de Clasificación de Donantes Benéficos | charitable/divi-donor-leaderboard | [charitable_donor_leaderboard] / renderizado de bloque |
Identificadores antiguos de módulos Divi 4 (extender ET_Builder_Module):
| Módulo | Identificador Divi 4 |
|---|---|
| Botón de Donación de Charitable | charitable_donate_button |
| Formulario de Donación de Charitable | charitable_donation_form |
| Campaña de Charitable | charitable_campaign |
| Campañas de Charitable | charitable_campaigns |
Ganchos y filtros
Acciones
Registro de Módulos
// Los módulos se registran en este hook de Divi
add_action( ‘et_builder_ready’, [ $this, ‘register_modules’ ] );
Limpieza de Caché
// La caché de opciones de campaña se limpia cuando cambian las campañas
add_action( ‘save_post_campaign’, [ $this, ‘clear_campaign_options_cache’ ] );
add_action( ‘delete_post’, [ $this, ‘clear_campaign_options_cache’ ] );
add_action( ‘wp_trash_post’, [ $this, ‘clear_campaign_options_cache’ ] );
Filtros
Categorías de Módulos
// Registro de categoría personalizado
add_filter( ‘et_builder_categories’, [ $this, ‘register_module_category’ ] );
Caché
La integración almacena en caché las opciones del desplegable de campañas para mejorar el rendimiento:
- Clave transitoria: charitable_divi_campaign_options
- Duración: 1 hora (HOUR_IN_SECONDS)
- Borrado automático: Al guardar, eliminar o mover campañas a la papelera
Para borrar la caché manualmente:
delete_transient( ‘charitable_divi_campaign_options’ );
Consideraciones del Constructor Visual
Modo de vista previa
El módulo Formulario de donación muestra un marcador de posición en el Constructor Visual en lugar del formulario real. Esto es intencionado porque:
- Los formularios requieren JavaScript que puede entrar en conflicto con el constructor
- Los envíos de formularios en modo de vista previa podrían causar problemas
- El rendimiento mejora con marcadores de posición estáticos
El formulario real se muestra correctamente en el frontend.
Atributos de datos AJAX
El shortcode de Campañas normalmente genera data-shortcode-atts para la paginación AJAX. En el contexto del Constructor Visual, esto se elimina para evitar problemas de visualización. La integración detecta el contexto del VB y añade un atributo preview=”1″ al shortcode.
Campos calculados
Cada módulo utiliza el sistema de campos calculados de Divi para vistas previas en vivo:
‘__campaign_preview’ =>
‘type’ => ‘computed’,
‘computed_callback’ => [ ‘Charitable_Divi_Campaign_Module’, ‘get_campaign_preview’ ],
‘computed_depends_on’ => [
‘campaign_id’,
],
],
Cuando un usuario cambia una configuración en el Constructor Visual, Divi llama a la función de devolución de llamada calculada a través de AJAX para actualizar la vista previa.
Selectores CSS
Clases del contenedor del módulo
| Módulo | Clase del contenedor |
|---|---|
| Campaña | .et_pb_charitable_campaign |
| Campañas | .et_pb_charitable_campaigns |
| Formulario de Donación | .et_pb_charitable_donation_form |
| Botón de Donar | .et_pb_charitable_donate_button |
Selectores de elementos comunes
/* Títulos de campañas */
.et_pb_charitable_campaign .campaign-title,
.et_pb_charitable_campaigns .campaign-title { }
/* Barras de progreso */
.campaign-progress,
.progress-bar { }
/* Botones de donación */
.donate-button,
.charitable-button { }
/* Campos del formulario */
.charitable-donation-form input[type=”text”],
.charitable-donation-form select { }
Depuración
Habilitar el modo de depuración de WordPress
// wp-config.php
define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true );
Problemas comunes
Los módulos no aparecen en el constructor:
- Verificar que el tema/plugin de Divi esté activo: function_exists( ‘et_setup_theme’ )
- Comprobar que Charitable se cargue completamente antes de que Divi se inicialice
- Buscar errores de PHP en wp-content/debug.log
El estilo no se aplica:
- Borrar la caché CSS estática de Divi: Divi → Opciones del tema → Constructor → Avanzado → Generación de archivos CSS estáticos
- Comprobar la especificidad del CSS; Divi utiliza selectores de alta especificidad
- La integración utiliza !important en el CSS de campos avanzados por este motivo
Campaña desplegable vacía:
- Asegúrate de que existen campañas con el estado "Publicado"
- Comprueba si es necesario borrar la caché transitoria
- Verifica que post_type_exists( ‘campaign’ ) devuelve true
Vista previa no se actualiza:
- Comprueba la consola del navegador en busca de errores de JavaScript
- Verifica que las solicitudes AJAX se completan (pestaña Network)
- Asegúrate de que computed_depends_on incluye el campo que se está cambiando
Métodos de Detección
La integración utiliza varios métodos para detectar Divi:
// Comprueba el plugin Divi Builder
class_exists( ‘ET_Builder_Plugin’ )
// Comprueba las funciones de Divi
function_exists( ‘et_setup_theme’ )
function_exists( ‘et_builder_should_load_all_module_data’ )
// Comprueba el tema Divi/Extra
in_array( get_template(), [ ‘Divi’, ‘Extra’ ] )
Detección del Constructor Visual
// Constructor Visual Front-end
isset( $_GET[‘et_fb’] )
// Constructor Back-end
isset( $_GET[‘et_pb_preview’] )
// Contexto AJAX (para renderizado de vista previa)
defined( ‘DOING_AJAX’ ) && DOING_AJAX
Ampliando la Integración
Añadir Campos Personalizados a un Módulo
Para añadir campos a un módulo existente a través de un tema hijo o un plugin, necesitarías extender la clase del módulo:
class My_Custom_Campaign_Module extends Charitable_Divi_Campaign_Module {
public function get_fields() {
$fields = parent::get_fields();
// Add custom field
$fields[‘custom_field’] = [
‘label’ => ‘Mi campo personalizado’,
‘type’ => ‘text’,
‘option_category’ => ‘basic_option’,
‘toggle_slug’ => ‘main_content’,
];
return $fields;
}
}
Nota: Esto requiere volver a registrar el módulo, lo que constituye una personalización avanzada.
Icono de categoría de módulo personalizado
El icono de categoría de Charitable se establece mediante inyección CSS en lugar de la propiedad de icono de Divi (que no admite SVG personalizados para categorías):
li.charitable.et_pb_folder::before {
content: ” !important;
background-image: url(‘ruta/al/icono.svg’) !important;
background-size: contain !important;
}
Historial de versiones
- Serie 1.8.16: Se reconstruyó la integración con los módulos nativos de Divi 5. Los módulos Botón de donación, Formulario de donación, Campaña y Campañas se convirtieron en módulos nativos de Divi 5 (ya no tienen la etiqueta “Antiguo”), con controles de diseño completos de Divi 5, selección de campañas, tipos de formulario Completo/Mínimo y migración automática de los códigos cortos de Divi 4 guardados. Se añadieron cinco módulos solo para Divi 5: Showcase de campañas, Feed de donaciones, Cuenta atrás de campañas, Widget de donación mini y Tabla de clasificación de donantes. El lienzo del Visual Builder ahora previsualiza en vivo cada control de diseño de Divi a través de la API de estilos React de Divi.
- 1.8.12: Se introdujo la integración con el Page Builder de Divi con módulos nativos de Charitable para campañas, formularios de donación y botones (API de módulo antiguo de Divi 4).
Soporte
Para problemas específicos de la integración con Divi:
- Consulta esta documentación para conocer soluciones conocidas
- Habilita WP_DEBUG y comprueba si hay errores
- Prueba con una disposición predeterminada de Divi para descartar conflictos de temas
- Contacta con el soporte de Charitable con información de depuración
