🎯 Studio FILE Widget Sorunu v2

📅 Tarih: 2025-12-04 | 🎯 Konu: Dinamik vs Statik - Studio'nun Gerçek Mantığı | ⚡ KRİTİK BİLGİ

⚡ Studio Nasıl Çalışıyor? (KRİTİK!)

EN ÖNEMLİ BİLGİ: Studio, widget'ları AJAX/Livewire ile dinamik yükler, ama kaydet deyince statik HTML'e çevirir!

1️⃣ Studio Editörde (Dinamik)

  • Widget AJAX/Livewire ile yükleniyor
  • Gerçek veriler gösteriliyor
  • Kullanıcı düzenliyor, değiştiriyor
  • Her değişiklikte widget yeniden render ediliyor
<!-- Studio'da dinamik widget --> <div class="widget-embed" data-tenant-widget-id="5"> <!-- AJAX ile yükleniyor --> <script> fetch('/admin/widgetmanagement/preview/embed/5') .then(html => container.innerHTML = html) </script> </div>
⬇️ KAYDET BUTONU ⬇️

2️⃣ Kaydet (Dinamik → Statik Dönüşüm)

  • Studio, sayfanın o anki HALİNİ alıyor
  • Tüm widget'lar render edilmiş HTML olarak kaydediliyor
  • AJAX/Livewire kodları kaldırılıyor
  • Sadece statik HTML database'e yazılıyor
<!-- Kaydedilen statik HTML --> <section class="hero"> <h1>Endüstriyel Ekipman Çözümleri</h1> <p>Forklift, transpalet ve endüstriyel ekipman...</p> <a href="/urunler">Hemen Keşfet</a> </section>
⬇️ SİTE'DE GÖSTER ⬇️

3️⃣ Site'de (Statik HTML)

  • Database'den statik HTML çekiliyor
  • Direkt ekrana basılıyor
  • Artık AJAX/Livewire yok
  • Sabit, değişmez HTML
<!-- Site'de gösterilen --> {{ $page->content }} <!-- Statik HTML database'den -->

🔥 FILE Widget İçin Sorun Ne?

✅ MODULE Widget (Çalışıyor)
  • Studio'da: AJAX ile yükleniyor
  • Backend'den gerçek veri çekiyor
  • Kaydet: Render edilmiş HTML kaydediliyor
  • Site'de: Statik HTML gösteriliyor
❌ FILE Widget (Sorunlu)
  • Studio'da: Boş settings ile yükleniyor
  • Widget içeriği boş görünüyor
  • Kaydet: BOŞ HTML kaydediliyor
  • Site'de: BOŞ HTML gösteriliyor

Ana Sorun

FILE widget Studio'da yüklenirken ['settings' => []] boş array ile render ediliyor.

Settings.json dosyası okunmuyor, default değerler yüklenmiyor.

Sonuç: Widget boş görünüyor → Kaydet deyince boş HTML kaydediliyor → Site'de de boş gösteriliyor!

💡 Hero Widget Örneği - Adım Adım

1️⃣ Studio'da Hero Widget Ekleme

<!-- Kullanıcı Studio'dan Hero widget'ı drag-drop ediyor --> // BlockService.php case 'file': $viewPath = 'widgetmanagement::blocks.' . $widget->file_path; // ❌ SORUN: Boş settings! $content = View::make($viewPath, ['settings' => []])->render(); // Hero view.blade.php <h1> @if(!empty($settings['title_line1'])) <!-- Boş! --> <span>{{ $settings['title_line1'] }}</span> <!-- Gösterilmiyor --> @endif </h1> // Sonuç: Boş bir hero bloku gösteriliyor!

2️⃣ Kullanıcı Kaydet Deyince

// Studio, sayfanın HALİNİ alıyor: <section class="hero"> <!-- Boş! Çünkü settings boştu --> </section> // Bu BOŞ HTML database'e kaydediliyor

3️⃣ Site'de Gösterim

// Database'den çekilen: <section class="hero"> <!-- Boş! --> </section> // Kullanıcı boş hero görüyor!

✅ Çözüm: FILE Widget'ı Nasıl Düzeltmeliyiz?

Çözüm 1: BlockService'de Settings Yükle

