Wordpress İle Özel Bir Ajax Canlı Sipariş Takip Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu sistemi kurabilmek için temel düzeyde PHP, JavaScript (ES6+) ve WordPress kanca (hook) yapısına hakim olmanız beklenmektedir. Çalışma ortamınızda aşağıdaki bileşenlerin hazır olduğundan emin olun:

• WordPress 6.5 veya üzeri bir sürüm.
• WooCommerce eklentisinin kurulu ve aktif olması.
• Bir alt tema (child theme) veya özel bir işlevsellik eklentisi (custom functionality plugin).
• Tarayıcı konsolu üzerinden hata ayıklama yapabilmek için temel geliştirici araçları bilgisi.

Kodlarınızı doğrudan ana temanın functions.php dosyasına yazmak yerine, bir eklenti veya alt tema kullanmanız, tema güncellemelerinde kodlarınızın kaybolmaması için hayati öneme sahiptir.

Adım 1: Sipariş Durumu Verisini Çeken PHP Fonksiyonunu Hazırlama

İlk adım, WordPress veritabanından sipariş durumunu çekecek ve bunu Ajax isteğine yanıt olarak döndürecek bir PHP fonksiyonu oluşturmaktır. Bu fonksiyonun güvenliği için wp_verify_nonce kullanarak isteklerin doğrulanmasını sağlamalıyız.

function get_order_status_ajax_handler() {
    // Güvenlik: Nonce doğrulaması
    check_ajax_referer('order_tracking_nonce', 'security');

    $order_id = intval($_POST['order_id']);
    $order = wc_get_order($order_id);

    if (!$order) {
        wp_send_json_error('Sipariş bulunamadı.');
    }

    // Sipariş durumunu al ve döndür
    $status = $order->get_status();
    wp_send_json_success(array('status' => wc_get_order_status_name($status)));
}
add_action('wp_ajax_get_order_status', 'get_order_status_ajax_handler');
add_action('wp_ajax_nopriv_get_order_status', 'get_order_status_ajax_handler');

Yukarıdaki kod, wp_ajax_ ve wp_ajax_nopriv_ kancalarını kullanarak hem giriş yapmış hem de yapmamış kullanıcıların bu isteği tetiklemesine izin verir. wp_send_json_success fonksiyonu, veriyi JSON formatında JavaScript tarafına iletmek için en temiz yöntemdir.

Adım 2: JavaScript ile Ajax İsteğini Yönetme

Veriyi sunucudan almak için modern fetch API'sini kullanacağız. Bu yöntem, eski jQuery.ajax yöntemine göre daha hızlıdır ve modern tarayıcılarda doğal olarak desteklenir.

document.addEventListener('DOMContentLoaded', function() {
    const trackButton = document.getElementById('track-order-btn');
    
    if (trackButton) {
        trackButton.addEventListener('click', function() {
            const orderId = document.getElementById('order-id-input').value;
            const formData = new FormData();
            formData.append('action', 'get_order_status');
            formData.append('security', ajax_object.nonce);
            formData.append('order_id', orderId);

            fetch(ajax_object.ajax_url, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('status-display').innerText = 'Durum: ' + data.data.status;
                } else {
                    alert('Hata: ' + data.data);
                }
            });
        });
    }
});

Bu JavaScript kodu, kullanıcının girdiği sipariş numarasını alır, bir FormData nesnesi oluşturur ve sunucuya gönderir. Gelen yanıtı işleyerek sayfadaki ilgili HTML elementini günceller.

Adım 3: Scriptleri WordPress'e Tanıtma ve Kuyruğa Alma

Yazdığımız JavaScript dosyasını WordPress'e tanıtmak için wp_enqueue_script fonksiyonunu kullanmalıyız. Ayrıca, Ajax URL'sini ve güvenlik anahtarını (nonce) JavaScript'e aktarmak için wp_localize_script kullanmak zorunludur.

