Wordpress İle Özel Bir Dinamik Woocommerce Ürün Karşılaştırma Sayfası Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeye başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. WordPress'in 6.x ve üzeri sürümleri ile PHP 8.2+ kullanımı, performans ve güvenlik açısından kritik öneme sahiptir.

• Aktif bir WordPress kurulumu ve WooCommerce eklentisi.
• Tema dosyalarınızda değişiklik yapabilmek için bir "Child Theme" (Alt Tema).
• Temel düzeyde PHP, JavaScript (ES6+) ve CSS bilgisi.
• Dosya düzenlemeleri için FTP erişimi veya bir kod editörü.

Uyarı: Canlı sitenizde yapacağınız her türlü kod değişikliğinden önce mutlaka tam yedek alın. Hatalı bir kod satırı sitenizin "White Screen of Death" (Ölümcül Beyaz Ekran) hatası vermesine neden olabilir.

Adım 1: Ürünleri Karşılaştırma Listesine Ekleme (Backend Mantığı)

İlk adım, kullanıcının seçtiği ürün ID'lerini sunucu tarafında geçici olarak saklamaktır. Bunun için WordPress'in wp_ajax kancalarını kullanacağız. Bu yöntem, sayfa yenilenmeden arka planda işlem yapmamızı sağlar.

// functions.php dosyasına eklenecek
add_action('wp_ajax_add_to_compare', 'add_to_compare_callback');
add_action('wp_ajax_nopriv_add_to_compare', 'add_to_compare_callback');

function add_to_compare_callback() {
    $product_id = intval($_POST['product_id']);
    $compare_list = isset($_COOKIE['compare_products']) ? json_decode(stripslashes($_COOKIE['compare_products']), true) : [];

    if (!in_array($product_id, $compare_list)) {
        $compare_list[] = $product_id;
        setcookie('compare_products', json_encode($compare_list), time() + (86400 * 30), "/");
    }
    wp_send_json_success($compare_list);
}

Yukarıdaki kod, kullanıcının tıkladığı ürün ID'sini alır ve bunu 30 gün boyunca geçerli olacak bir çerez içerisine JSON formatında kaydeder. intval() kullanımı, SQL injection veya hatalı veri girişine karşı temel bir güvenlik önlemidir.

Adım 2: JavaScript ile Etkileşim Sağlama

Kullanıcı "Karşılaştır" butonuna tıkladığında, veriyi AJAX ile sunucuya göndermemiz gerekir. Bu işlem, kullanıcı deneyimini kesintiye uğratmadan arka planda gerçekleşir.

// assets/js/compare.js dosyası
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('add-to-compare-btn')) {
        let productId = e.target.dataset.id;
        let formData = new FormData();
        formData.append('action', 'add_to_compare');
        formData.append('product_id', productId);

        fetch(ajaxurl, { method: 'POST', body: formData })
            .then(response => response.json())
            .then(data => alert('Ürün karşılaştırma listesine eklendi!'));
    }
});

Burada fetch API kullanarak veriyi WordPress'in AJAX uç noktasına gönderiyoruz. ajaxurl değişkeninin tanımlı olduğundan emin olmak için temanızın header.php dosyasında wp_localize_script kullanmanız gerekebilir.

Adım 3: Karşılaştırma Sayfası Şablonunu Oluşturma

Şimdi, karşılaştırma verilerini göstereceğimiz özel bir sayfa şablonu oluşturmalıyız. WordPress'te page-compare.php adında bir dosya oluşturarak tema klasörünüze ekleyin.

/* Template Name: Ürün Karşılaştırma Sayfası */
get_header();

$compare_list = isset($_COOKIE['compare_products']) ? json_decode(stripslashes($_COOKIE['compare_products']), true) : [];

if (!empty($compare_list)) {
    $args = ['post_type' => 'product', 'post__in' => $compare_list];
    $query = new WP_Query($args);
    // Döngü burada başlayacak
} else {
    echo 'Henüz karşılaştırma listesine ürün eklemediniz.';
}
get_footer();

Bu şablon, çerezdeki ID'leri kullanarak WP_Query ile ürün verilerini çeker. Eğer liste boşsa, kullanıcıya uyarı mesajı gösterilir.

Adım 4: Ürün Özelliklerini Dinamik Olarak Tablolaştırma

Karşılaştırma sayfasının kalbi, özelliklerin yan yana dizildiği tablodur. WooCommerce ürün özniteliklerini (attributes) dinamik olarak çekmek için aşağıdaki yapıyı kullanabilirsiniz.

echo '';
foreach ($query->posts as $product) {
    echo '';
}
echo '';
// Özellik satırları burada dönecek
echo '
Özellik
' . get_the_title($product->ID) . '
';

Bu yapı, tablonun sütunlarını dinamik olarak ürün sayısına göre oluşturur. get_the_title fonksiyonu ile ürün isimlerini başlığa yerleştiriyoruz.

Karşılaştırma Yöntemleri Karşılaştırması

Adım 5: Güvenlik Önlemleri ve Hata Ayıklama

Kodunuzu geliştirirken XSS (Cross-Site Scripting) saldırılarına karşı her zaman verileri filtrelemelisiniz. esc_html() veya esc_attr() fonksiyonlarını çıktı alırken mutlaka kullanın.

Önemli: Bu kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce tüm girdileri sanitize_text_field() ile temizlediğinizden ve veritabanı sorgularınızda $wpdb->prepare() kullandığınızdan emin olun.