FILE widget render edilirken settings.json'u oku ve default değerleri yükle

case 'file': if (!empty($widget->file_path)) { $viewPath = 'widgetmanagement::blocks.' . $widget->file_path; // ✅ Settings.json dosyasını oku $settingsPath = base_path('Modules/WidgetManagement/resources/views/blocks/' . dirname($widget->file_path) . '/settings.json'); $settings = []; if (file_exists($settingsPath)) { $settingsSchema = json_decode(file_get_contents($settingsPath), true); // Default değerleri al foreach ($settingsSchema as $key => $field) { $settings[$key] = $field['default'] ?? ''; } } // ✅ Gerçek settings ile render et if (View::exists($viewPath)) { $content = View::make($viewPath, ['settings' => $settings])->render(); } } break;

Sonuç: Studio'da hero widget default değerlerle gösterilir!

Çözüm 2: Studio'da Settings Düzenleme

Kullanıcı Studio'da widget'ı seçince → Settings editor göster

  • GrapesJS trait panel kullan
  • Settings.json field'larını dinamik form olarak göster
  • Kullanıcı değiştirince widget'ı yeniden render et
  • Kaydet deyince güncel değerlerle HTML oluştur
// GrapesJS Component tanımında editor.DomComponents.addType('file-widget', { model: { defaults: { traits: [ { type: 'text', label: 'Ana Başlık (1. Satır)', name: 'title_line1', changeProp: 1 }, { type: 'text', label: 'Ana Başlık (2. Satır)', name: 'title_line2', changeProp: 1 }, // ... diğer settings.json field'ları ] } } });

Sonuç: Kullanıcı Studio'da settings'leri düzenleyebilir!

Çözüm 3: Kaydet Sırasında Güncel Değerlerle Render

Save butonu tıklanınca:

  • Widget'ın trait değerlerini al
  • Bu değerlerle widget'ı yeniden render et
  • Render edilmiş HTML'i database'e kaydet
// Studio save sırasında const widgets = editor.getComponents().find('.file-widget'); widgets.forEach(widget => { const traits = widget.getAttributes(); // Widget'ı traits ile yeniden render et fetch('/admin/studio/api/render-widget', { method: 'POST', body: JSON.stringify({ widget_id: widget.get('widget-id'), settings: traits }) }) .then(html => { // Render edilmiş HTML'i widget'a yerleştir widget.components(html); }); });

Sonuç: Güncel değerlerle render edilmiş HTML kaydedilir!

🔄 Doğru Akış Nasıl Olmalı?

1️⃣ Studio'da Widget Yükleme

  • FILE widget drag-drop edilince
  • Settings.json dosyası okunur
  • Default değerler yüklenir
  • Widget düzgün görünür
⬇️

2️⃣ Kullanıcı Settings Düzenler

  • Widget seçilince trait panel açılır
  • Settings field'ları form olarak gösterilir
  • Kullanıcı değerleri değiştirir
  • Widget anında güncellenir
⬇️

3️⃣ Kaydet

  • Widget'ların güncel trait değerleri alınır
  • Her widget bu değerlerle render edilir
  • Render edilmiş HTML database'e kaydedilir
⬇️

4️⃣ Site'de Gösterim

  • Database'den statik HTML çekilir
  • Güncel değerlerle render edilmiş içerik gösterilir
  • Kullanıcı doğru içeriği görür

🎯 Özet

Kritik Bilgi: Studio, widget'ları AJAX/Livewire ile dinamik yükler ama kaydet deyince statik HTML'e çevirir. FILE widget'lar için settings.json mutlaka okunmalı ve default değerlerle render edilmeli!

Yapılacaklar:

  • 1. BlockService → Settings Yükleme: FILE widget render edilirken settings.json oku
  • 2. Studio → Settings Editor: GrapesJS trait panel ile settings düzenleme ekle
  • 3. Save → Güncel Render: Kaydet sırasında widget'ı güncel değerlerle render et
  • 4. Boş Widget'ları Tamamla: Hero-1, simple, contact-form için settings.json oluştur

Bu şekilde hem Studio'da düzgün görünür, hem kullanıcı düzenleyebilir, hem de site'de doğru içerik gösterilir.