⚙️ Hero Widget Settings Tasarımı

📅 Tarih: 2025-12-04 🎯 Tenant: ixtif.com 🔧 Tip: FILE Widget 📍 Admin: Widget Yönetimi

📋 Genel Bakış

Amaç: Hero widget için settings schema'sını tasarlamak ve admin panelde nasıl görüneceğini planlamak.

Yaklaşım: Kademe kademe ilerleyeceğiz. Her adımda test edilebilir, geri alınabilir.

Admin Panel: https://tuufi.com/admin/widgetmanagement/manage

⚙️ Settings Schema (8 Alan)

Hero widget için admin panelde düzenlenebilecek ayarlar:

Alan Adı	Tip	Açıklama	Varsayılan Değer (İxtif)
title_line1	text	Başlık birinci satır	TÜRKİYE'NİN
title_line2	text	Başlık ikinci satır	İSTİF PAZARI
description	textarea	Ana açıklama metni	Profesyonel istif çözümleri, güçlü stok ve hızlı teslimat ile işletmenizin güvenilir ortağı
cta_text	text	CTA button yazısı	Ürünleri İncele
cta_url	url	CTA button linki	/shop
cta_icon	text	CTA button icon (FontAwesome class)	fa-light fa-shopping-cart
hero_image	image	Hero görseli (media picker)	storage/tenant2/4/hero.png
hero_image_alt	text	Hero görsel alt text (SEO)	iXtif İstif Makinesi - Forklift

Settings Schema JSON

{
  "settings_schema": [
    {
      "name": "title_line1",
      "label": "Başlık - 1. Satır",
      "type": "text",
      "required": true,
      "properties": {
        "placeholder": "TÜRKİYE'NİN",
        "help_text": "Hero başlığının ilk satırı"
      }
    },
    {
      "name": "title_line2",
      "label": "Başlık - 2. Satır",
      "type": "text",
      "required": true,
      "properties": {
        "placeholder": "İSTİF PAZARI",
        "help_text": "Hero başlığının ikinci satırı"
      }
    },
    {
      "name": "description",
      "label": "Açıklama",
      "type": "textarea",
      "required": true,
      "properties": {
        "rows": 3,
        "placeholder": "Profesyonel istif çözümleri...",
        "help_text": "Hero bölümünün açıklama metni"
      }
    },
    {
      "name": "cta_text",
      "label": "CTA Button Yazısı",
      "type": "text",
      "required": true,
      "properties": {
        "placeholder": "Ürünleri İncele",
        "help_text": "Call-to-action button metni"
      }
    },
    {
      "name": "cta_url",
      "label": "CTA Button Linki",
      "type": "url",
      "required": true,
      "properties": {
        "placeholder": "/shop",
        "help_text": "Button tıklandığında gidilecek sayfa"
      }
    },
    {
      "name": "cta_icon",
      "label": "CTA Button Icon",
      "type": "text",
      "required": false,
      "properties": {
        "placeholder": "fa-light fa-shopping-cart",
        "help_text": "FontAwesome icon class (opsiyonel)"
      }
    },
    {
      "name": "hero_image",
      "label": "Hero Görseli",
      "type": "image",
      "required": true,
      "properties": {
        "help_text": "Ana hero görseli (önerilen: 1200x800px)"
      }
    },
    {
      "name": "hero_image_alt",
      "label": "Hero Görsel Alt Text",
      "type": "text",
      "required": false,
      "properties": {
        "placeholder": "iXtif İstif Makinesi",
        "help_text": "SEO için görsel açıklaması"
      }
    }
  ]
}

🖥️ Admin Panel Form Görünümü

Settings formu admin panelde şu şekilde görünecek:

📝 Widget Ayarları Formu

Başlık - 1. Satır (text)

Hero başlığının ilk satırı

Başlık - 2. Satır (text)

Hero başlığının ikinci satırı

Açıklama (textarea)

Hero bölümünün açıklama metni

CTA Button Yazısı (text)

Call-to-action button metni

CTA Button Linki (url)

