📋 Genel Bakış
Hedef: 81 satırlık hardcoded Hero bölümünü dinamik, yeniden kullanılabilir bir widget sistemine dönüştürmek.
Yaklaşım: FILE tipi widget kullanarak Blade view oluşturacağız. Handlebars template engine ile tüm içerik dinamik hale gelecek.
Sonuç: homepage.blade.php içinde sadece @widget('hero') çağrısı kalacak. Tüm içerik admin panelden yönetilebilecek.
81
Satır Kod
8
Settings Alanı
4
Widget Item
1
Blade Template
📂 Dosya Yapısı
Hero widget için oluşturulacak dosyalar ve konumları:
1. Widget Blade View
Modules/WidgetManagement/resources/views/blocks/hero/ixtif-hero/view.blade.php
Ana Blade template dosyası. Tüm HTML yapısını ve Handlebars değişkenlerini içerir.
2. Widget CSS (Opsiyonel)
Modules/WidgetManagement/resources/views/blocks/hero/ixtif-hero/style.css
Widget-specific CSS. Gradient animasyon ve özel stiller buraya gelecek.
3. Widget Thumbnail
Modules/WidgetManagement/resources/views/blocks/hero/ixtif-hero/thumbnail.jpg
Admin panelde widget seçerken gösterilecek önizleme görseli.
⚠️ Klasör İsimlendirme Standardı
blocks/[kategori]/[widget-slug]/ formatı kullanılır. Örnek: blocks/hero/ixtif-hero/
🗄️ Database Yapısı
Hero widget için 3 tablo kullanılacak:
1. Widget Tablosu (Central Database)
Ana Widget Kaydı
| Alan |
Değer |
| name |
Hero - İxtif Ana Banner |
| slug |
hero |
| type |
FILE |
| file_path |
blocks.hero.ixtif-hero.view |
| has_items |
true (4 feature kartı için) |
| is_core |
true (core widget) |
2. TenantWidget Tablosu (Tenant Database)
Tenant-Specific Instance
Her tenant kendi Hero widget ayarlarını buradan yönetir.
| Alan |
Açıklama |
| widget_id |
Central Widget ID (foreign key) |
| settings |
JSON - title, description, CTA button, hero image |
| order |
1 (homepage'de ilk sırada) |
| is_active |
true |
3. WidgetItem Tablosu (Tenant Database)
Feature Kartları
4 adet WidgetItem kaydı oluşturulacak (Güçlü Stok, Garantili Ürün, Profesyonel Ekip, Hızlı Teslimat)
| Alan |
Örnek Değer |
| tenant_widget_id |
Foreign key |
| title |
Güçlü Stok |
| content |
JSON: {icon, subtitle} |
| order |
1, 2, 3, 4 |
| is_active |
true |
🔍 İçerik Parçalama Analizi
81 satırlık Hero bölümünü 4 ana parçaya ayırıyoruz:
Parça 1: Başlık ve Açıklama (Lines 16-28)
Hardcoded İçerik:
- Başlık Satır 1: "TÜRKİYE'NİN"
- Başlık Satır 2: "İSTİF PAZARI"
- Açıklama: "Profesyonel istif çözümleri, güçlü stok ve hızlı teslimat ile işletmenizin güvenilir ortağı"
Dinamik Dönüşüm:
- {{widget.settings.title_line1}}
- {{widget.settings.title_line2}}
- {{widget.settings.description}}
Parça 2: CTA Button (Lines 31-36)
Hardcoded İçerik:
- Button Text: "Ürünleri İncele"
- Button URL: route('shop.index')
- Button Icon: fa-shopping-cart
Dinamik Dönüşüm:
- {{widget.settings.cta_text}}
- {{widget.settings.cta_url}}
- {{widget.settings.cta_icon}}
Parça 3: Feature Kartları (Lines 39-76)
Hardcoded İçerik (4 Adet Kart):
- Kart 1: Güçlü Stok / Zengin ürün çeşidi / fa-boxes-stacked
- Kart 2: Garantili Ürün / Teknik servis / fa-certificate
- Kart 3: Profesyonel Ekip / Uzman danışmanlık / fa-award
- Kart 4: Hızlı Teslimat / Aynı gün kargo / fa-truck-fast
Dinamik Dönüşüm (Loop):
{{#each items}} ... {{/each}} kullanarak 4 WidgetItem'dan veri çekecek
Parça 4: Hero Görsel (Lines 80-87)
Hardcoded İçerik:
- Görsel URL: https://ixtif.com/storage/tenant2/4/hero.png
- Alt Text: "iXtif İstif Makinesi - Forklift"
Dinamik Dönüşüm:
- {{widget.settings.hero_image}}
- {{widget.settings.hero_image_alt}}
⚙️ Settings JSON Yapısı
TenantWidget tablosundaki settings sütununa kaydedilecek JSON:
| Alan Adı |
Tip |
İxtif Değeri |
Admin Form Tipi |
| title_line1 |
string |
TÜRKİYE'NİN |
text input |
| title_line2 |
string |
İSTİF PAZARI |
text input |
| description |
text |
Profesyonel istif çözümleri... |
textarea |
| cta_text |
string |
Ürünleri İncele |
text input |
| cta_url |
string |
/shop |
url input |
| cta_icon |
string |
fa-light fa-shopping-cart |
icon picker |
| hero_image |
string |
storage/tenant2/4/hero.png |
media picker |
| hero_image_alt |
string |
iXtif İstif Makinesi - Forklift |
text input |
✅ Form Builder Otomatiği
Bu settings schema Widget tablosundaki settings_schema alanına JSON olarak kaydedilir. Admin panel otomatik form oluşturur!
📦 Items JSON Yapısı
Her feature kartı için 1 WidgetItem kaydı oluşturulacak:
| Order |
Title |
Content JSON |
| 1 |
Güçlü Stok |
{icon: "fa-boxes-stacked", subtitle: "Zengin ürün çeşidi"} |
| 2 |
Garantili Ürün |
{icon: "fa-certificate", subtitle: "Teknik servis"} |
| 3 |
Profesyonel Ekip |
{icon: "fa-award", subtitle: "Uzman danışmanlık"} |
| 4 |
Hızlı Teslimat |
{icon: "fa-truck-fast", subtitle: "Aynı gün kargo"} |
Item Schema (Widget Tablosu)
Widget tablosundaki item_schema alanına şu JSON kaydedilecek:
- title - Feature başlığı (string, required)
- icon - FontAwesome icon class (string, icon-picker)
- subtitle - Alt başlık (string)
- is_active - Aktif/Pasif (boolean)
🔄 Handlebars Variables Mapping
Hardcoded içerik → Handlebars değişken dönüşümü:
| Blade View Yeri |
Hardcoded Değer |
Handlebars Değişken |
| Line 18 |
TÜRKİYE'NİN |
{{widget.settings.title_line1}} |
| Line 21 |
İSTİF PAZARI |
{{widget.settings.title_line2}} |
| Line 27 |
Profesyonel istif çözümleri... |
{{widget.settings.description}} |
| Line 32 |
route('shop.index') |
{{widget.settings.cta_url}} |
| Line 34 |
Ürünleri İncele |
{{widget.settings.cta_text}} |
| Line 42 |
fa-boxes-stacked |
{{this.content.icon}} (loop içinde) |
| Line 45 |
Güçlü Stok |
{{this.title}} (loop içinde) |
| Line 46 |
Zengin ürün çeşidi |
{{this.content.subtitle}} (loop içinde) |
| Line 82 |
hero.png |
{{widget.settings.hero_image}} |
| Line 83 |
iXtif İstif Makinesi - Forklift |
{{widget.settings.hero_image_alt}} |
⚠️ Loop Yapısı
Feature kartları için {{#each items}} kullanacağız. Items array içinde {{this.title}} ve {{this.content.icon}} ile verilere erişeceğiz.
🎨 CSS & JS Extraction
Hero'da özel CSS/JS var mı, neler widget'e dahil edilmeli?
CSS İhtiyaçları
Gradient Animasyon
Başlık gradient animasyonu için özel CSS gerekli (.gradient-animate class)
- Gradient background tanımı
- Animation keyframes
- Responsive breakpoints
Karar: Bu CSS'i style.css dosyasına taşıyoruz veya widget'in content_css alanına kaydediyoruz.
JavaScript İhtiyaçları
Alpine.js Dependency
Hero bölümünde Alpine.js kullanımı YOK. CTA button route() helper kullanıyor, bu Blade tarafında çözülüyor.
Karar: JS dosyası gerekmez. Handlebars cta_url ile route değeri direkt basılır.
✅ Sonuç
Sadece gradient animasyon CSS'i widget-specific olarak tanımlanacak. JS gerekmez.
🚀 Migration Stratejisi
Homepage.blade.php'deki 81 satırı nasıl widget çağrısına dönüştüreceğiz?
-
Widget & TenantWidget Oluştur
Admin panel üzerinden Hero widget'i oluştur, İxtif tenant'ı için aktif et.
-
Settings Doldur
Admin panelden title_line1, title_line2, description vb. tüm settings değerlerini gir.
-
WidgetItems Ekle
4 feature kartı için WidgetItem kayıtları oluştur (icon, title, subtitle).
-
Blade View Oluştur
blocks/hero/ixtif-hero/view.blade.php dosyasını oluştur, Handlebars variables ile doldur.
-
Homepage.blade.php Güncelle
Lines 10-91'i sil, yerine @widget('hero') ekle.
-
Cache Temizle & Test
View cache temizle, homepage'i aç, Hero widget'in doğru render olduğunu kontrol et.
-
Responsive Test
Mobil, tablet, desktop görünümlerini test et. Grid yapısı bozulmamalı.
-
Git Commit
Değişiklikleri commit et: "feat: Hero widget implementation"
⚠️ Rollback Planı
Eğer widget çalışmazsa, homepage.blade.php'nin eski halini git'ten geri çekebiliriz. Bu yüzden önce git checkpoint yapacağız.
📊 Before / After Karşılaştırması
Before (Şu An)
- homepage.blade.php: 757 satır (81 satır Hero)
- Hardcoded içerik (başlık, açıklama, CTA, feature kartları)
- Değişiklik için Blade dosyasını manuel düzenlemek gerekir
- Tenant-aware değil (her tenant için ayrı dosya gerekir)
- Yeniden kullanılamaz
After (Widget Sonrası)
- homepage.blade.php: 676 satır (1 satır widget çağrısı)
- Dinamik içerik (admin panelden yönetilir)
- Değişiklik için sadece admin panel ayarlarını güncelle
- Tenant-aware (her tenant kendi ayarlarını yönetir)
- Yeniden kullanılabilir (başka sayfalarda da kullanılabilir)
- Hero widget diğer tenant'larda da kullanılabilir (farklı içerikle)
✅ Test Checklist
Widget oluşturulduktan sonra şunları test edeceğiz:
- Hero widget admin panelde görünüyor mu?
- Settings formu doğru açılıyor mu?
- Settings alanları kayıt ediliyor mu?
- WidgetItems ekleme/düzenleme/silme çalışıyor mu?
- Homepage'de Hero bölümü doğru render oluyor mu?
- Başlık gradient animasyonu çalışıyor mu?
- CTA button doğru route'a yönlendiriyor mu?
- 4 feature kartı doğru sırada görünüyor mu?
- Hero görseli yükleniyor mu?
- Responsive görünüm bozulmuyor mu? (mobil, tablet, desktop)
- Dark mode geçişi düzgün çalışıyor mu?
- Handlebars değişkenleri doğru parse ediliyor mu?
- Cache sonrası değişiklikler yansıyor mu?
- Widget başka bir sayfada kullanılabiliyor mu?
- Widget deaktif edildiğinde homepage'den kalkıyor mu?
⏱️ Tahmini İş Süresi
~20
Dakika - Blade View
~15
Dakika - Database Setup
~10
Dakika - Settings/Items
~15
Dakika - Test & Debug
Toplam: ~60 dakika (1 saat)
🎯 Bir Sonraki Adımlar
Onay Sonrası İşlemler
Bu plan onaylandıktan sonra şu sırayla ilerleyeceğiz:
-
Git Checkpoint
homepage.blade.php'nin mevcut halini commit et (rollback için).
-
Blade View Oluştur
ixtif-hero/view.blade.php dosyasını oluştur, Handlebars variables ekle.
-
Widget Kaydı Oluştur
Central database'e Widget kaydı ekle (settings_schema, item_schema dahil).
-
TenantWidget & Items
İxtif tenant'ı için TenantWidget oluştur, 4 WidgetItem ekle.
-
Homepage Güncelle
homepage.blade.php'den 81 satırı sil, @widget('hero') ekle.
-
Test & Deploy
Cache temizle, tüm test checklist'i tamamla, production'a yükle.