En el ámbito del comercio electrónico, proporcionar una experiencia de usuario fluida y eficiente es clave. Una forma de lograrlo en WooCommerce es automatizar la adición de prefijos de códigos de país a los números de teléfono. A continuación, presentamos cómo implementar esta funcionalidad usando PHP y JavaScript en WordPress.
Paso 1: Insertar JavaScript en WordPress
Primero, usamos el gancho wp_footer de WordPress para añadir un script JavaScript que escuchará los cambios en el formulario de checkout.
// Añadir un script al pie de página de WordPress
add_action( 'wp_footer', 'js_prefix_phone_callback' );
function js_prefix_phone_callback(){
?>
<script type="text/javascript">
( function( $ ) {
// Escuchar el evento 'updated_checkout' de WooCommerce
$( document.body ).on( 'updated_checkout', function(data) {
// Implementación de la llamada AJAX
});
} )( jQuery );
</script>
<?php
}
En este fragmento, la función wpsh_add_callback incorpora un bloque de JavaScript que se ejecuta cuando el usuario interactúa con el formulario de checkout.
Paso 2: Realizar una Llamada AJAX
Dentro de nuestro script, implementamos una llamada AJAX a admin-ajax.php para obtener el prefijo del código de país basado en la selección del usuario.
<script type="text/javascript">
( function( $ ) {
$( document.body ).on( 'updated_checkout', function(data) {
var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>",
country_code = $('#billing_country').val();
var ajax_data = {
action: 'country_prefix_phone',
country_code: country_code
};
$.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
dataType: "json", // Indicamos que esperamos una respuesta JSON
success: function(response) {
$('#billing_phone').val(response.phone);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
} )( jQuery );
</script>
Aquí, ajax_url es la URL del archivo admin-ajax.php, y country_code almacena el código del país seleccionado. Luego, realizamos una solicitud POST a través de AJAX, esperando una respuesta en formato JSON.
Paso 3: Procesamiento del Lado del Servidor
En el servidor, vinculamos la acción country_prefix_phone con una función que procesará la solicitud AJAX.
// Enlazar la acción AJAX con funciones específicas para usuarios autenticados y no autenticados
add_action( 'wp_ajax_nopriv_country_prefix_phone', 'fn_phone_prefix' );
add_action( 'wp_ajax_country_prefix_phone', 'fn_phone_prefix' );
function fn_phone_prefix() {
$country_code = isset( $_POST['country_code'] ) ? sanitize_text_field( $_POST['country_code'] ) : '';
if( $country_code ){
$calling_code = WC()->countries->get_country_calling_code( $country_code );
$calling_code = is_array( $calling_code ) ? $calling_code[0] : $calling_code;
}
$phone_arr = array("phone" => $calling_code);
echo json_encode($phone_arr);
wp_die();
}
La función fn_phone_prefix recupera el código de llamada del país utilizando el código de país enviado, lo devuelve en formato JSON y finaliza la ejecución para evitar la salida adicional.
Paso 4: Validación del Número de Teléfono
Por último, aseguramos que el número de teléfono tenga la longitud adecuada mediante otra función enganchada al proceso de checkout.
// Validar la longitud del número de teléfono durante el proceso de checkout
add_action('woocommerce_checkout_process', 'wpsh_validate_phone');
function wpsh_validate_phone() {
if (isset($_POST['billing_phone'])) {
$phone = strlen(preg_replace('/[^0-9]/', '', $_POST['billing_phone']));
if ($phone < 7) {
wc_add_notice( __( '<strong>Teléfono</strong> debe tener al menos 7 dígitos.' ), 'error' );
}
}
}
Esta función valida que el número de teléfono ingresado contenga al menos 7 dígitos, mostrando un aviso si no cumple con este requisito.
Para terminar:
La integración de esta funcionalidad mejora la experiencia del usuario al facilitar la introducción de números de teléfono y garantizar la precisión de los datos. Este enfoque demuestra cómo el uso combinado de PHP y JavaScript en WordPress puede mejorar significativamente las capacidades de un sitio de WooCommerce.