WooCommerce: Maxlength y Minlength para campos de pago

Si está familiarizado con HTML, puede agregar los atributos » longitud máxima » y » longitud mínima » a un campo de entrada para obligar a que su valor tenga una longitud mínima de X y máxima de Y caracteres. Todo esto es bueno y fácil, por lo que también podríamos ver qué sucede en la página de pago de WooCommerce una vez que aplicamos dichos atributos a un campo personalizado determinado.

Alerta de spoiler: maxlength funciona, mientras que minlength no. Por lo tanto, obligar a un campo de pago dado a tener una longitud mínima es bastante imposible, a menos que validemos los datos publicados (un valor de entrada de campo que no es lo suficientemente largo) una vez que se envía el pago. Eso es un fastidio, y en este artículo también explicaré cómo contactar a WooCommerce para que puedan mejorar una funcionalidad/arreglar un error.

¡Disfrutar!

Esto es lo que sucede en la página de pago de WooCommerce después de aplicar el «Fragmento 1» a continuación: el campo de entrada de la empresa tiene una longitud máxima de 15 caracteres y es imposible ingresar más que eso.

Fragmento de PHP 1: establecer el campo de pago «Maxlength»

En el siguiente ejemplo, estoy obligando al campo «Nombre de la empresa» a tener un máximo de 15 caracteres.

Una vez en la página de pago, verá que no puede ingresar físicamente más de 15 caracteres dentro de ese campo. Puede ver el resultado en la captura de pantalla anterior.

/**
 * @snippet       Maxlength @ WooCommerce Checkout Field
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_fields_custom_attributes', 9999 );
 
function bbloomer_checkout_fields_custom_attributes( $fields ) {
   $fields['billing']['billing_company']['maxlength'] = 15;
   return $fields;
}

Fragmento de PHP 2: establecer el campo de pago «Longitud mínima»

Aquí viene la otra cara de la medalla. No es posible forzar una longitud mínima en un campo de pago. Aquí están todas las cosas que probé (y fallé descaradamente), usando exactamente el mismo PHP del Snippet 1 anterior.

Este primer intento no funciona en absoluto:

/**
 * @snippet       NOT WORKING: Minlength @ WooCommerce Checkout Field
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_fields_custom_attributes', 9999 );
 
function bbloomer_checkout_fields_custom_attributes( $fields ) {
   $fields['billing']['billing_company']['minlength'] = 15;
   return $fields;
}

Este segundo intento agrega correctamente el atributo «minlength» a la entrada del campo de la empresa, pero no sucede nada al final de la validación, es decir, puede enviar el pago y no se devolverá ningún error:

/**
 * @snippet       NOT WORKING: Minlength @ WooCommerce Checkout Field
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_fields_custom_attributes', 9999 );
 
function bbloomer_checkout_fields_custom_attributes( $fields ) {
   $fields['billing']['billing_company']['custom_attributes']['minlength'] = 15;
   return $fields;
}

Básicamente, el campo no validará minlength incluso si el atributo minlength está allí:

A pesar de que el campo de la empresa tiene un atributo de longitud mínima, el proceso de pago no se detendrá al enviar

El tercer intento es otra solución dado que minlength no funciona. Traté de agregar un atributo de » patrón » en su lugar, que logra lo mismo (mínimo 15 caracteres):

/**
 * @snippet       NOT WORKING: Minlength @ WooCommerce Checkout Field
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_checkout_fields', 'bbloomer_checkout_fields_custom_attributes', 9999 );
 
function bbloomer_checkout_fields_custom_attributes( $fields ) {
   $fields['billing']['billing_company']['custom_attributes']['pattern'] = '.{15,}';
   return $fields;
}

Bueno, nada funciona y el pago aún se envía a pesar de que hay un error de entrada de campo. Entonces, no importa lo que hagamos, incluso si configuramos el atributo minlength , WooCommerce no está validando el valor de entrada del campo de pago . La única opción que tenemos es detener el proceso de pago a menos que una entrada de campo tenga 15 caracteres o más. Lo he logrado de esta manera:

/**
 * @snippet       WORKING: Minlength Validation @ WooCommerce Checkout Field
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_checkout_process', 'bbloomer_checkout_fields_custom_validation' );
   
function bbloomer_checkout_fields_custom_validation() {
   if ( isset( $_POST['billing_company'] ) && ! empty( $_POST['billing_company'] ) ) {
      if ( strlen( $_POST['billing_company'] ) < 15 ) {
         wc_add_notice( 'Company name requires at least 15 characters', 'error' );
      }
   }  
}

Y esto es lo que sucede una vez que ingreso el nombre de una empresa que tiene menos de 15 caracteres y envío el pago:

El proceso de pago se detiene porque el «Nombre de la empresa» no tiene suficientes caracteres (15).

Esto es excelente y funciona, pero si WooCommerce pudiera manejar minlength en su lugar, no habría ningún problema y no tendría la necesidad de encontrar una solución de validación personalizada para detener el pago.

Lástima, porque WooCommerce «lee» maxlength , así que no veo por qué no debería hacer lo mismo con minlength y pattern . Entonces, hoy, les mostraré cómo hacerle saber a WooCommerce que hay un error/mejora en la funcionalidad que vale la pena llamar la atención de los desarrolladores.

Para hacer eso, voy a https://github.com/woocommerce/woocommerce/issues y hago una búsqueda rápida para ver si alguno de los problemas abiertos contiene la palabra «minlength»:

Ahora que sé que no hay un problema duplicado, puedo crear un «nuevo problema» (botón verde), ingresar un título y una buena descripción: https://github.com/woocommerce/woocommerce/issues/27803

Al hacerlo, he solicitado una mejora y no solo me he quejado de algo que no funciona o, peor aún, no he dicho nada. Es una comunidad de código abierto y tenemos que ayudarnos unos a otros.

Puede seguir a los desarrolladores de WooCommerce abriendo, discutiendo y cerrando este «problema» en el mismo enlace.

Espero que esto ayude a alguien.

Deja un comentario