Requiere:
- Charitable Pro 1.8.17+
DonationExpress abre tus formularios de donación en una hoja de pantalla completa e independiente del tema cuando alguien visita desde un teléfono. En lugar de renderizar el formulario dentro de tu tema (donde un estilo de tema erróneo puede empujar un campo fuera del borde, encoger un botón o romper el área de pago en una pantalla pequeña), DonationExpress renderiza el formulario de donación real de la campaña en su propio diseño limpio al que tu tema no puede acceder. El resultado es un formulario que se ve igual en todos los teléfonos, carga rápido y evita conflictos de temas.
La idea clave no es “hacer que el formulario sea responsive”. Los formularios de Charitable ya son responsive. El problema que resuelve DonationExpress es que las CSS del tema interfieren con el formulario y el modal en móviles. DonationExpress lo soluciona renderizando el formulario real (campos reales, importes reales, pasarelas reales) en un documento separado que el tema físicamente no puede estilizar.
DonationExpress es actualmente una función Beta y está desactivada por defecto. La activas por sitio en la configuración de tu formulario de donación.
Cuándo usarlo
- Tu tema o constructor de páginas estiliza el formulario o modal de donación de una manera que se ve rota en los teléfonos.
- Quieres una experiencia de donación consistente en todos los dispositivos, independientemente del teléfono del visitante o de tu tema activo.
- Quieres que el formulario móvil cargue rápido, sin que los scripts y estilos de tu tema se carguen junto a él.
- Aceptas donaciones desde redes sociales, correo electrónico o anuncios donde la mayoría del tráfico está en móviles y las primeras impresiones importan.
Cómo encontrarlo
Administrador de WordPress > Charitable > Ajustes > General > Formulario de donación
Desplázate hasta la configuración de DonationExpress. Hay tres:
- DonationExpress – activa la función y elige qué disparadores de donación la utilizan.
- Estilo de esquina de DonationExpress – la forma de la esquina para botones y campos de entrada en la hoja.
- Recibo de DonationExpress – lo que muestra la hoja después de una donación exitosa.
La configuración del Estilo de esquina y Recibo están ocultas hasta que DonationExpress se establece en algo que no sea Desactivado, ya que solo la hoja las utiliza.
Activarlo
La configuración de DonationExpress tiene tres opciones:
| Opción | Lo que hace |
|---|---|
| Desactivado | DonationExpress está deshabilitado. Los formularios de donación se muestran de la forma normal en móviles. Esta es la opción por defecto. |
| Solo botones de donación modales | Solo los botones de donación que abren una ventana emergente o modal utilizan la hoja. Los formularios incrustados directamente en una página se dejan como están. |
| Todos los formularios de donación | Cada botón de donación, enlace y formulario incrustado en un móvil utiliza la hoja. |
Elige Solo botones de donación modales si ya te gusta cómo se ven tus formularios incrustados en móviles y solo quieres arreglar la experiencia de la ventana emergente. Elige Todos los formularios de donación si quieres que cada donación móvil, sin importar cómo se active, pase por la hoja limpia.
DonationExpress solo se activa en pantallas de ancho móvil. En tablets y ordenadores de escritorio, tus formularios se muestran exactamente como lo hacen hoy. El umbral de ancho es de 768 píxeles por defecto y es ajustable por un desarrollador (consulta la referencia para desarrolladores a continuación).
Estilizando la hoja
DonationExpress no lee nada de tu tema, así que construye su apariencia a partir de tus ajustes existentes de Charitable en su lugar:
- El color de acento proviene del color de resaltado de tu formulario de donación (Charitable > Ajustes > General > Formulario de donación). Los botones y los estados seleccionados en la hoja lo utilizan.
- El logo proviene de tu logo de correo electrónico (Charitable > Ajustes > Correos electrónicos). Si hay uno configurado, aparece en la parte superior de la hoja.
- El estilo de esquina proviene del ajuste Estilo de esquina de DonationExpress.
El ajuste Estilo de esquina controla cuán redondeados son los botones y los campos de entrada:
| Estilo de esquina | Apariencia |
|---|---|
| Afilado | Esquinas cuadradas (radio 0). |
| Redondeado | Esquinas ligeramente redondeadas. Este es el valor predeterminado. |
| Cápsula | Botones y campos de entrada completamente redondeados, con forma de cápsula. |
El recibo
Después de que una donación se completa, DonationExpress puede mostrar una de tres cosas. Configura esto con la opción Recibo de DonationExpress (añadida en Charitable Pro 1.8.17.1):
| Estilo del recibo | Lo que ve el donante |
|---|---|
| Celebración (limpio, minimalista) | Una pantalla de agradecimiento limpia con una marca de verificación y una animación de confeti, además de un botón para Compartir, un botón opcional para Hacerlo mensual, un botón opcional para Descargar recibo PDF y un botón para Cerrar. Este es el valor predeterminado. |
| Detallado (limpio, desglose por artículo) | La misma pantalla de celebración limpia más una tabla de desglose por artículo (cada línea de campaña y el total), para los donantes que desean ver exactamente lo que dieron. |
| Página de recibo estándar | La hoja se cierra y el donante llega a tu página de recibo normal y temática, exactamente como lo haría sin DonationExpress. |
Los recibos de Celebración y Detallado permanecen dentro de la hoja, por lo que el donante nunca abandona la experiencia limpia. Algunos botones en esos recibos solo aparecen cuando la función correspondiente está disponible:
- Compartir utiliza la hoja de compartir nativa del teléfono, por lo que los donantes pueden publicar en redes sociales o enviar un mensaje con un solo toque.
- Hacerlo mensual aparece solo cuando el complemento de Donaciones recurrentes está activo y el regalo fue una donación única. Reabre la hoja configurada para un regalo mensual.
- Descargar recibo PDF aparece solo cuando el complemento de Recibos PDF está activo.
Previsualizarlo sin un teléfono
No necesitas coger un teléfono para ver la hoja. Como administrador, abre esta URL en tu navegador (reemplaza NN con un ID de campaña):
https://yoursite.com/wp-admin/?charitable_action=preview-mobile-form&campaign_id=NNRenderiza el mismo documento de donación sin tema que DonationExpress muestra en un teléfono, para que puedas comprobar tus colores, logo y estilo de esquina en una pantalla de tamaño completo.
Consejos
- DonationExpress renderiza el formulario real de la campaña, por lo que los campos, importes sugeridos y pasarelas que hayas configurado se muestran automáticamente. No hay nada que reconstruir.
- Si utilizas un plugin de caché u optimización, asegúrate de que la ruta
/charitable-give/esté excluida de la caché. La hoja necesita tokens de seguridad actualizados en cada carga, lo mismo que tus páginas normales de donación y recibo. - Apple Pay y Google Pay funcionan dentro de la hoja. Apple Pay todavía requiere que tu dominio esté verificado con tu pasarela de pago, lo mismo que hace para el formulario normal.
- La función está en Beta y desactivada por defecto, por lo que los sitios existentes nunca se modifican hasta que optas por ella.
Referencia del desarrollador
DonationExpress renderiza el formulario de donación real de la campaña dentro de un documento vacío y sin tema, servido desde un endpoint dedicado, cargado en un iframe por una superposición a pantalla completa en la página principal. Un pequeño puente postMessage mantiene la página principal y el frame sincronizados a través del flujo de donación y recibo.
¿Dónde se encuentra?
| Pieza | Ubicación |
|---|---|
| Bootstrap | Charitable_Mobile (includes/mobile/class-charitable-mobile.php), iniciado en la prioridad init 9 |
| Funciones auxiliares | includes/mobile/charitable-mobile-functions.php |
| Aislamiento de configuración y activos | includes/mobile/charitable-mobile-hooks.php |
| Endpoint sin tema | Charitable_Mobile_Form_Endpoint(includes/endpoints/class-charitable-mobile-form-endpoint.php) |
| Plantillas | templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php |
| Activos | assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js |
Endpoints y URLs
El endpoint registra dos reglas de reescritura y dos variables de consulta, y se renderiza en template_redirect (prioridad 0).
| Propósito | Permalinks bonitos | Permalinks simples |
|---|---|---|
| Formulario de donación | /charitable-give/{campaign_id}/ | ?charitable_mobile_form={campaign_id} |
| Recibo en la hoja | /charitable-give/receipt/{donation_id}/ | ?charitable_mobile_receipt={donation_id} |
El documento de recibo está controlado por acceso con charitable_user_can_access_donation(); una solicitud de una donación a la que el visitante actual no puede acceder devuelve un 403.
Funciones auxiliares
| Función | Devoluciones |
|---|---|
charitable_mobile_get_mode() | El modo resuelto: off, modal, o always. |
charitable_mobile_is_enabled() | Si la hoja está habilitada o no (false cuando el modo es off). |
charitable_mobile_get_breakpoint() | El punto de interrupción móvil en píxeles (768 por defecto). |
charitable_mobile_get_form_url( $campaign_id, $args ) | La URL del formulario sin tema. $args acepta amount y period. |
charitable_mobile_get_receipt_url( $donation_id ) | La URL del recibo en la hoja sin tema. |
charitable_mobile_get_brand_tokens( $campaign_id ) | array{ accent, logo, radius } resuelto a partir de la configuración de Charitable. |
charitable_mobile_get_receipt_style( $campaign_id ) | El estilo de recibo resuelto: confetti, detailed, o redirect. |
Filtros
| Filtro | Predeterminado | Propósito |
|---|---|---|
charitable_mobile_mode | Configuración guardada | Forzar el modo en el código, por ejemplo por página o por campaña. Devuelve off, modal, o always. |
charitable_mobile_is_enabled | Derivado del modo | Puerta final de encendido/apagado. Devuelve false para deshabilitar la hoja independientemente del modo. |
charitable_mobile_form_breakpoint | 768 | El punto de interrupción de ancho máximo, en píxeles, que cuenta como móvil. |
charitable_mobile_brand_tokens | Tokens resueltos | Anular el accent, logo, y radius utilizados para dar estilo a la hoja. |
charitable_mobile_asset_is_allowed | true para activos de Charitable y de pasarela | Incluir en lista blanca o excluir un identificador de estilo o script específico en el documento base. |
charitable_mobile_receipt_style | Configuración guardada | Variar el estilo del recibo por campaña. Devuelve confetti, detailed, o redirect. |
charitable_mobile_receipt_pdf_url | URL de recibos en PDF o '' | Anula la URL del botón PDF o devuelve '' para ocultarlo. |
charitable_mobile_receipt_monthly_url | URL del formulario mensual o '' | Anula la URL de "Hacerlo mensual" o devuelve ''para ocultarla. |
charitable_mobile_receipt_check_icon | Marcado de icono de verificación predeterminado | Intercambia el icono de éxito que se muestra en el recibo. |
Acciones
| Acción | Dispara |
|---|---|
charitable_mobile_form_head | En el <head> del documento base, donde se imprimen los activos de encabezado de Charitable y de la pasarela. |
charitable_mobile_form_footer | Antes del </body> de cierre del documento base, donde se imprimen los scripts del pie de página. |
Vista previa de administrador
?charitable_action=preview-mobile-form&campaign_id=NN redirige a un administrador (manage_options) a la URL del formulario sin tema de una campaña, para que la hoja se pueda revisar en cualquier tamaño de pantalla.
Ejemplos de personalización
Forzar DonationExpress para una sola página de destino:
add_filter(
'charitable_mobile_mode',
function ( $mode ) {
if ( is_page( 'give-now' ) ) {
return 'always';
}
return $mode;
}
);Aumenta el punto de interrupción para que las tabletas pequeñas también usen la hoja:
add_filter( 'charitable_mobile_form_breakpoint', fn() => 900 );Anula el color de acento y el radio de las esquinas de la hoja:
add_filter(
'charitable_mobile_brand_tokens',
function ( $tokens, $campaign_id ) {
$tokens['accent'] = '#1e88e5';
$tokens['radius'] = '4px';
return $tokens;
},
10,
2
);Muestra el recibo detallado para una campaña, celebración en todas partes:
add_filter(
'charitable_mobile_receipt_style',
function ( $style, $campaign_id ) {
return 1234 === (int) $campaign_id ? 'detailed' : $style;
},
10,
2
);Permite un script adicional en el documento sin tema (por ejemplo, un cargador de fuentes personalizado):
add_filter(
'charitable_mobile_asset_is_allowed',
function ( $allowed, $handle ) {
if ( 'my-font-loader' === $handle ) {
return true;
}
return $allowed;
},
10,
2
);Relacionado
- Personalización del CSS del formulario de donación – estilo del formulario de donación estándar, dentro del tema
- Recibos PDF – potencia el botón Descargar recibo PDF en la hoja
- Donaciones recurrentes – potencia el botón "Hacerlo mensual" en la hoja
