🎨 İxtif Homepage → Widget Dönüşüm Planı

📅 Tarih: 2025-12-04 🎯 Sayfa: ixtif.com/homepage 🔧 İşlem: Widget'lara Bölme

📊 Analiz Özeti

7
Toplam Widget
2
File Widget
2
Module Widget
3
Custom Widget
757
Satır Kod

📄 Mevcut Durum - Homepage Analizi

# Section Satır Durum
1 Hero Section 10-91 (81 satır) Hardcoded
2 Featured Products 93-206 (113 satır) Module Entegrasyon
3 Service Categories 208-266 (58 satır) Hardcoded
4 About Section 268-321 (53 satır) Hardcoded
5 Blog Section 323-436 (113 satır) Module Entegrasyon
6 Contact Section 549-620 (71 satır) Hardcoded
7 Quick View Modal 438-547 (109 satır) Alpine.js Component

Toplam: 598 satır görünüm kodu + 159 satır CSS/JS = 757 satır

🎯 Widget Dönüşüm Stratejisi

🔴 Öncelik 1 FILE Widget #1: İxtif Hero Widget

Kaynak: Satır 10-91 (Hero Section)

Açıklama: "TÜRKİYE'NİN İSTİF PAZARI" başlık, açıklama, özellikler ve hero image

⚙️ Settings Schema
[
  { "name": "title_line1", "type": "text", "label": "Başlık 1. Satır", "default": "TÜRKİYE'NİN" },
  { "name": "title_line2", "type": "text", "label": "Başlık 2. Satır", "default": "İSTİF PAZARI" },
  { "name": "description", "type": "textarea", "label": "Açıklama" },
  { "name": "cta_text", "type": "text", "label": "Buton Metni", "default": "Ürünleri İncele" },
  { "name": "cta_url", "type": "url", "label": "Buton Linki" },
  { "name": "hero_image", "type": "image", "label": "Hero Görseli" }
]
📦 Item Schema (Özellikler)
[
  { "name": "icon", "type": "text", "label": "Font Awesome Icon", "placeholder": "fa-boxes-stacked" },
  { "name": "title", "type": "text", "label": "Başlık", "required": true },
  { "name": "subtitle", "type": "text", "label": "Alt Başlık" },
  { "name": "is_active", "type": "switch", "label": "Durum" }
]

🛠️ Uygulama Planı

  1. File widget oluştur: resources/views/blocks/hero/ixtif-hero/view.blade.php
  2. Admin panelden widget kaydı oluştur (Widget tablosuna)
  3. TenantWidget oluştur + settings ayarla
  4. WidgetItem'lar ekle (Güçlü Stok, Garantili Ürün, Profesyonel Ekip, Hızlı Teslimat)
  5. Homepage'de kullan: @widget(1)

🔴 Öncelik 1 MODULE Widget #2: Shop Featured Products Widget

Kaynak: Satır 93-206 (Featured Products Section)

Açıklama: Homepage'de öne çıkan ürünleri gösterir. Grid/List view toggle

⚙️ Settings Schema
[
  { "name": "title", "type": "text", "label": "Section Başlığı", "default": "Efsane Yılsonu Fırsatları" },
  { "name": "limit", "type": "number", "label": "Ürün Sayısı", "default": 8 },
  { "name": "filter", "type": "select", "label": "Filtre", "options": ["featured", "recent", "bestseller"] },
  { "name": "show_view_toggle", "type": "switch", "label": "Grid/List Toggle Göster", "default": true },
  { "name": "default_view", "type": "select", "label": "Varsayılan Görünüm", "options": ["grid", "list"] }
]
📊 Module Data Source
Konum: Modules/WidgetManagement/resources/views/blocks/modules/shop/
Class: ShopModules::class
Method: getFeaturedProducts($settings)

// Shop modülünden veri çek
return ShopProduct::where('show_on_homepage', true)
    ->active()
    ->take($settings['limit'] ?? 8)
    ->get();

