🎯 Checkout Adres Sistemi - UX Planı v2 - YENİ

📅 Tarih: 2025-12-02 23:10 | 🎯 Tenant: ixtif.com | 👤 Güncelleme: Subscription senaryosu eklendi

🔥 YENİ KRİTİK ÖZELLİK

Sepet İçeriğine Göre Dinamik Adres Sistemi

  • Sadece Subscription: Teslimat adresi GİZLİ, sadece fatura adresi
  • Sadece Shop Product: Hem teslimat hem fatura adresi
  • Karışık (Shop + Subscription): Hem teslimat hem fatura adresi

📦 3 Farklı Senaryo

Sepet İçeriği $requiresShipping Teslimat Adresi Fatura Adresi "Teslimat ile Aynı" Toggle
Sadece Subscription
(Dijital ürün)
false ❌ GİZLİ ✅ GÖSTERİLİR ❌ GİZLİ
Sadece Shop Product
(Fiziksel ürün)
true ✅ GÖSTERİLİR ✅ GÖSTERİLİR ✅ GÖSTERİLİR
Karışık
(Shop + Subscription)
true ✅ GÖSTERİLİR ✅ GÖSTERİLİR ✅ GÖSTERİLİR

🎨 Görsel Mockup - 3 Senaryo

Senaryo 1: Sadece Subscription (Dijital Ürün)

Teslimat Adresi - Bu bölüm tamamen gizli


✅ Fatura Adresi (Direkt Gösterilir)

Ev - asdasdas, Merkez / Adıyaman

ℹ️ "Teslimat ile aynı" toggle'ı yok çünkü teslimat yok!

Senaryo 2: Sadece Shop Product (Fiziksel Ürün)

✅ Teslimat Adresi

Ev - asdasdas, Merkez / Adıyaman

(Toggle açıksa fatura adresi bölümü gizli)

Senaryo 3: Karışık (Shop + Subscription)

📦 Sepet: 2 Forklift + 1 Premium Subscription

✅ Teslimat Adresi (Fiziksel ürünler için)

İş - Fabrika, OSB / Ankara

✅ Fatura Adresi

Şirket - Muhasebe, Merkez / İstanbul

❌ Mevcut Sorunlar (v1'den devam)

1. Fatura Adresi Seçimi - Radio Gibi Çalışmıyor

Sorun: 2 fatura adresi var, yeni ekleyince ikisi de seçili görünüyor.

2. Form Bağımsızlığı - Yeni Fatura Adresi Eklerken Teslimat Kilitleniyor

Sorun: Yeni fatura adresi formunu açınca teslimat adresini değiştiremiyorum.

3. Subscription Senaryosu - Toggle ve Teslimat Adresi Hala Gösteriliyor

Sorun: $requiresShipping = false olduğunda teslimat adresi ve toggle gizlenmiyor.

✅ Çözüm - Tüm Senaryolar İçin

1. Radio Button Mantığı (v1'den)

  • CSS class binding düzelt
  • Sadece 1 adres seçilebilir

2. Form Bağımsızlığı (v1'den)

  • State'ler birbirini etkilemez

3. Dinamik Adres Bölümü (YENİ)

Blade Template:

@if($requiresShipping)
{{-- Teslimat Adresi Bölümü --}}
{{-- "Teslimat ile Aynı" Toggle --}}
@endif

@if(!$requiresShipping)
{{-- Fatura Adresi (Toggle olmadan direkt) --}}
@else
{{-- Fatura Adresi (Toggle ile) --}}
@endif

📋 Uygulama Adımları (v2 Güncel)

Adım 1: CSS Class Düzeltme (v1)

Border ve background class'larını dinamik yap

Adım 2: Form Bağımsızlığı (v1)

State'leri birbirinden ayır

Adım 3: Subscription Senaryosu (YENİ)

Blade'de kontrol ekle:

  • Teslimat adresi bölümü: @if($requiresShipping)
  • "Teslimat ile aynı" toggle: @if($requiresShipping)
  • Fatura adresi başlığı değişir: "Fatura Adresi" (dijitalde) vs "Fatura Adresi (opsiyonel)" (fiziksel)

Adım 4: Alpine.js State Güncelleme (YENİ)

Dijital ürünlerde:

showBillingAddressForm: {{ !$requiresShipping ? 'true' : 'false' }}

→ Fatura adresi direkt açık başlasın