WP usar ajax em página customizada do template


(Celso Marigo Junior) #1

Utilizando como base o tópico abaixo:
http://tableless.com.br/requisicoes-ajax-no-wordpress/

Fiz um código para ser executado usando ajax no meu projeto WP, o detalhe é que este código está em uma área do site externa. Para que esta área seja acessível usei um template dentro do tema. Achei que seria correto colocar o código que registra as chamadas ajax neste template. Ficou algo assim:

<?php
    /**
     * @package WordPress
     * @subpackage U-Design
     */
    /**
     * Template Name: Page Painel Outside
    */
    if ( !defined( 'ABSPATH' ) || ! is_user_logged_in() ) {
       $redirect = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
       wp_redirect( wp_login_url( $redirect ) );
       exit();
    }; // Exit if accessed directly

    // Adicionando um script para o Wordpress
    add_action('wp_enqueue_script', 'secure_enqueue_script');
    function secure_enqueue_script(){
        wp_register_script('secure-ajax-access', 
                esc_url( add_query_arg( array( 'js_global' => 1), site_url())));
        wp_enqueue_script('secure-ajax-access');
    }

    add_action('template_redirect', 'javascript_variaveis');
    function javascript_variaveis(){
        if ( ! isset( $_GET['js_global'])) return;
        
        $nonce = wp_create_nonce('senha_do_dia_nonce');
        
        $variaveis_javascript = array(
            'senha_do_dia_nonce' => $nonce,
            'xhr_url'            => admin_url('admin-ajax.php')
        );
        
        $new_array = array();
        foreach ($variaveis_javascript as $key => $value) {
            $new_array[] = esc_js($key).":'".esc_js($value)."'";
        }
        
        header("Content-type: application/x-javascript");
        printf('var %s;','js_global',implode(',',$new_array));
        exit;
    }

    add_action('wp_ajax_senha_dia', 'senha_dia');
    function senha_dia(){
        if ( !wp_verify_nonce($_POST['senha_do_dia_nonce'], 'senha_do_dia_nonce')) {
            echo '401';
            die();
        }
        
        $data_senha = $_POST['data_senha'];         
        $senha = array('senha' => calculaSenha($data_senha));

        echo json_encode($senha);
    }

    include_once(get_template_directory().'/painel-administrativo/index.php');

Para fazer a chamada no front end, usei o código como abaixo em um arquivo script.js, que é carregado pelo arquivo:

painel-administrativo/index.php

$('#consultar').on('click', function(e){
        e.preventDefault();
        
        var dados_envio = {
            'senha_do_dia_nonce' : js_global.senha_do_dia_nonce,
            'data_senha' : $('#diasenha').val(),
            'action':'senha_dia'
        }
        
        $.ajax({
           url: js_global.xhr_url,
           type: 'POST',
           data: dados_envio,
           dataType: 'JSON',
           success: function(response){
               if (response == '401'){
                   console.error('Requisição inválida')
               } else {
                   console.log(response);
                   $('#senha').val(response);
               }
               
           }
        });
        
    });

Ele retorna um erro no console do navegador:

ReferenceError: js_global is not defined