Code WordPress

Integrimi i një thirrjeje AJAX në WordPress: Guidë Hap-Pas-Hapi

AJAX është një mjet i fuqishëm në WordPress, që lejon ndërveprime dinamike dhe në kohë reale në faqen tuaj pa nevojën për ta rifreskuar atë. Pavarësisht nëse po krijoni një formë kontakti, një filtër produktesh, apo ngarkoni postime në mënyrë dinamike, AJAX ofrojn një përvojë më të lehtë dhe më të shpejtë për përdoruesit e faqes suaj.

Në këtë guidë, do të kalojmë përmes një shembulli të thjeshtë të WordPress AJAX duke përdorur si JavaScript ashtu edhe PHP. Në fund, do të jeni të përgatitur të shtoni funksionalitete AJAX të personalizuara në çdo faqe WordPress.

Çfarë është AJAX në WordPress?

AJAX është shkurtim për Asynchronous JavaScript and XML. Në thelb, lejon shkëmbimin e të dhënave midis klientit (shfletuesit) dhe serverit pa rifreskuar të gjithë faqen. Në WordPress, kërkesat AJAX trajtohen përmes skedarit admin-ajax.php. Kjo e bën të lehtë dërgimin e të dhënave nga dhe drejt serverit me vetëm disa rreshta kodi.

Pikat që do të mbulojmë në këtë tutorial:

  • Si të ngarkoni skedarët JavaScript në WordPress
  • Si të dërgoni një kërkesë AJAX nga front-end
  • Si të procesoni kërkesën dhe të ktheni të dhënat nga serveri

Hapi 1: Ngarkimi i Skedarit JavaScript

Hapi i parë për të konfiguruar AJAX është ngarkimi i skedarit tuaj JavaScript. Në WordPress, kjo bëhet duke përdorur funksionin wp_enqueue_script. Shtoni kodin e mëposhtëm në skedarin functions.php të temës suaj:


function sajdoko_ajax_enqueue() {

	// Ngarko skedarin JavaScript në front-end.
	wp_enqueue_script(
		'sajdoko-ajax-script', // Emri për skedarin.
		get_template_directory_uri() . '/js/simple-ajax-sajdoko.js',
		array('jquery') // Varësitë.
	);

	// Kalon URL-në AJAX në JavaScript
	wp_localize_script('sajdoko-ajax-script', 'ajaxurl', admin_url('admin-ajax.php'));
}
// Lidheni funksionin me veprimin 'wp_enqueue_scripts'.
add_action('wp_enqueue_scripts', 'sajdoko_ajax_enqueue');

Ky kod bën dy gjëra:

  1. Ngarkon skedarin JavaScript simple-ajax-example.js, duke siguruar që të ngarkohet në front-end.
  2. Përdor wp_localize_script për të kaluar variablin ajaxurl në skript, i cili referon skedarin admin-ajax.php. Kjo URL është e nevojshme për të procesuar kërkesën AJAX në server.

Hapi 2: Krijimi i Kërkesës AJAX në JavaScript

Tani, duhet të konfigurojmë JavaScript që dërgon kërkesën AJAX drejt WordPress. Më poshtë është skedari simple-ajax-example.js që merret me këtë proces:


// Prit derisa DOM të ngarkohet plotësisht para se të ekzekutoni skriptin
document.addEventListener("DOMContentLoaded", function () {
    var fruti = "Banane";

    // Krijoni një objekt të ri XMLHttpRequest
    var xhr = new XMLHttpRequest();
    // Inicioni një kërkesë GET me URL-në dhe parametrat e pyetjes
    xhr.open("GET", ajaxurl + "?action=sajdoko_ajax_request&fruti=" + fruti, true);

    // Përkufizoni një funksion që do të thirret kur kërkesa të përfundojë me sukses
    xhr.onload = function () {
        // Kontrolloni nëse kodi i statusit është në intervalin 200-299 (përgjigjet e suksesshme)
        if (xhr.status >= 200 && xhr.status < 300) {
            // Printoni tekstin e përgjigjes në console
            console.log(xhr.responseText);
        } else {
            // Printoni një mesazh gabimi me kodin e statusit nëse kërkesa nuk ishte e suksesshme
            console.log("Gabim: " + xhr.status);
        }
    };

    // Përkufizoni një funksion që do të thirret nëse kërkesa dështon
    xhr.onerror = function () {
        // Printoni një mesazh gabimi në console
        console.log("Kërkesa dështoi");
    };

    // Dërgoni kërkesën
    xhr.send();
});