Button tıklandığında gidilecek sayfa

CTA Button Icon (text)

FontAwesome icon class (opsiyonel)

Hero Görseli (image)

📸 Görsel Seç / Yükle

Mevcut: hero.png

Ana hero görseli (önerilen: 1200x800px)

Hero Görsel Alt Text (text)

SEO için görsel açıklaması

📦 Item Schema (Feature Kartları)

4 feature kartı için widget item schema'sı:

Alan Adı	Tip	Açıklama	Örnek Değer
title	text	Feature başlığı (otomatik - sistem alanı)	Güçlü Stok
icon	text	FontAwesome icon class	fa-light fa-boxes-stacked
subtitle	text	Alt başlık / açıklama	Zengin ürün çeşidi
is_active	switch	Aktif/Pasif (otomatik - sistem alanı)	true

Item Schema JSON

{
  "item_schema": [
    {
      "name": "icon",
      "label": "Icon",
      "type": "text",
      "required": true,
      "properties": {
        "placeholder": "fa-light fa-boxes-stacked",
        "help_text": "FontAwesome icon class"
      }
    },
    {
      "name": "subtitle",
      "label": "Alt Başlık",
      "type": "text",
      "required": true,
      "properties": {
        "placeholder": "Zengin ürün çeşidi",
        "help_text": "Feature açıklaması"
      }
    }
  ]
}

⚠️ Otomatik Sistem Alanları

title ve is_active alanları otomatik olarak eklenir (Widget.php ensureRequiredItemFields metodu). Bunları schema'ya manuel eklemeye gerek yok!

🪜 Kademe Kademe Implementation

Her adımı sırayla yapacağız, test edeceğiz, sorun olursa geri alacağız:

1 Widget Kaydı Oluştur (Central DB)

Ne Yapacağız?

Central database'e Widget kaydı ekleyeceğiz
type='file', slug='hero-ixtif'
settings_schema ve item_schema JSON'larını ekleyeceğiz
Henüz Blade dosyası yok, sadece kayıt

✅ Nasıl Test Edilecek?

Admin panele gir: Widget Yönetimi
Yeni widget'ı listede görmelisin: "Hero - İxtif"
Widget'a tıkla, settings schema'yı kontrol et (8 alan var mı?)
Item schema'yı kontrol et (icon, subtitle var mı?)

🔙 Nasıl Geri Alınır?

Widget kaydını database'den sil:


DELETE FROM widgets WHERE slug = 'hero-ixtif';

🎯 Beklenen Sonuç

Admin panelde "Hero - İxtif" widget'ı görünecek. Henüz kullanılamaz (Blade dosyası yok), ama ayarlar tanımlı olacak.

2 Blade View Dosyası Oluştur

Ne Yapacağız?

Blade dosyası oluştur: blocks/hero/ixtif-hero/view.blade.php
İlk versiyonda basit bir test HTML koyacağız
Settings değişkenlerini {{ $settings['title_line1'] }} ile ekleyeceğiz
Feature kartları henüz yok, sadece ana bölüm

✅ Nasıl Test Edilecek?

Test sayfası oluştur: public/test-hero.php
Widget'ı render et: @widget('hero-ixtif')
Blade dosyasının render olduğunu kontrol et
Settings değişkenleri boş olacak (henüz TenantWidget yok)

🔙 Nasıl Geri Alınır?

Blade dosyasını sil:


sudo rm -rf /path/to/blocks/hero/ixtif-hero/

🎯 Beklenen Sonuç

Test sayfasında basit Hero HTML render olacak. Değişkenler boş, ama yapı çalışıyor.

3 TenantWidget Oluştur + Settings Doldur

Ne Yapacağız?

İxtif tenant'ı için TenantWidget kaydı oluşturacağız
Admin panelden settings formunu dolduracağız (8 alan)
Başlık, açıklama, CTA, hero görsel ayarlayacağız
Henüz feature kartları yok

✅ Nasıl Test Edilecek?

