"Sepetiniz boş" hatası ve ertelenmiş JavaScript

Belirtiler

Bu hatanın imzası oldukça belirgindir:

• Ürün sayfasında "sepete ekle" çalışır, üstteki sepet sayacı artar.
• Sepet sayfası ya boş görünür ya da hiç yüklenmez.
• Ödeme sayfası "Sepetiniz şu anda boş" mesajı verir.
• Hata bazı ziyaretçilerde yok — genellikle giriş yapmış yöneticide sorun görünmez.
• Sunucu hata kaydında (PHP error log) hiçbir şey yoktur.

Son iki madde önemli. Yöneticide sorunun görünmemesi, çoğu hız eklentisinin giriş yapmış kullanıcılar için optimizasyonu devre dışı bırakmasındandır. Bu da site sahibinin sorunu fark etmesini geciktirir; hata yalnızca gerçek müşteride oluşur.

Yanlış teşhisler

Bu hatayla karşılaşan çoğu kişi sırayla şunları dener ve hiçbiri kalıcı sonuç vermez:

• Önbelleği temizlemek. Geçici olarak düzelmiş gibi görünebilir çünkü ilk yüklemede zamanlama değişir; birkaç dakika sonra tekrarlar.
• Ödeme sayfasını önbellek dışına almak. Doğru bir ayardır ve yapılmalıdır, ama bu hatanın sebebi bu değildir.
• Oturum/çerez ayarlarını değiştirmek. Sepetin oturumla ilgisi olduğu varsayımıyla yapılır; oysa sepet sunucuda doğru, sorun ekranda.
• Temayı veya WooCommerce'i yeniden kurmak. Zaman kaybı.

Bu denemelerin ortak hatası, sorunu sunucu tarafında aramak. Oysa sunucu sepeti doğru biliyor — kanıtı, sepet sayacının artması.

Doğru teşhis: konsol

Teşhis için tek yapılması gereken, ödeme sayfasını giriş yapmadan (gizli sekmede) açıp tarayıcının geliştirici konsoluna bakmaktır.

Uncaught ReferenceError: wp is not defined
    at checkout-blocks.js:1
Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')

Bu iki satırı gördüyseniz teşhis tamamdır. Sepet doğru, sunucu doğru; sayfayı çizen JavaScript çalışamadan ölüyor.

Ekstra doğrulama: sayfa kaynağında <script> etiketlerine bakın. WordPress çekirdek betikleri (wp-polyfill, wp-element, wp-data) da defer ile işaretlenmişse sebep kesinleşir.

Kök neden

WordPress betikleri birbirine bağımlıdır ve bu bağımlılık sırası wp_enqueue_script ile bildirilir. Tarayıcı normalde bu sırayı korur.

defer özniteliği eklendiğinde betikler HTML ayrıştırma bittikten sonra çalışır. Standart, defer edilmiş betiklerin belge sırasına göre çalışmasını söyler — ancak dinamik olarak eklenen, koşullu yüklenen veya satır içi (inline) kod parçalarıyla karışan bir yığında bu garanti pratikte bozulur. Özellikle:

• Satır içi betikler defer edilemez. WooCommerce blokları, ayarlarını satır içi <script> bloklarıyla aktarır. Bu satır içi kod hemen çalışır; bağımlı olduğu wp-element ise ertelenmiştir. Sıra tersine döner.
• Modül ve klasik betikler karışır. Farklı yükleme modelleri aynı erteleme kuralına sokulduğunda zamanlama öngörülemez hâle gelir.

Sonuç: wp nesnesi henüz tanımlı değilken ona erişmeye çalışan kod çalışır, hata fırlar ve React tabanlı blok hiç bağlanamaz. Blok bağlanamayınca varsayılan durumunu — boş sepeti — gösterir.

Bu hatayı gerçek bir sitede kök nedene kadar takip ettiğimde kaynak, temaya eklenmiş bir yardımcı eklentideki toptan erteleme kuralıydı: istisna listesi olmadan, sitedeki tüm betiklere defer ekleyen birkaç satır.

Çözüm

Erteleme kuralı kaldırılmaz — sadece muafiyet listesi kazanır. WordPress çekirdek betikleri ve WooCommerce blok betikleri ertelenmemelidir.

add_filter( 'script_loader_tag', function ( $tag, $handle ) {

    // Ertelenmemesi gereken tanıtıcılar
    $skip_prefixes = array( 'wp-', 'wc-', 'woocommerce' );
    $skip_exact    = array( 'jquery', 'jquery-core', 'jquery-migrate' );

    foreach ( $skip_prefixes as $prefix ) {
        if ( 0 === strpos( $handle, $prefix ) ) {
            return $tag;
        }
    }
    if ( in_array( $handle, $skip_exact, true ) ) {
        return $tag;
    }

    // Sepet ve ödeme sayfalarında hiç erteleme yapma
    if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_cart() ) ) {
        return $tag;
    }

    if ( false !== strpos( $tag, ' defer' ) || false === strpos( $tag, ' src=' ) ) {
        return $tag;
    }

    return str_replace( ' src=', ' defer src=', $tag );

}, 10, 2 );

Hazır bir hız eklentisi kullanıyorsanız aynı mantık eklentinin ayar ekranından uygulanır: JavaScript erteleme/birleştirme bölümünde bir hariç tutma listesi bulunur. Oraya wp-, wc- ve woocommerce ile başlayan tanıtıcılar eklenir; mümkünse sepet ve ödeme sayfaları optimizasyondan tamamen muaf tutulur.

Doğrulama

Düzeltmeyi kanıtlamadan bitmiş saymayın:

1. Gizli sekmede (giriş yapmadan) ürünü sepete ekleyin.
2. Ödeme sayfasını açın; sepet dolu görünmeli.
3. Konsolda hata olmamalı — özellikle wp is not defined gitmiş olmalı.
4. Ödeme yöntemleri listesinin eksiksiz göründüğünü kontrol edin. Aynı hata, özel ödeme geçitlerinin blok checkout'ta hiç görünmemesine de yol açar.
5. Önbelleği temizleyip test tekrarlayın — düzeltme, önbellekli ilk ziyarette de geçerli olmalı.

Özet

"Sepetiniz boş" hatası genellikle bir sepet hatası değil, bir betik yükleme sırası hatasıdır. Sunucu sepeti doğru bilir; onu ekrana çizecek JavaScript çalışamaz.

Genel kural: hız optimizasyonu istisnasız uygulanmaz. Toptan erteleme, birleştirme veya geciktirme kuralları WordPress çekirdek betiklerini ve ödeme akışını dışarıda bırakmalıdır. Hızın bedeli satış olmamalı.