🛠️ Uygulama Planı

  1. ShopModules.php oluştur (data source)
  2. Module widget view: modules/shop/featured/view.blade.php
  3. x-ixtif.product-card component'ini widget view içinde kullan
  4. Alpine.js view toggle mantığını koru
  5. Widget kaydı oluştur (type=module, data_source=shop/featured)

🟡 Öncelik 2 CUSTOM Widget #3: Service Categories Widget

Kaynak: Satır 208-266 (Service Categories Section)

Açıklama: 4 hizmet kategorisi kartı (Satın Alma, Kiralama, Yedek Parça, Teknik Servis)

📦 Item Schema (Hizmet Kartları)
[
  { "name": "title", "type": "text", "label": "Başlık", "required": true },
  { "name": "description", "type": "textarea", "label": "Açıklama" },
  { "name": "icon", "type": "text", "label": "Font Awesome Icon", "placeholder": "fa-shopping-cart" },
  { "name": "url", "type": "url", "label": "Link URL" },
  { "name": "icon_color", "type": "color", "label": "Icon Rengi", "default": "#3b82f6" },
  { "name": "animation", "type": "select", "label": "Hover Animasyon", "options": ["slide-x", "swing", "spin", "rotate-wiggle"] },
  { "name": "is_active", "type": "switch", "label": "Durum" }
]

