Aunque la mayoría de la gente usa Charitable para campañas de recaudación de fondos, algunos usuarios le han encontrado usos creativos. Un cliente recientemente quiso seguir usando Charitable como herramienta de donación, y al mismo tiempo usarla como una forma para que la gente se registre en su evento.
El primer paso para lograr esto es bastante fácil: simplemente crea una campaña separada para el registro del evento. Puedes configurar diferentes precios de entradas usando la función de Donaciones Sugeridas; simplemente establece un precio y una descripción.
Pero el desafío surge cuando quieres que el texto del botón del formulario sea más apropiado para el contexto. En lugar de "Donar", debería decir algo como "Comprar entradas".
En este tutorial, te mostraré cómo puedes usar un poco de código personalizado para personalizar fácilmente el texto del botón de donación por campaña.
La Solución
Para lograr esto, registraremos un nuevo campo en el editor de Campaña en el panel de WordPress. Este campo te permitirá especificar cuál debe ser el texto del botón de donación.
También crearemos versiones modificadas de las plantillas donde se muestra el botón de donación; estas se almacenarán en la carpeta de nuestro tema o tema hijo y anularán las plantillas predeterminadas incluidas en Charitable.
Paso 1: Añadir nuestra función
Si leíste mi último tutorial, este paso te resultará familiar.
Vamos a añadir una función PHP que se ejecutará cuando se llame al hook init dentro de WordPress. init es un hook que ocurre al principio mientras WordPress se está cargando, antes de que la página comience a renderizarse.
add_action( 'init', function() {
// Our code will go in here.
} );
Estamos usando una función anónima aquí, lo cual está bien siempre que estés en una versión de PHP superior a la 5.2.
Si no estás seguro de cómo añadir esto a tu sitio, consulta nuestra guía:
Paso 2: Añadir el campo al editor de Campaña
A continuación, usaremos la API de Campos de Campaña para añadir un campo de "Texto del Botón" al editor de Campaña.
add_action( 'init', function() {
/**
* Create a new field as an instance of `Charitable_Campaign_Field`.
*
* See all available arguments at:
*
* @https://github.com/Charitable/Charitable/blob/ef9a468fbdd6fa83307abe6ac0c38896f625cf45/includes/fields/class-charitable-campaign-field.php
*/
$campaign_field = new Charitable_Campaign_Field( 'button_text', array(
'label' => 'Button Text',
'data_type' => 'meta',
'admin_form' => array(
'type' => 'text',
'required' => false,
'default' => 'Donate',
),
'value_callback' => function( Charitable_Campaign $campaign, $key ) {
$text = $campaign->get_meta( '_campaign_button_text' );
// Set a default value to use when the button text is not set yet.
if ( empty( $text ) ) {
$text = 'Donate';
}
return $text;
},
) );
/**
* Now, we register our new field.
*/
charitable()->campaign_fields()->register_field( $campaign_field );
} );
En este código, primero creamos un nuevo campo creando un objeto Charitable_Campaign_Field. Pasamos dos parámetros al crear este objeto:
– Una clave – button_text
– Un array de argumentos
Solo estamos usando un subconjunto de todos los argumentos que son posibles al registrar un campo de campaña. Para ver otros argumentos disponibles, lee la documentación exhaustiva en línea en Github.
Un argumento importante incluido aquí es el parámetro value_callback:
'value_callback' => function( Charitable_Campaign $campaign, $key ) {
$text = $campaign->get_meta( '_campaign_button_text' );
// Set a default value to use when the button text is not set yet.
if ( empty( $text ) ) {
$text = 'Donate';
}
return $text;
},
Esta es una función que se utilizará para obtener el valor del campo para una campaña en particular. Lo incluimos aquí para proporcionar un valor predeterminado de "Donar" para el campo button_text; esto es necesario para las campañas existentes que no se han guardado desde que se añadió este campo de campaña.
Si vamos a añadir una nueva campaña o editar una existente, ahora veremos un panel de "Configuración Extendida", y dentro de él hay un campo de "Texto del Botón".
Paso 3: Anular la plantilla del formulario de donación
Dentro de Charitable, verás un directorio templates. Todas las plantillas de este directorio pueden ser anuladas creando una copia en la carpeta de tu tema hijo. Si no estás usando un tema hijo, también puedes anularlas creando una copia en la carpeta de tu tema, pero recomendamos el enfoque del tema hijo ya que asegura que no perderás tus cambios al actualizar tu tema en el futuro.
En primer lugar, crearemos una carpeta charitable dentro de la carpeta de nuestro tema hijo. Siempre que quieras anular una plantilla dentro del directorio templates de Charitable, debe almacenarse en la misma ubicación relativa dentro de la carpeta charitable (sin templates).
En nuestro caso, queremos anular la plantilla donation-form/form-donation.php. Así es como lo hacemos:
- En nuestro tema hijo, creamos un nuevo archivo en
charitable/donation-form/form-donation.php. - En este, pegamos el contenido del archivo
templates/donation-form/form-donation.phpen Charitable.
Si guardas este archivo y recargas tu formulario de donación, no notarás ninguna diferencia; ¡eso es porque aún no hemos cambiado nada! Así que pasemos a copiar nuestro texto de botón personalizado.
En la plantilla, busca la siguiente línea:
<button class="button button-primary" type="submit" name="donate"><?php _e( 'Donate', 'charitable' ); ?></button>
En la versión actual de Charitable (1.6.13), esta se encuentra en la línea 59, pero esto puede cambiar en el futuro. La parte que necesitamos reemplazar es esta parte central: <?php _e( 'Donate', 'charitable' ); ?>.
Nuestro texto de botón personalizado se puede obtener obteniendo el objeto de campaña del formulario con $form->get_campaign(), y luego llamando usando el get( 'button_text' ) en él:
<?php echo $form->get_campaign()->get( 'button_text' ); ?>
En conjunto, la línea actualizada se ve así:
<button class="button button-primary" type="submit" name="donate"><?php echo $form->get_campaign()->get( 'button_text' ); ?></button>
Ahora, cuando recargues el formulario de donación, mostrará el texto del botón personalizado de tu campaña.
Paso 4: Enjuagar y repetir para otras plantillas
El paso 3 arregló el formulario de donación. Pero el botón "Donar" aparece en otros casos también:
- En una lista o cuadrícula de campañas cuando usas el shortcode
[campaigns]. - En la propia página de la campaña.
Determinando las plantillas que necesitas anular
Qué plantillas necesitas anular depende de cómo hayas configurado tu formulario de donación con la opción "Opciones de visualización" en Charitable > Ajustes.
"Mostrar en una página separada"
Las dos plantillas que necesitas anular son:
templates/campaign/donate-button.phptemplates/campaign-loop/donate-link.php
Copia y pega el contenido de estos dos archivos en tu tema hijo en:
charitable/campaign/donate-button.phpcharitable/campaign-loop/donate-link.php
"Mostrar en la misma página"
Las dos plantillas que necesitas anular son:
templates/campaign/donate-link.phptemplates/campaign-loop/donate-link.php
Copia y pega el contenido de estos dos archivos en tu tema hijo en:
charitable/campaign/donate-link.phpcharitable/campaign-loop/donate-link.php
"Revelar en una ventana modal"
Las dos plantillas que necesitas anular son:
templates/campaign/donate-modal.phptemplates/campaign-loop/donate-modal.php
Copia y pega el contenido de estos dos archivos en tu tema hijo en:
charitable/campaign/donate-modal.phpcharitable/campaign-loop/donate-modal.php
Realizando los cambios
Dependiendo de la plantilla que estés sobrescribiendo, la parte que realmente necesitas cambiar es:
<?php _e( 'Donate', 'charitable' ); ?>
O:
<?php esc_attr_e( 'Donate', 'charitable' ); ?>
Para cambiar la primera variante (es decir, _e), reemplázala con esto:
<?php echo $campaign->get( 'button_text' ); ?>
Si estás cambiando la segunda variante (es decir, esc_attr_e), cámbiala por esto:
<?php echo esc_attr( $campaign->get( 'button_text' ) ); ?>
Conclusión
Ahora que has actualizado todas las plantillas, deberías ver que el texto personalizado de tu botón de campaña se utiliza dondequiera que se muestre un botón de donación. Todo lo que tuvimos que hacer para llegar hasta aquí fue crear un nuevo campo de campaña y modificar tres plantillas predeterminadas usando nuestro tema hijo.
Si has seguido el proceso, espero que puedas ver cómo la flexibilidad de la API de Campos de Campaña, este proceso se puede utilizar para hacer muchos más ajustes en cómo funciona Charitable en tu sitio web. Por ejemplo, podrías adaptar este proceso para añadir un texto específico de la campaña antes del formulario de donación; solo requiere crear un nuevo campo de campaña y añadir el valor de ese campo a la plantilla form-donation.php (es decir, pasos 2 y 3).
¿Te ha resultado útil? ¿Alguna pregunta? Me encantaría saber de ti; envíanos un correo electrónico a través de nuestra página de Soporte o deja un comentario a continuación. Si tienes alguna sugerencia sobre un tema que te gustaría que cubriera en un futuro tutorial, también nos encantaría saberlo. :)
Deja una respuesta