Admin panelden widget'ı aktif et
Settings formunu doldur (title_line1, title_line2, vb.)
Kaydet
Test sayfasını aç, settings değerlerinin render olduğunu gör
"TÜRKİYE'NİN", "İSTİF PAZARI" başlıkları görünmeli

🔙 Nasıl Geri Alınır?

TenantWidget kaydını sil:


DELETE FROM tenant_widgets WHERE widget_id = [widget_id];

🎯 Beklenen Sonuç

Hero bölümünde başlık, açıklama, CTA button görünecek. Görsel render olacak. Feature kartları henüz yok.

4 WidgetItems Ekle (4 Feature)

Ne Yapacağız?

Admin panelden 4 WidgetItem ekleyeceğiz
Güçlü Stok / fa-boxes-stacked / Zengin ürün çeşidi
Garantili Ürün / fa-certificate / Teknik servis
Profesyonel Ekip / fa-award / Uzman danışmanlık
Hızlı Teslimat / fa-truck-fast / Aynı gün kargo

✅ Nasıl Test Edilecek?

Admin panelden widget items bölümüne git
4 item ekle (title, icon, subtitle)
Blade view'de @foreach ile items render et
Test sayfasını aç, 4 feature kartını gör
Icon'lar, başlıklar, alt başlıklar doğru mu kontrol et

🔙 Nasıl Geri Alınır?

WidgetItem kayıtlarını sil:


DELETE FROM widget_items WHERE tenant_widget_id = [tenant_widget_id];

🎯 Beklenen Sonuç

Hero bölümünde 4 feature kartı görünecek. Tüm içerik dinamik, admin panelden düzenlenebilir.

5 Homepage.blade.php Güncelle

Ne Yapacağız?

homepage.blade.php'den 81 satırlık Hero bölümünü sileceğiz (lines 10-91)
Yerine @widget('hero-ixtif') ekleyeceğiz
Önce git checkpoint yapacağız (rollback için)

⚠️ Dikkat: Git Checkpoint Zorunlu!

Bu adımda dosyayı değiştireceğiz. Mutlaka önce git commit yapacağız!

✅ Nasıl Test Edilecek?

Git checkpoint: git add . && git commit -m "CHECKPOINT: Before Hero widget"
homepage.blade.php'yi düzenle (81 satır sil, @widget ekle)
Cache temizle: php artisan view:clear
Ana sayfayı aç: https://ixtif.com/
Hero bölümü önceki gibi görünmeli (widget ile)

🔙 Nasıl Geri Alınır?

Git ile geri al:


git reset --hard HEAD~1
# veya
git checkout homepage.blade.php

🎯 Beklenen Sonuç

Ana sayfa önceki gibi görünecek, ama artık widget sistemi üzerinden! 757 satır → 676 satır.

6 Final Test & Optimization

Ne Yapacağız?

Tüm sayfaları test edeceğiz (desktop, mobile, tablet)
Dark mode geçişi test edeceğiz
Responsive görünüm kontrol edeceğiz
Cache performansını test edeceğiz
Admin panelden değişiklik yaptığımızda hemen yansıyor mu?

✅ Test Checklist

✅ Desktop görünüm (1920px)
✅ Tablet görünüm (768px)
✅ Mobil görünüm (375px)
✅ Dark mode geçişi
✅ Gradient animasyon çalışıyor mu?
✅ CTA button yönlendirme doğru mu?
✅ Hero görsel yükleniyor mu?
✅ 4 feature kartı responsive mu?
✅ Admin değişikliği anında yansıyor mu?
✅ Cache sonrası hız nasıl?

🎯 Beklenen Sonuç

Tüm testler başarılı! Hero widget production'a hazır. Admin panelden kolayca düzenlenebiliyor.

📋 Özet: Sıradaki Adım

Şu An: Settings tasarımı ve kademe kademe plan hazır.

Sonraki Adım: Adım 1'i gerçekleştireceğiz - Widget kaydı oluştur (Central DB).

Onayınızı Bekliyorum: "Adım 1'e başla" derseniz, Widget kaydını oluşturacağım.