Ky kod JavaScript pret që faqja të ngarkohet dhe më pas dërgon një kërkesë GET drejt serverit. Ai kalon parametrin GET sajdoko_ajax_request dhe vlerën e frutit Banane për t’u procesuar nga serveri.

Përgjigja e serverit shfaqet në consolen e shfletuesit, ose shfaqet një mesazh gabimi nëse diçka shkon keq.

Hapi 3: Procesimi i Kërkesës AJAX në PHP

Tani që kemi konfiguruar kërkesën AJAX në front-end, duhet të krijojmë një funksion PHP që e proceson kërkesën dhe kthen një përgjigje. Në WordPress, ne përdorim hook-et wp_ajax_ për të regjistruar veprimet AJAX.


function sajdoko_ajax_request() {

    // $_REQUEST përmban të gjitha të dhënat e dërguara me ajax
    if (isset($_REQUEST)) {

        $fruti = $_REQUEST['fruti'];

        // Përpunojmë të dhënat e dërguara
        if ($fruti == 'Banane') {
            $fruti = 'Apple';
        }

        // Tani do t'i kthejmë të dhënat funksionit JavaScript
        // Çdo gjë që printohet do të kthehet në përgjigje
	    echo 'Fruti juaj i preferuar është: ' . $fruti;

        // Nëse po bëni debug, mund të jetë e dobishme të shihni çfarë u dërgua në $_REQUEST
        // print_r($_REQUEST);

    }

    // Gjithmonë përdorni die() në funksionet që ekzekutojnë përmbajtje ajax
    die();
}

add_action('wp_ajax_sajdoko_ajax_request', 'sajdoko_ajax_request');

// Nëse dëshironi ta përdorni këtë funksion edhe për përdoruesit e pa loguar
add_action('wp_ajax_nopriv_sajdoko_ajax_request', 'sajdoko_ajax_request');

Funksioni sajdoko_ajax_request merr parametrin fruti të dërguar nga skedari JavaScript, e përpunon dhe e kthen një përgjigje mbrapsht. Përdorimi i wp_die() është i nevojshëm për të mbyllur saktë kërkesën AJAX.

Hapi 4: Trajtimi i Përdoruesve të Loguar dhe të Pa Loguar

Në WordPress, kërkesat AJAX duhet të trajtohen ndryshe për përdoruesit e loguar dhe ata të pa loguar. Për këtë arsye kemi shtuar dy hooks:

  • wp_ajax_sajdoko_ajax_request për përdoruesit e loguar
  • wp_ajax_nopriv_sajdoko_ajax_request për përdoruesit e pa loguar

Kjo siguron që funksionaliteti AJAX të funksionojë për të gjithë, pavarësisht nëse janë të loguar në faqen tuaj apo jo.

Hapi 5: Testimi i Kërkesës Suaj AJAX

Me gjithçka të konfiguruar, është koha të testoni kërkesën tuaj AJAX. Hapni console të shfletuesit tuaj (shtypni F12 ose Cmd+Opt+I), shkoni te skeda Console dhe rifreskoni faqen. Duhet të shihni një mesazh si Fruti juaj i preferuar është: Banane në console, gjë që konfirmon që kërkesa juaj AJAX po funksionon saktë!

Zgjerimi i Shembullit

Pasi të keni zotëruar këtë konfigurim bazë të AJAX, mund ta zgjeroni atë për raste më të avancuara. Ja disa ide:

  • Dërgimi i Formave: Përdorni AJAX për të dërguar format pa rifreskuar faqen.
  • Ngarkimi i Më Shumë Postimeve: Ngarkoni postime dinamike kur përdoruesi lëviz poshtë ose klikon një buton.
  • Filtrimi i Produkteve: Lejoni përdoruesit të filtrojnë produktet WooCommerce pa rifreskuar faqen.

Si gjithmonë, praktika është çelësi. Provoni të integroni AJAX në projektet tuaja për të kuptuar plotësisht potencialin e tij. Nëse kjo guidë ju ka ndihmuar, mos hezitoni ta ndani me zhvillues të tjerë!

Chat on WhatsApp Chat on WhatsApp