Como llamar una función de un plugin desde javascript

Plugins
1

Estoy armando un plugin en el que tengo una función que devuelve un array. Quiero poder llamar esa función desde javascript medianta ajax, pero no tengo idea de la forma adecuada de hacerlo en wordpress. No sé si hay que crear un endpoint o algo así para poder hacer el llamado, no se me ocurre cómo conectarme.

Mientras desarrollo la función javascript estoy haciendo así:

<?php $models = get_cars_models();?>
<script>
/* <![CDATA[ */
	document.addEventListener('DOMContentLoaded', function(event) {
		var models = JSON.parse('<?=$models?>');
		showInConsole(models);
	});
/* ]]> */	
</script>

Pero dudo mucho que sea la forma adecuada de hacelo.

2

Hola, adentro del evento tenés que hacer la petición ajax.
Podés usar el método ajax de Jquery.

$.ajax();

Le tenés que pasar un objeto con algunos datos. Y lo podés complicar tanto como quieras. Te recomiendo leer la documentación.

https://api.jquery.com/jQuery.Ajax/

PD: probablemente en WordPress sea mejor usar jquery.ajax(); en vez de $.ajax();

3

Gracias Máximo por tu respuesta.

La pregunta está más bien referida a cómo tendría que preparar la función php del plugin para recibir un llamado externo, si hay alguna forma de generar un endpoint o algo así, para tener la url a la cual hacer el llamado desde javascript con jquery.ajax.

Me da la sensación de que la forma en que lo hice es muy rudimentaria y debe haber una mejor forma. En definitiva, no sé a dónde tendría que hacer el llamado via ajax a la función, en lugar de hacerlo como muestro en la pregunta.

Lo que hago con el plugin es crear una serie de dropdowns encadenados, y quisiera que el output de la función fuera directamente estos dropdowns y no tener que hacer la conversión hardcodeada en la vista, tal vez generar un shortcode después.

Gracias por tu tiempo.

4

Hola.

En tu script JS debes usar $.ajax() o lo que yo más uso es $.post().
Entre las variables que vas a enviar para usar tu funcion PHP el más importante es “action”:
Digamos que envías action: ‘custom_vars’

Luego en tu script PHP debes crear estos hooks:

add_action( 'wp_ajax_custom_vars' , 'letsgo_custom_vars' );
add_action( 'wp_ajax_nopriv_custom_vars' , 'letsgo_custom_vars' );

Esta será la funcion que recibirá tus variables desde el JS. Las tomas las trabajas y debes retornar un Json para un mejor comodidad

function letsgo_custom_vars() {
...
wp_send_json($output);
}

PD: no olvides siempre usar un nonce para darle seguridad
Saludos

1 me gusta
5

Gracias @gonzalesc, voy a intentar a ver qué sale. Después comparto el plugin por si a alguien más le sirve. Saludos!

6

Finalmente encontré la solución a mi necesidad, hice lo siguiente:

// Agrego el archivo scripts.js a wordpress
function my_scripts()
{
		wp_enqueue_script('my-scripts-js', plugin_dir_url(__FILE__) . 'js/scripts.js');

    //Mediante wp_localize_script le mando un array con el resultado de las funciones que necesite

		wp_localize_script('my-scripts-js', 'my-scripts', array(
                'tipos'=>tipos_list(),
                'categoriesList'=>categories_list(),
		)
		);
}
add_action('wp_enqueue_scripts', 'my_scripts');

// Ahora el archivo scripts.js tiene accesible el array "my-scripts" y se lo puedo pasar a todas las funciones que necesite.
jQuery(document).ready(function ($) {
  my_function(my-scripts.tipos);
  my_function_2(my-scripts.categoriesList);
});
3 Me gusta