Checkout İlçe Yükleme Sorunu

Muzıbu Checkout Sayfası - İl Seçince İlçe Listesi Çıkmıyor

🔴 KRİTİK SORUN
Tenant
Muzıbu (ID: 1001)
URL
https://muzibu.com/cart/checkout
Tarih Tespit
2025-12-15

SORUN ÖZETİ

Yazılmış Sorun:

Checkout sayfasında il seçildiğinde, ilçe (district) dropdown'ı boş kalıyor. İlçe listesi yüklenmiyor ve dropdown'da "Seçin" seçeneği dışında başka bir şey gösterilmiyor.

Etkilenen Formlar:

✓ Teslimat Adresi Formu

Yeni adres eklerken il seçince ilçe yüklenmiyor

✓ Fatura Adresi Formu

Aynı sorun fatura adresi formunda da görülüyor

KÖK NEDEN ANALIZI

1 HTML Dropdown ID'leri Uyuşmuyor (KRİTİK!)

❌ Buffer HTML'de (fatura adresi):
id="billing_district_digital"

✅ Checkout Page'de tanımlanmış ID:
id="billing_district"

Sorun: JavaScript kodu `document.getElementById('billing_district_digital')` ile bir dropdown bulmaya çalışıyor, ama sayfada `id="billing_district"` olan dropdown var. Bu yüzden ilçe listesi hiçbir dropdown'a ekleniemiyor!

💡 JavaScript Kodunda (Satır 947):

let select = document.getElementById('billing_district_digital');

→ Bulunan Dropdown (Satır 964):

<select ... id="billing_district" ...>

2 HTML Escape Karakterleri (İkincil Sorun)

Buffer dosyasında (`b-html.txt`) HTML karakterleri escape edilmiş:

❌ Escape Edilmiş:

.then(r => r.json())
<option value=''>

✅ Normal (Doğru):

.then(r => r.json())
<option value=''>

ℹ️ Bu karakterler browser'da doğru şekilde render ediliyor ancak kaynak kod açık olmak daha iyi.

3 Teslimat Adresi Formu - Ek Kontrol

✅ Teslimat adresi formundaki ID'ler doğru şekilde eşleşiyor:

JavaScript: document.getElementById('shipping_district')
HTML: <select id="shipping_district" ...>
→ ID'ler eşleşiyor ✓

Teslimat adresi formu çalışıyor görünüyor (eğer çalışmıyorsa ek kontrol gerek).

TEKNİK DETAYLAR

✅ API Endpoint'i Çalışıyor

Test sonucu:

GET https://muzibu.com/api/get-districts/İstanbul
→ Status: 200 OK
→ Dönen veri: 39 ilçe listesi (JSON array)

API'nin kendisi çalışıyor, sorun frontend/HTML'de.

✅ Database Verileri Tamam

Central database'den:

cities tablosu: 81 şehir ✓
districts tablosu: 956 ilçe ✓
İstanbul (city_id=34): 39 ilçe ✓

ℹ️ Livewire Component Yapısı

Checkout Page Component'inde tanımlanmış:

  • $districts - Teslimat ilçeleri (Livewire property)
  • $billingDistricts - Fatura ilçeleri (Livewire property)
  • getDistrictsByCity() - Central DB'den ilçeleri çeken metod

Livewire tarafında watchers var, ancak Blade'deki JavaScript Livewire property'lerini bypass edip direkt API'yi çağırıyor.

YAPILACAKLAR

1

Fatura Adresi Formu - ID Düzelt

Checkout Page Blade dosyasında (Satır 947) JavaScript kodunda ID'yi değiştir:

❌ Yanlış:

let select = document.getElementById('billing_district_digital');

✅ Doğru:

let select = document.getElementById('billing_district');

File: `/var/www/vhosts/tuufi.com/httpdocs/Modules/Cart/resources/views/livewire/front/checkout-page.blade.php`
Line: 947 (ve muhtemelen diğer aynı yer de var)

2

Teslimat Adresi Formu - Kontrol Et

Teslimat adresi formu da aynı sorunu yaşıyor mu kontrol et. ID'ler doğru gözüküyor ama test gerekli.

Line 665: document.getElementById('shipping_district')
Line 682: <select id="shipping_district" ...>
→ ID'ler eşleşiyor

3

Cache Temizle

Düzeltmelerden sonra cache'i temizle:

php artisan view:clear
php artisan responsecache:clear
4

Test Et

Düzeltimlerden sonra checkout sayfasında test et:

  • ✓ Teslimat adresi formunda il seçinci ilçeler yüklenmeli
  • ✓ Fatura adresi formunda il seçinci ilçeler yüklenmeli
  • ✓ Farklı şehirler için ilçe listesi değişmeli
  • ✓ Tarayıcı console'da hata olmamalı

BEKLENEN SONUÇLAR

Teslimat Adresi

  • ✓ İl seçilince ilçe dropdown doldurulacak
  • ✓ İlçe listesi doğru şehre ait ilçeleri gösterecek
  • ✓ Farklı il seçince liste güncellenecek

Fatura Adresi

  • ✓ İl seçilince ilçe dropdown doldurulacak
  • ✓ İlçe listesi doğru şehre ait ilçeleri gösterecek
  • ✓ Farklı il seçince liste güncellenecek

ÖNEMLİ NOTLAR

📌 JavaScript + Livewire Karışımı

Checkout sayfası hem Livewire property watchers hem de frontend JavaScript kullanıyor. Bu iki yöntem paralel çalışıyor. İlçeler hem Livewire state'inde hem de direkt DOM'da güncellenmeye çalışılıyor. İkisi de çalışmalı.

📌 İl Yazılış Varyasyonları

Türkçe karakterleri (İ, Ş, Ü, Ö, Ç) normalize etmek için API endpoint'inde özel bir normalize fonksiyonu var. Bu yüzden "Istanbul" ile "İstanbul" yazılsa da çalışacak.

📌 Aynı ID Sorunu Diğer Yerlerde?

Bu raporda bulanan ID mismatch sorunu, checkout sayfasının başka yerlerinde de olabilir. Tüm `getElementById()` çağrılarını kontrol etmek iyi fikir olacak.