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

Gereksinimler ve Ön Hazırlık

Bu sistemi kurmadan önce WordPress altyapınızın güncel olduğundan emin olmalısınız. En az PHP 8.1 sürümü ve modern bir tarayıcı desteği gereklidir. Çalışmalarınızı doğrudan canlı sitede değil, bir yerel geliştirme ortamında (LocalWP veya XAMPP gibi) yapmanız önerilir.

• Aktif bir WordPress kurulumu (tercihen WooCommerce yüklü).
• Temel düzeyde PHP ve JavaScript (ES6+) bilgisi.
• Bir alt tema (child theme) veya özel bir eklenti dosyası.
• Tarayıcı geliştirici araçlarına (F12) erişim.

Adım 1: Sunucu Tarafında Ajax Endpoint Tanımlama

WordPress'te Ajax isteklerini karşılamak için functions.php dosyanıza veya özel eklenti dosyanıza bir "endpoint" (uç nokta) tanımlamanız gerekir. Bu işlem, WordPress'in gelen isteği tanımasını ve doğru fonksiyonu tetiklemesini sağlar.

// functions.php dosyasına eklenecek kod
add_action('wp_ajax_get_live_stock', 'get_live_stock_callback');
add_action('wp_ajax_nopriv_get_live_stock', 'get_live_stock_callback');

function get_live_stock_callback() {
    $product_id = intval($_POST['product_id']);
    
    if (!$product_id) {
        wp_send_json_error('Geçersiz ürün ID.');
    }

    $stock = get_post_meta($product_id, '_stock', true);
    wp_send_json_success(['stock' => $stock]);
}

Burada wp_ajax_ ve wp_ajax_nopriv_ kancalarını kullanarak hem giriş yapmış hem de yapmamış kullanıcılar için aynı fonksiyonu çalıştırdık. wp_send_json_success fonksiyonu, veriyi JSON formatında güvenli bir şekilde döndürür.

Adım 2: JavaScript ile İsteği Tetikleme

İstemci tarafında, kullanıcının sayfayı yenilemesine gerek kalmadan stok verisini çekmek için modern fetch API'sini kullanacağız. Bu kod, sayfa yüklendiğinde veya belirli bir zaman aralığında tetiklenebilir.