function enqueue_order_tracking_scripts() {
    wp_enqueue_script('order-tracking-js', get_stylesheet_directory_uri() . '/js/order-tracking.js', array(), '1.0', true);
    
    wp_localize_script('order-tracking-js', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('order_tracking_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_order_tracking_scripts');

Bu işlem, JavaScript dosyanızın doğru yüklenmesini sağlar ve ajax_object.nonce değişkeni sayesinde Ajax isteklerinizin güvenli bir şekilde doğrulanmasına olanak tanır.

Adım 4: Kullanıcı Arayüzü İçin HTML Formu Oluşturma

Sistemin çalışması için kullanıcıya bir giriş alanı ve sonuç alanı sunmalıyız. Bunu bir kısa kod (shortcode) olarak tanımlayarak sitenizin herhangi bir sayfasına ekleyebilirsiniz.

function order_tracking_shortcode() {
    return '
    

        
        Siparişi Sorgula
        

    
';
}
add_shortcode('canli_siparis_takip', 'order_tracking_shortcode');

Bu kısa kodu [canli_siparis_takip] şeklinde bir sayfaya eklediğinizde, oluşturduğumuz sistem aktif hale gelecektir. Tasarımı CSS ile özelleştirerek markanıza uygun hale getirebilirsiniz.

Adım 5: Yöntem Karşılaştırması ve Seçim

Sipariş takip sistemleri için farklı yöntemlerin avantaj ve dezavantajları bulunmaktadır. İhtiyacınıza en uygun olanı seçmek için aşağıdaki tabloyu inceleyebilirsiniz.

Kritik Güvenlik Uyarısı: Üretim ortamında (production) asla wp_send_json_error veya wp_send_json_success fonksiyonlarını kullanırken hata ayıklama (debug) mesajlarını doğrudan kullanıcıya göstermeyin. Kullanıcı girişlerini mutlaka intval() veya sanitize_text_field() ile temizleyin. SQL injection saldırılarına karşı her zaman WordPress'in yerleşik veri hazırlama fonksiyonlarını kullanın.

Sıkça Sorulan Sorular

Ajax sistemi sitemi yavaşlatır mı?

Hayır, doğru yapılandırılmış bir Ajax sistemi, sunucu üzerindeki yükü azaltır çünkü sadece gerekli veri parçacığını çeker, tüm sayfa yapısını tekrar oluşturmaz.

Neden wp_localize_script kullanmalıyım?

WordPress'in Ajax URL'sini ve güvenlik anahtarını JavaScript dosyanıza güvenli bir şekilde aktarmanın standart ve en güvenli yolu budur.

Sipariş durumu neden "Bulunamadı" hatası veriyor?

Girdiğiniz sipariş numarasının veritabanında var olduğunu ve kullanıcının bu siparişi görme yetkisi olup olmadığını kontrol edin. Eğer sipariş gizli bir durumdaysa, yetkilendirme kodunuzu güncellemeniz gerekebilir.

Mobil cihazlarda çalışır mı?

Evet, kullandığımız fetch API ve standart HTML form yapısı tüm modern mobil tarayıcılarla tam uyumludur.

Bu sistemi özel post tipleri için kullanabilir miyim?

Kesinlikle. wc_get_order yerine get_post_meta fonksiyonlarını kullanarak kendi özel içerik türleriniz için de benzer bir yapı kurabilirsiniz.

Sistem Performansını Optimize Etme ve Veritabanı Sorguları

Ajax tabanlı sistemlerde en sık karşılaşılan sorun, veritabanına yapılan gereksiz sorgulardır. Kullanıcı her "Sorgula" butonuna bastığında tüm WordPress çekirdeğini yüklemek yerine, veritabanı sorgularını minimize etmek sistemin hızını doğrudan etkiler. Özellikle yüksek trafikli sitelerde wp_cache_get ve wp_cache_set kullanarak verileri geçici bellekte tutmak, sunucu yükünü ciddi oranda azaltacaktır.

Aşağıdaki örnekte, sipariş durumunu veritabanından çekmeden önce önbelleği kontrol eden optimize edilmiş bir yapı bulunmaktadır:

function get_order_status_optimized($order_id) {
    $cache_key = 'order_status_' . $order_id;
    $status = wp_cache_get($cache_key);

    if (false === $status) {
        $order = wc_get_order($order_id);
        if (!$order) return 'Bulunamadı';
        $status = $order->get_status();
        wp_cache_set($cache_key, $status, '', 300); // 5 dakika önbellekle
    }

    return $status;
}

Gelişmiş Hata Ayıklama ve Loglama Yöntemleri

Ajax istekleri arka planda çalıştığı için tarayıcı konsolunda görünmeyen hatalar sistemin kilitlenmesine neden olabilir. Geliştirme aşamasında WP_DEBUG_LOG özelliğini aktif ederek, sunucu tarafındaki hataları wp-content/debug.log dosyasında takip etmeniz hayati önem taşır.

İstemci tarafında ise, Ajax isteği başarısız olduğunda kullanıcıya anlamlı bir geri bildirim vermek için error callback fonksiyonunu şu şekilde yapılandırabilirsiniz:

$.ajax({
    url: ajax_object.ajax_url,
    type: 'POST',
    data: {
        action: 'check_order_status',
        order_id: orderId
    },
    success: function(response) {
        if(response.success) {
            $('#result').html('Durum: ' + response.data);
        } else {
            $('#result').html('Hata: ' + response.data);
        }
    },
    error: function(xhr, status, error) {
        console.error("Ajax Hatası: " + error);
        $('#result').html('Sistem şu an meşgul, lütfen tekrar deneyin.');
    }
});

Güvenlik İçin İleri Düzey İpuçları

• Nonce Doğrulaması: Her zaman check_ajax_referer() kullanarak isteğin sitenizden geldiğini doğrulayın.
• Hız Sınırlaması (Rate Limiting): Aynı IP adresinden gelen ardışık istekleri sınırlamak için transient API kullanarak bir sayaç oluşturun. Bu, botların sisteminizi yormasını engeller.
• Veri Sanitizasyonu: Kullanıcıdan gelen order_id verisini mutlaka intval() fonksiyonu ile temizleyin.

Bu önlemler, sisteminizi sadece işlevsel değil, aynı zamanda saldırılara ve aşırı yüklenmelere karşı dayanıklı bir yapıya kavuşturacaktır.

Sonuç

WordPress ile özel bir Ajax canlı sipariş takip sistemi oluşturmak, hem teknik becerilerinizi geliştirir hem de kullanıcılarınıza profesyonel bir deneyim sunmanızı sağlar. Bu rehberde öğrendiğiniz PHP kancaları, JavaScript asenkron işlemleri ve güvenlik önlemleri, gelecekte geliştireceğiniz diğer tüm Ajax tabanlı projeler için temel teşkil edecektir. Bir sonraki adım olarak, sipariş durumu değiştiğinde kullanıcıya otomatik bildirim gönderen bir e-posta tetikleyicisi ekleyerek sisteminizi bir üst seviyeye taşıyabilirsiniz.