Sıkça Sorulan Sorular

Karşılaştırma listesini veritabanında saklamak daha mı iyi?

Eğer kullanıcılarınızın giriş yapmasını zorunlu kılıyorsanız, veritabanı (user meta) daha kalıcı bir çözümdür. Ancak misafir kullanıcılar için çerezler en hızlı yöntemdir.

Mobil cihazlarda tablo tasarımı nasıl olmalı?

Mobil cihazlarda geniş tablolar sorun yaratır. CSS ile overflow-x: auto özelliğini kullanarak tablonun yatayda kaydırılabilir olmasını sağlayabilirsiniz.

Bu yöntem WooCommerce 9.x sürümleriyle çalışır mı?

Evet, WooCommerce'in temel ürün yapısı değişmediği sürece bu yöntem tüm sürümlerde çalışacaktır.

Aynı anda kaç ürün karşılaştırılabilir?

Kodda bir sınır belirlemedik, ancak performans için 3 veya 4 ürünle sınırlandırmanız kullanıcı deneyimi açısından daha iyidir.

Karşılaştırma sayfasını nasıl dinamik güncelleyebilirim?

Sayfayı yenilemeden güncellemek için JavaScript ile DOM manipülasyonu yapmanız veya sayfayı AJAX ile tekrar yüklemeniz gerekir.

İleri Seviye Optimizasyon: Karşılaştırma Tablosunda Performans Artırma

Dinamik karşılaştırma tabloları, özellikle çok sayıda ürün özelliği (attribute) olduğunda veritabanı sorgularını artırabilir. Sayfa yüklenme süresini (LCP) korumak için WP_Query yerine WC_Product_Query kullanarak sadece gerekli verileri çekmek kritik öneme sahiptir.

Aşağıdaki yöntemle, ürün verilerini geçici olarak önbelleğe alarak (Transient API) veritabanı yükünü minimize edebilirsiniz:

function get_cached_product_comparison_data($product_ids) {
    $transient_key = 'comp_data_' . md5(implode(',', $product_ids));
    $data = get_transient($transient_key);

    if (false === $data) {
        $data = [];
        foreach ($product_ids as $id) {
            $product = wc_get_product($id);
            $data[$id] = [
                'name' => $product->get_name(),
                'price' => $product->get_price_html(),
                'attributes' => $product->get_attributes()
            ];
        }
        set_transient($transient_key, $data, HOUR_IN_SECONDS);
    }
    return $data;
}

Karşılaştırma Sayfası İçin Birim Testi ve Hata Ayıklama Stratejileri

Sisteminizin kararlılığını sağlamak için karşılaştırma tablosunun boş olduğu durumları veya geçersiz ürün ID'lerini yöneten bir hata kontrol mekanizması kurmalısınız. Kullanıcıya "Ürün bulunamadı" veya "Karşılaştırma listesi boş" gibi net geri bildirimler vermek, kullanıcı deneyimini (UX) doğrudan iyileştirir.

Hata Ayıklama İçin Kontrol Listesi

• Çerez Senkronizasyonu: JavaScript ile çerezlere yazılan ID'lerin PHP tarafında $_COOKIE süper globali ile doğru okunup okunmadığını error_log() ile kontrol edin.
• Özellik Eşleşmesi: Farklı ürünlerin aynı isme sahip ancak farklı slug değerlerine sahip özelliklerini (attribute) doğru hizaladığınızdan emin olun.
• CSS Çakışmaları: Tablo yapınızın temanızın style.css dosyasındaki table etiketleriyle çakışmadığından emin olmak için !important yerine daha spesifik seçiciler (örneğin: .wc-comp-table) kullanın.

İpucu: Geliştirme aşamasında tarayıcınızın "Network" sekmesinden AJAX isteklerinin 200 OK döndürdüğünü ve dönen JSON verisinin beklenen formatta olduğunu mutlaka doğrulayın.

Alternatif: Veri Görselleştirme İçin Kütüphane Kullanımı

Daha modern bir görünüm için standart HTML tabloları yerine Chart.js veya DataTables gibi kütüphaneleri entegre edebilirsiniz. Özellikle teknik özelliklerin sayısal değerlerle ifade edildiği (örneğin: pil kapasitesi, ağırlık, boyut) durumlarda, bu kütüphaneler karşılaştırmayı çok daha okunabilir kılar.

// DataTables kütüphanesini tabloya uygulama
jQuery(document).ready(function($) {
    $('.wc-comp-table').DataTable({
        "paging": false,
        "searching": false,
        "info": false,
        "scrollX": true
    });
});

Bu yapı, özellikle 4'ten fazla ürün karşılaştırıldığında kullanıcıların yatay kaydırma yaparak verileri daha rahat incelemesine olanak tanır.

Sonuç

WordPress üzerinde kendi dinamik WooCommerce ürün karşılaştırma sayfanızı oluşturmak, sitenize özel bir işlevsellik katmanın en etkili yoludur. Bu rehberde, çerez yönetimi, AJAX haberleşmesi ve dinamik tablo oluşturma adımlarını başarıyla tamamladınız. Bir sonraki adım olarak, karşılaştırma tablosuna "Sepete Ekle" butonları ekleyerek dönüşüm oranlarınızı artırmayı deneyebilirsiniz. Kodunuzu her zaman güncel tutmayı ve güvenlik açıklarına karşı düzenli kontroller yapmayı unutmayın.