// script.js dosyası
document.addEventListener('DOMContentLoaded', () => {
    const productId = document.querySelector('#product-id').value;

    fetch(ajaxurl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `action=get_live_stock&product_id=${productId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.querySelector('#stock-display').innerText = `Kalan Stok: ${data.data.stock}`;
        }
    });
});

Yukarıdaki kod, WordPress'in tanımladığı ajaxurl değişkenini kullanır. Bu değişkenin JavaScript dosyanıza aktarılması için bir sonraki adımı uygulamanız şarttır.

Adım 3: Script Dosyasını Kuyruğa Ekleme ve Değişken Tanımlama

JavaScript dosyanızı WordPress'e doğru şekilde tanıtmak ve ajaxurl değişkenini tanımlamak için wp_localize_script fonksiyonunu kullanmalısınız. Bu, güvenlik ve uyumluluk açısından en iyi pratiktir.

add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts() {
    wp_enqueue_script('my-ajax-script', get_stylesheet_directory_uri() . '/js/script.js', ['jquery'], '1.0', true);
    
    wp_localize_script('my-ajax-script', 'my_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}

Artık JavaScript tarafında ajaxurl yerine my_ajax_obj.ajax_url kullanarak daha güvenli bir yapı kurmuş oldunuz.

Adım 4: Güvenlik Önlemleri ve Nonce Kullanımı

Ajax isteklerinde en büyük risk, yetkisiz kişilerin sunucunuza sahte istekler göndermesidir. Bunu önlemek için "Nonce" (Number used once) mekanizmasını kullanmalıyız.

// PHP tarafında nonce kontrolü
if (!check_ajax_referer('stock_nonce_action', 'nonce', false)) {
    wp_send_json_error('Güvenlik doğrulaması başarısız.');
}

Kritik Güvenlik Uyarısı: Üretim ortamında her zaman Nonce kullanın. Nonce kullanmadan yapılan Ajax işlemleri, CSRF (Cross-Site Request Forgery) saldırılarına kapı aralar. Ayrıca, veritabanı sorgularınızda her zaman intval() veya sanitize_text_field() gibi temizleme fonksiyonlarını kullanın.

Adım 5: Stok Takip Sistemi Karşılaştırma Tablosu

Aşağıdaki tablo, özel bir Ajax çözümü ile hazır eklenti kullanmanın farklarını özetlemektedir.

Adım 6: Hata Ayıklama ve Test Süreçleri

Sistemin çalışıp çalışmadığını test etmek için tarayıcınızın "Ağ" (Network) sekmesini kullanın. İstek gönderildiğinde admin-ajax.php dosyasının 200 OK yanıtı döndürdüğünden ve gelen JSON yanıtının doğru stok değerini içerdiğinden emin olun.

// Basit hata ayıklama bloğu
try {
    const response = await fetch(my_ajax_obj.ajax_url, { ... });
    if (!response.ok) throw new Error('Sunucu hatası');
} catch (error) {
    console.error('Stok bilgisi alınamadı:', error);
}

Bu blok, olası ağ hatalarını konsola yazdırarak sorunu hızlıca tespit etmenize yardımcı olur.

Sıkça Sorulan Sorular

Ajax stok takibi site hızını etkiler mi?

Doğru yapılandırılmış bir Ajax isteği, sadece küçük bir JSON verisi döndürdüğü için site hızını olumsuz etkilemez. Aksine, tüm sayfayı yenilemekten çok daha performanslıdır.

Neden wp_ajax_nopriv kullanmalıyım?

Eğer stok bilgisini sadece giriş yapmış kullanıcılar değil, tüm ziyaretçiler görsün istiyorsanız wp_ajax_nopriv kancası zorunludur.

Stok verisi önbelleğe (cache) takılır mı?

Evet, sunucu tarafında önbellekleme kullanıyorsanız Ajax isteğinizin önbelleğe alınmadığından emin olmanız gerekir. İstek URL'sine rastgele bir parametre ekleyerek bunu aşabilirsiniz.

Bu sistem WooCommerce ile tam uyumlu mu?

Evet, get_post_meta($id, '_stock', true) fonksiyonu doğrudan WooCommerce'in stok verisini okur, dolayısıyla tam uyumludur.

Güvenlik için başka ne yapabilirim?

İsteklerin sadece kendi alan adınızdan gelmesini sağlamak için $_SERVER['HTTP_REFERER'] kontrolü ekleyebilir ve REST API yerine özel endpointler kullanıyorsanız yetkilendirme katmanları oluşturabilirsiniz.

Stok Durumuna Göre Dinamik Arayüz Manipülasyonu

Kullanıcı deneyimini bir üst seviyeye taşımak için, Ajax'tan dönen stok verisini sadece metin olarak göstermek yerine, görsel geri bildirimlerle desteklemek oldukça etkilidir. Örneğin, stok sayısı 5'in altına düştüğünde "Son ürünler!" uyarısı göstermek veya stok bittiğinde "Sepete Ekle" butonunu tamamen devre dışı bırakmak dönüşüm oranlarını doğrudan etkiler.

Aşağıdaki JavaScript kodu, Ajax yanıtını işlerken DOM öğelerini nasıl dinamik olarak güncelleyeceğinizi gösterir:

jQuery(document).ready(function($) {
    function updateStockUI(response) {
        var stockCount = parseInt(response.data.stock);
        var $button = $('.single_add_to_cart_button');
        var $notice = $('#stock-notice');

        if (stockCount get_stock_quantity();
        set_transient($transient_key, $stock, 30 * SECOND_IN_SECONDS);
    }
    return $stock;
}

Ölçeklenebilirlik İçin İleri İpuçları

• İstek Sıklığını Ayarlayın: Kullanıcının tarayıcısında setInterval süresini 3 saniye yerine 10 saniyeye çekmek, sunucu yükünü %70 oranında azaltabilir.
• Sadece Görünür Öğeleri Güncelleyin: Sayfadaki tüm ürünleri değil, sadece kullanıcının o an görüntülediği (viewport) ürünlerin stoklarını güncelleyen bir "Intersection Observer" yapısı kurun.
• CDN ve Edge Caching: Eğer stok verisi çok kritik değilse, veriyi CDN üzerinden sunulan bir JSON dosyası ile senkronize etmeyi değerlendirin.

Not: Çok yüksek trafikli sitelerde, Ajax isteklerini WordPress'in ağır admin-ajax.php dosyası yerine, özel bir REST API endpoint'i üzerinden yönetmek daha performanslı sonuçlar verecektir.

Sonuç

WordPress üzerinde özel bir Ajax canlı stok takip sistemi kurmak, sitenizin profesyonelliğini artırırken kullanıcılarınıza anlık bilgi sunmanızı sağlar. Bu rehberde öğrendiğiniz yöntemleri, kendi ihtiyaçlarınıza göre özelleştirebilir ve daha karmaşık stok yönetimi senaryolarına (örneğin stok bittiğinde butonun pasifleşmesi) uyarlayabilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Canlı sitenizde uygulamadan önce mutlaka yedek alınız. Yanlış yapılandırılan Ajax fonksiyonları, sunucu kaynaklarının aşırı tüketilmesine (DoS benzeri durumlar) yol açabilir. Güvenlik ve performans konusunda uzman desteği almanız önerilir.

Bir sonraki adım olarak, sisteminize "stok azaldı" uyarısı için görsel efektler ekleyebilir veya stok verilerini WebSocket teknolojisi ile daha gerçek zamanlı bir yapıya taşıyabilirsiniz.