Site icon Sviluppo applicazioni web e mobile – assistenza CMS WordPress, Magento, Prestashop

Tutorial su come effettuare chiamate Ajax su WordPress

Tutorial su come effettuare chiamate Ajax su WordPress

Se siete alle prime armi su WordPress vi sarà sicuramente capitato di avere la necessità di utilizzare delle chiamate asincrone in ajax da inserire nel vostro tema o in un plugin.

Ajax è uno dei mattoni base della scrittura di codice in javascript e, su WordPress, richiede dei piccoli aggiustamenti per essere integrato correttamente nel CMS.

Il codice base ajax (javascript) non varia di molto dal suo utilizzo standard, fatta eccezione per l’host da chiamare e l’aggiunta di una conferma di sicurezza, per evitare utilizzi impropri.

A seguire, ti presento qual è il codice per effettuare la chiamata ajax: 

jQuery.ajax({
    type: "POST",
    url : test_ajax.url,
    data: {
        action: 'say_hello_test',
        security : test_ajax.security,
        valore_trasmesso : 'Hello world!'
    },
    success: function( data ) {
        // Azioni da eseguire in caso di successo chiamata
    },
    error: function( error ) {
        // Azioni da eseguire in caso di errore chiamata
    }
});

Come includere lo script js dal file functions.php

Nel codice riportato prima, troviamo le variabili “test_ajax.url” e “test_ajax.security”, che ancora non contengono informazioni, valorizzeremo queste variabili nel prossimo step. Quindi, per includere lo script ajax è necessario accedere al file “functions.php” e aggiungere le dichiarazioni “wp_enqueue_script” e “wp_localize_script”. 

Il primo scrip, “wp_enqueue_script”, indicherà al compilatore di includere il file js nelle pagine in frontend. Il secondo, “wp_localize_script”, invece ci permetterà di localizzare lo script, grazie ai parametri dedicati che aggiungeremo. 

Codice di inclusione e localizzazione script ajax:

function enqueue_ajax_script_test()
{
   wp_enqueue_script( 'script_ajax_test', get_template_directory_uri() . '/ajax_test.js' );
   wp_localize_script( 'script_ajax_test', 'test_ajax', array(
       'url'      => admin_url( 'admin-ajax.php' ),
       'security' => wp_create_nonce('ajax_test_nonce_string')
   ));
}
add_action( "wp_enqueue_scripts", "enqueue_ajax_script_test" );

Ad “url” assegniamo l’indirizzo dedicato alle chiamate ajax da WordPress, indifferentemente dal destinatario della nostra chiamata, che verrà gestita invece dal parametro “action” nella parte js (…data: { action: ‘say_hello_test’…). Mentre per il parametro di sicurezza generiamo una chiave crittografata a partire da una qualunque stringa di testo.

Infine, la funzione chiamata dall’ajax, che nel nostro esempio è “say_hello_test_callback”, verrà interpellata a seguito della nostra chiamata ajax da un “add_action”, che approfondiremo dopo l’esempio sotto.

function say_hello_test_callback()
{
    check_ajax_referer( 'sct_nonce_key', 'security' );
    
    $parametro_ajax = trim( $_POST['valore_trasmesso'] );
    echo $parametro_ajax;

    wp_send_json( array( 'responso' => 'callback eseguita' ) );
    die();
}
// Utenti autenticati
add_action( 'wp_ajax_nopriv_say_hello_test', 'say_hello_test_callback' );
// Utenti non autenticati
add_action( 'wp_ajax_say_hello_test', 'say_hello_test_callback' );

In questo esempio notiamo degli elementi particolari:

Ora siete pronti per inserire ed utilizzare le chiamate asincrone in ajax su WordPress.

That’s all folks!

Se hai bisogno di assistenza nell’effettuare chiamate AJAX con WordPress o assistenza WordPress e WooCommerce per altre tematiche, dai un occhio al nostro servizio di Assistenza WordPress dove i nostri sviluppatori specializzati sicuramente sapranno aiutarti.

Exit mobile version