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!
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í:
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:
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 una respuesta