É muito comum precisarmos transitar dados entre o back-end e o front-end de uma aplicação, e nesta semana, em um projeto de ecommerce utilizando WordPress precisei utilizar um dado proveniente do PHP para que determinado evento ocorresse no front com o Javascript.
Sendo assim, fui atrás de uma transição nativa entre dados dentro do WordPress, com isto encontrei a função wp_localize_script que funciona da seguinte maneira:
1 | wp_localize_script( 'nome_do_meu_script', 'objetoJavascript', $arrayDeVariaveis ); |
Basicamente a ordem dos parâmetro é: nome do script que é registrado antes, em seguida vem o nome do objeto JS que guardará os dados recebidos e por último o array do PHP com os dados.
E então como aplicar isto?
Simples, pode-ser usar de N formas, desde inserindo no arquivo functions.php, até inserindo isto dentro do seu plugin. Para este exemplo irei aplicar o hook dentro do arquivo functions.php.
Vamos lá, tudo comentado:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //Abaixo simplesmente inserimos o action "wp_enqueue_scripts, que irá aplicar os scripts junto ao header/footer da aplicação, dependendo das configurações que você preferir. add_action( 'wp_enqueue_scripts', 'blog_vilourenco_enqueue_scripts' ); function blog_vilourenco_enqueue_scripts(){ //Registrando o script, o arquivo exemplo.js não precisa, necessariamente, ter nada dentro, mas é necessário tê-lo junto ao tema. wp_register_script( 'nome_do_script', get_stylesheet_directory_uri() . '/js/exemplo.js' ); //Chamo o script para estar sendo carregado junto aos demais scripts da aplicação. wp_enqueue_script( 'nome_do_script'); //Monto o array em que vou passar os dados ao Javascript, neste caso com apenas 1 posição. $arrayData = array('variavel_exemplo' => 'teste'); //Realizo a chamada ao método. wp_localize_script('nome_do_script', 'objeto_javascript', $arrayData); } |
Com isto, a variável passada pelo array no PHP estará disponibilizada dentro do objeto “objeto_javascript”, onde para acessar basta inserir no js, onde se deseja exibir, da seguinte maneira:
1 2 | //O objeto js recebendo a variável que estava no array do PHP. console.log(objeto_javascript.variavel_exemplo); |
Já dentro do JS você se encontra livre para usar a variável onde e como bem quiser, neste caso acima o exemplo, no console, é para fins de debug do tutorial.
Espero que isto tenha lhe ajudado, qualquer tipo de dúvida basta mandar bala nos comentários abaixo!
Obrigadíssimo e bom domingo a todos!