El Botón de donación modal (también conocido como Botón de campaña modal) te permite colocar un botón que abre un formulario de donación en una ventana emergente modal, o enlaza directamente a la página de donación de la campaña, en cualquier lugar de tu sitio. Está disponible tanto como bloque de WordPress como shortcode, y forma parte del Sistema de donación modal universal de Charitable.
Tabla de Contenidos
- Requisitos
- Empezar
- Bloque (Editor)
- Shortcode
- Cómo funciona el modal
- Selector de campaña en el modal
- Solución de problemas
- Recursos para desarrolladores
Requisitos
- Charitable Pro: Versión 1.8.13 o superior
- WordPress: Versión 6.2 o superior
- PHP: Versión 7.4 o superior
Empezar
Bloque: Edita una página o publicación en el Editor de bloques → añadir bloque → busca Botón de donación modal o Charitable → inserta el bloque → elige una campaña y configura el botón en la barra lateral.
Shortcode: Usa [charitable_modal_button campaign_id="123"] en cualquier publicación, página o widget. Reemplaza 123 con el ID de tu campaña. Puedes añadir atributos opcionales para el texto del botón y las clases CSS (ver Shortcode).
Beneficios clave
- Coloca en cualquier lugar: Botones en barras laterales, pies de página, cuadrículas de campañas (p. ej., Showcase de campañas) o contenido en línea.
- Modal o enlace: El bloque te permite elegir “Ventana emergente modal” (formulario de donación en una ventana emergente) o “Enlace a página de donación” (enlace normal). El shortcode solo es modal.
- Sin recarga de página: En modo modal, el formulario se carga a través de AJAX y se abre en una superposición; los donantes permanecen en la misma página hasta que envían o cierran.
- Control del selector de campaña: Cuando el selector de campaña está habilitado globalmente, puedes ocultarlo para un botón específico para que el modal muestre solo la campaña elegida.
Bloque (Editor)
El bloque está registrado como Botón de donación modal (charitable/modal-donate-button) bajo la categoría Widgets.
Ajustes del bloque (barra lateral)
Configuración
- Campaña – Requerido. Selecciona la campaña que utilizará este botón para las donaciones.
- Texto del botón – Etiqueta en el botón (por defecto: “Donar ahora”).
- Acción del botón
- Ventana emergente modal – Al hacer clic se abre el formulario de donación en una ventana emergente (por defecto).
- Enlace a página de donación – Al hacer clic se va a la página de donación de la campaña.
- Abrir en una nueva pestaña – Solo cuando la Acción del botón es “Enlace a página de donación”. Abre la página de donación en una nueva pestaña.
- Ocultar selector de campaña – Solo cuando la Acción del botón es “Ventana emergente modal”. Cuando está habilitado, el menú desplegable del selector de campaña está oculto en este modal, incluso si está habilitado en los ajustes de Charitable.
Colores
- Fondo – Color de fondo del botón.
- Texto – Color del texto del botón.
- Borde – Color del borde del botón.
Paso del ratón
- Fondo – Fondo del botón al pasar el ratón.
- Texto – Color del texto del botón al pasar el ratón.
Tamaño y espaciado
- Ancho del botón – p. ej.
auto,100%,200px. - Tamaño de fuente – p. ej.
16px,1.2em. - Radio del borde – p. ej.
4px,25px. - Relleno horizontal – p. ej.
24px,2em. - Relleno vertical – p. ej.
12px,1em.
Avanzado
- Clase CSS personalizada – Clase(s) adicional(es) en el elemento del botón.
- Clase CSS del modal – Solo cuando la Acción del botón es “Modal emergente”. Clase(s) adicional(es) en el contenedor del modal (la clase modal predeterminada es
charitable-universal-modal).
El editor muestra una vista previa del botón y el nombre de la campaña seleccionada. En el frontend, el bloque produce el mismo comportamiento que el shortcode (en modo modal) o un enlace con estilo (en modo enlace).
Shortcode
Nombre del shortcode: caritativo_modal_boton
Atributo requerido
campaign_id– El ID de la campaña. El botón abrirá el formulario de donación para esta campaña en un modal.
Atributos opcionales
| Atributo | Descripción | Predeterminado |
|---|---|---|
texto | Etiqueta del botón. | “Donar ahora” |
clase | Clase(s) CSS adicional(es) para el botón. | – |
modal_clase | Clase(s) CSS adicional(es) para el contenedor del modal. | – |
Ejemplos
[charitable_modal_button campaign_id="42"][charitable_modal_button campaign_id="42" text="Give to this campaign"][charitable_modal_button campaign_id="42" class="my-donate-btn" modal_class="my-modal"]Nota: El shortcode siempre abre el formulario de donación en un modal. Para enlazar a la página de donación en su lugar, use el bloque con la Acción del botón establecida en “Enlace a la página de donación”, o use el enlace/shortcode de donación estándar (p. ej. [charitable_donate_button] con el comportamiento de campaña y enlace apropiado).
Cómo funciona el modal
- Desencadenante: El botón tiene la clase
charitable-modal-triggery un atributodata-campaign-id. El script del Modal Universal escucha los clics en esta clase. - Carga: Al hacer clic, el script carga el formulario de donación a través de AJAX para la campaña dada y lo inyecta en la superposición del modal.
- Visualización: El modal se abre (utilizando la misma superposición y estructura que los modales existentes de Charitable). Los donantes pueden completar el formulario o cerrar el modal.
- Selector de Campaña: Si la función Selector de Campaña está habilitada en la configuración de Charitable y no se anula por el botón (ver más abajo), el formulario puede mostrar un menú desplegable para cambiar de campaña. Los botones individuales pueden forzar su ocultación con la opción del bloque “Ocultar Selector de Campaña” o pasando
data-hide-campaign-selectoral construir el botón en el código.
El modal utiliza el Sistema de Donación del Modal Universal (Charitable Pro 1.8.13+), por lo que funciona de manera consistente tanto si el botón proviene del bloque, del shortcode, como de otras funciones (por ejemplo, botones de donación rápida en el bloque Showcase de Campañas).
Selector de campaña en el modal
- Configuración global: Configuración de Charitable → General → Formulario de Donación → Selector de Campaña. Cuando está habilitado, los formularios de donación pueden mostrar un menú desplegable “Elegir una Campaña”.
- Anulación por botón (solo bloque): En el bloque Botón de Donación Modal, cuando la Acción del Botón es “Ventana Modal”, habilita Ocultar Selector de Campaña para ocultar ese menú desplegable para el modal de este botón. Útil cuando el botón es para una sola campaña y no deseas el selector en la ventana emergente.
- Shortcode: El shortcode no expone un atributo “ocultar selector de campaña”. Para ocultarlo para un botón de shortcode, necesitarías agregar una clase CSS personalizada y usar JavaScript para establecer
data-hide-campaign-selectoren el desencadenante, o usar el filtrocharitable_modal_donate_button_htmlpara agregar el atributo de datos.
Solución de problemas
El botón no hace nada al hacer clic
- Confirma que el ID de la campaña es válido y que la campaña está publicada.
- Asegúrate de que el script del Modal Universal se cargue (sin errores de script ni eliminación agresiva de scripts de Charitable en esa página).
- Comprueba la consola del navegador en busca de errores de JavaScript al hacer clic en el botón.
El modal no se abre o el formulario no se carga
- Verifica que estás en Charitable Pro 1.8.13+ y que ningún plugin/tema está bloqueando
charitable-universal-modalo la solicitud AJAX que carga el formulario. - Prueba con un tema predeterminado y con otros plugins desactivados para descartar conflictos.
- Asegúrate de que la campaña pueda recibir donaciones (por ejemplo, que no haya finalizado, que no esté completamente financiada si eso bloquea las donaciones).
El botón se ve mal o falta el estilo
- Utiliza las opciones de Colores, Tamaño y Espaciado y Avanzado (clase personalizada) del bloque para ajustar la apariencia.
- Para el shortcode, a
tilde;ade una
clasey aplica estilo a esa clase en tu tema o CSS personalizado. El disparador usa la clasecharitable-modal-triggeradem ails de las clases que pases.
“Enlace a la P ailina de Donaci
- Esa opci
Recursos para desarrolladores
PHP
- Funci
- Ayudante de eco:
charitable_modal_donate_button( $campaign_id, $args )– Muestra el mismo HTML.
Argumentos para charitable_get_modal_donate_button:
| Clave | Tipo | Predeterminado | Descripción |
|---|---|---|---|
texto | cadena | “Donar ahora” | Etiqueta del botón. |
clase | cadena | disparador_modal_caritativo | Clase(s) CSS para el bot |
modal_clase | cadena | modal_universal_caritativo | Clase CSS para el contenedor del modal. |
etiqueta_boton | cadena | para ver cómo está quedando tu campaña. | button o a. |
estilo | cadena | '' | Cadena de estilo en l |
ocultar_selector_campana | booleano | false | Cuando es verdadero, a
tilde;ade data-hide-campaign-selector="1" para que el modal oculte el selector de campa
tilde;a. |
Filtros
- charitablemodaldonatebuttonshortcode_output – Filtra la salida del shortcode. Par
- charitablemodaldonatebuttonhtml – Filtra el HTML del bot
CSS / HTML
- Bot
- Contenedor del bloque:
.wp-block-charitable-modal-donate-button. - Modal: La superposici
Historial de versiones
| Versi | Cambios |
|---|---|
| 1.8.13 | Bloque y shortcode de Bot |
Para la configuraci