🛠️ Uygulama Planı

  1. Custom widget oluştur (Admin panelden)
  2. HTML template: Grid 4-column layout + hover efektler
  3. Handlebars template: {{#each items}}...{{/each}}
  4. 4 item ekle (Satın Alma, Kiralama, Yedek Parça, Teknik Servis)
  5. CSS animasyonları ekle (slide-x, swing, spin, rotate-wiggle)

🟡 Öncelik 2 FILE Widget #4: İxtif About Widget

Kaynak: Satır 268-321 (About Section)

Açıklama: "Depoda, Üretimde, Dağıtımda" hakkında bölümü + görsel

⚙️ Settings Schema
[
  { "name": "title", "type": "text", "label": "Başlık", "default": "Depoda, Üretimde, Dağıtımda" },
  { "name": "paragraph1", "type": "textarea", "label": "1. Paragraf" },
  { "name": "paragraph2", "type": "textarea", "label": "2. Paragraf" },
  { "name": "image", "type": "image", "label": "Görsel" },
  { "name": "cta_text", "type": "text", "label": "Buton Metni", "default": "Hakkımızda Daha Fazla" },
  { "name": "cta_url", "type": "url", "label": "Buton Linki" }
]
📦 Item Schema (Özellikler)
[
  { "name": "icon", "type": "text", "label": "Font Awesome Icon" },
  { "name": "title", "type": "text", "label": "Başlık", "required": true },
  { "name": "animation", "type": "select", "label": "Hover Animasyon" },
  { "name": "is_active", "type": "switch", "label": "Durum" }
]

🛠️ Uygulama Planı

  1. File widget: resources/views/blocks/about/ixtif-about/view.blade.php
  2. Ken Burns + Parallax effect JS'i widget içine embed et
  3. 3 özellik item'ı ekle (Hızlı Teslimat, Garanti Güvencesi, Teknik Servis)
  4. Settings'ten içerik ve görsel çekilsin

🔴 Öncelik 1 MODULE Widget #5: Blog Latest Posts Widget

Kaynak: Satır 323-436 (Blog Section)

Açıklama: "iXtif Akademi" son blog yazıları. Media fallback + favori butonu

⚙️ Settings Schema
[
  { "name": "title", "type": "text", "label": "Section Başlığı", "default": "iXtif Akademi" },
  { "name": "limit", "type": "number", "label": "Blog Sayısı", "default": 6 },
  { "name": "filter", "type": "select", "label": "Filtre", "options": ["latest", "featured", "popular"] },
  { "name": "show_favorite", "type": "switch", "label": "Favori Butonu Göster", "default": true },
  { "name": "show_read_time", "type": "switch", "label": "Okuma Süresi Göster", "default": true }
]
📊 Module Data Source
Konum: Modules/WidgetManagement/resources/views/blocks/modules/blog/
Class: BlogModules::class
Method: getLatestPosts($settings)

// Blog modülünden veri çek
return Blog::published()
    ->with('media')
    ->whereHas('media', function($q) { ... })
    ->orderBy('published_at', 'desc')
    ->take($settings['limit'] ?? 6)
    ->get();

🛠️ Uygulama Planı

  1. BlogModules.php oluştur (data source)
  2. Module widget view: modules/blog/latest/view.blade.php
  3. Media fallback helper kullan (getFirstMediaWithFallback)
  4. Favori butonu Alpine.js component'ini koruyarak kullan
  5. Glass effect + floating stats tasarımı koru

🟡 Öncelik 2 CUSTOM Widget #6: Contact Section Widget

Kaynak: Satır 549-620 (Contact Section)

Açıklama: 4 iletişim kartı (Telefon, WhatsApp, E-posta, Canlı Destek)

📦 Item Schema (İletişim Kartları)
[
  { "name": "type", "type": "select", "label": "Tip", "options": ["phone", "whatsapp", "email", "chat"] },
  { "name": "title", "type": "text", "label": "Başlık", "required": true },
  { "name": "subtitle", "type": "text", "label": "Alt Başlık" },
  { "name": "value", "type": "text", "label": "Değer", "placeholder": "0216 755 3 555" },
  { "name": "icon", "type": "text", "label": "Font Awesome Icon" },
  { "name": "url", "type": "url", "label": "Link URL" },
  { "name": "gradient_from", "type": "color", "label": "Gradient Başlangıç" },
  { "name": "gradient_to", "type": "color", "label": "Gradient Bitiş" },
  { "name": "is_active", "type": "switch", "label": "Durum" }
]
🔗 Settings Entegrasyonu
// Widget settings'ten değil, Settings modülünden çek
'value' => setting('site_phone') // "0216 755 3 555"
'value' => setting('site_whatsapp') // "0501 005 67 58"
'value' => setting('site_email') // "info@ixtif.com"

🛠️ Uygulama Planı

  1. Custom widget oluştur (Admin panelden)
  2. 4-column responsive grid layout
  3. Settings helper kullan (site_phone, site_whatsapp, site_email)
  4. Canlı Destek için Alpine.js AI Chat store entegrasyonu
  5. Gradient background + hover rotate animasyonu

🔵 Öncelik 3 COMPONENT Widget #7: Product Quick View Modal

Kaynak: Satır 438-547 (Quick View Modal)

Açıklama: Ürün hızlı görüntüleme modalı. Alpine.js component olarak kalabilir.

💡 Alternatif Yaklaşım

Widget'a dönüştürme gerekmeyebilir. Bu modal Shop modülüne ait bir component. Eğer widget yapılacaksa:

  1. Shop modülüne taşı (Widget değil, Module Component)
  2. Layout'a global include olarak ekle
  3. x-ixtif.product-card component'inden tetiklensin

📊 Önce & Sonra Karşılaştırma

❌ ÖNCE (Hardcoded)
// homepage.blade.php (757 satır)
<section>...</section> // Hero
<section>...</section> // Products
<section>...</section> // Services
<section>...</section> // About
<section>...</section> // Blog
<section>...</section> // Contact
<div>...</div> // Modal

Sorunlar:
- Hardcoded içerikler
- Tenant-aware değil
- Yeniden kullanılamaz
- Bakım zor
✅ SONRA (Widget Bazlı)
// homepage.blade.php (7 satır!)
@widget(1) // Hero
@widget(2) // Featured Products
@widget(3) // Service Categories
@widget(4) // About
@widget(5) // Latest Blogs
@widget(6) // Contact
{{-- Modal: Global component --}}

Avantajlar:
- Admin panelden yönetilebilir
- Tenant-aware (her tenant özelleştirebilir)
- Yeniden kullanılabilir
- Kolay bakım
- Settings entegrasyonu
- Shortcode desteği

🗺️ Uygulama Yol Haritası

Aşama 1: Altyapı Hazırlığı (30 dk)

  1. Shop module widget klasörü oluştur (modules/shop/)
  2. Blog module widget klasörü oluştur (modules/blog/)
  3. ShopModules.php data source class oluştur
  4. BlogModules.php data source class oluştur

Aşama 2: Öncelikli Widget'lar (2 saat)

  1. ✅ Widget #1: İxtif Hero Widget (File) - 30 dk
  2. ✅ Widget #2: Shop Featured Products (Module) - 45 dk
  3. ✅ Widget #5: Blog Latest Posts (Module) - 45 dk

Aşama 3: İkincil Widget'lar (1.5 saat)

  1. ✅ Widget #3: Service Categories (Custom) - 30 dk
  2. ✅ Widget #4: İxtif About (File) - 30 dk
  3. ✅ Widget #6: Contact Section (Custom) - 30 dk

Aşama 4: Homepage Güncelleme (30 dk)

  1. homepage.blade.php dosyasını sadeleştir (757 satır → 7 satır)
  2. Widget directive'lerini ekle (@widget(1), @widget(2), ...)
  3. CSS/JS'i temizle (widget'lara taşındı)
  4. Test et (ixtif.com homepage)

Aşama 5: Test & Optimizasyon (30 dk)

  1. Tüm widget'ları homepage'de test et
  2. Admin panelden ayarları test et
  3. Mobile responsive kontrol
  4. Performance ölçümü (sayfa yükleme hızı)
  5. Cache temizle & opcache reset

Toplam Süre: ~4.5 saat

⚙️ Settings Entegrasyonu

📝 Yeni Settings (Oluşturulacak)

Setting Key Değer (İxtif) Widget
homepage_hero_title_line1 TÜRKİYE'NİN Widget #1 (Hero)
homepage_hero_title_line2 İSTİF PAZARI Widget #1 (Hero)
homepage_hero_description Profesyonel istif çözümleri... Widget #1 (Hero)
homepage_hero_image /storage/tenant2/4/hero.png Widget #1 (Hero)
about_section_title Depoda, Üretimde, Dağıtımda Widget #4 (About)
about_section_paragraph1 Depoda, üretimde, dağıtımda... Widget #4 (About)
about_section_image /storage/tenant2/5/super-hero.jpg Widget #4 (About)

Mevcut Settings (Kullanılacak):

  • site_phone → "0216 755 3 555" (Widget #6)
  • site_whatsapp → "0501 005 67 58" (Widget #6)
  • site_email → "info@ixtif.com" (Widget #6)

✅ Sonuç

🎯 Hedefler

  • ✅ 757 satırlık homepage → 7 satıra indirme
  • ✅ Hardcoded içerikleri widget'lara taşıma
  • ✅ Tenant-aware yapı (her tenant özelleştirebilir)
  • ✅ Admin panelden yönetilebilir içerik
  • ✅ Settings entegrasyonu
  • ✅ Yeniden kullanılabilir widget'lar

💎 Faydalar

  • ✅ Bakım kolaylığı: Widget'lar bağımsız güncellenir
  • ✅ Esneklik: Widget sırası değiştirilebilir
  • ✅ Yeniden kullanım: Widget'lar diğer sayfalarda da kullanılabilir
  • ✅ Tenant-aware: Muzibu için farklı widget'lar eklenebilir
  • ✅ Admin kontrol: Kod yazmadan içerik yönetimi
  • ✅ Performance: Widget cache sistemi

🚀 Sonraki Adımlar

  1. Bu planı onayla
  2. Aşama 1'den başla (Altyapı hazırlığı)
  3. Widget'ları sırayla oluştur (Öncelik 1 → 2 → 3)
  4. Homepage'i güncelle
  5. Test et & yayınla