# 10 — TEMA KURULUMU: Tasarımı Canlıya Alma Prototipler HTML'di, bu adım onları **çalışan siteye** taşıyor. Yaklaşım: Botble'ın markup'ını yeniden yazmıyoruz. Tema zaten CSS değişkenleri kullanıyor (`--primary-color`, `--text-color`, `--primary-font`), renkleri panelden veriyoruz. `magostore.css` panelin ulaşamadığı yerleri yapıyor: yazı tipi, köşe yarıçapı, gölge ve yeni bileşenler. **Neden böyle:** tema güncellemesi geldiğinde kırılmıyor. `style.css`'e hiç dokunulmadı, sadece üzerine yazılıyor. Bir öğleden sonra iş, haftalar değil. --- ## Adım 1 — Dosyaları kur ```bash cd ~/magostore/platform/themes/farmart cp /paket/tema/public/css/magostore.css public/css/ cp /paket/tema/functions/magostore.php functions/ cp /paket/tema/views/marketplace/mg-payout-strip.blade.php views/marketplace/ cp /paket/tema/partials/ecommerce/mg-delivery-stamp.blade.php partials/ecommerce/ ``` `functions/functions.php` dosyasının **en sonuna** ekle: ```php require __DIR__ . '/magostore.php'; ``` Sonra: ```bash cd ~/magostore && php artisan cms:theme:assets:publish && php artisan optimize:clear ``` --- ## Adım 2 — Panelden renkleri gir **Görünüm → Tema Ayarları → Genel / Renkler.** Bu değerler WCAG AA'dan geçti, ölçtüm — kendi başına renk seçmek yerine bunları kullan. | Alan | Değer | Ne oluyor | |---|---|---| | Primary color | `#A8EA55` | Lime aksan — buton, aktif durum | | Primary button background | `#A8EA55` | | | Primary button color | `#0D2A1A` | Lime üzerine koyu metin (kontrast 10,68 — AAA) | | Heading color | `#0D2A1A` | Başlıklar | | Text color | `#0D2A1A` | Gövde metni | | Top header background | `#0D2A1A` | Üst bant koyu | | Top header text color | `#CFDFD0` | | | Middle header background | `#FFFFFF` | Logo/arama satırı | | Middle header text color | `#0D2A1A` | | | Bottom header background | `#FFFFFF` | Kategori menüsü | | Bottom header text color | `#0D2A1A` | | | Header deliver color | `#0D2A1A` | Ayırıcı çizgi (%15 opaklıkla kullanılıyor) | | Footer text color | `#A8BFAB` | | | Footer heading color | `#FFFFFF` | | | Footer hover color | `#A8EA55` | | | Footer border color | `#2F7A54` | | **Yazı tipi:** Tema Ayarları → Tipografi → Primary font = `Manrope`. Listede yoksa `magostore.css` zaten Manrope'u yüklüyor ve `body` üzerinden uyguluyor — atlayabilirsin. --- ## Adım 3 — Hakediş Şeridi'ni satıcı paneline ekle Satıcı paneli gösterge şablonunu tema altına kopyala (eklenti dosyasını **düzenlemiyoruz**, güncelleme geldiğinde kaybolur): ```bash mkdir -p ~/magostore/platform/themes/farmart/views/marketplace/vendor-dashboard cp ~/magostore/platform/plugins/marketplace/resources/views/themes/vendor-dashboard/index.blade.php \ ~/magostore/platform/themes/farmart/views/marketplace/vendor-dashboard/ ``` Kopyalanan dosyanın **en başına** ekle: ```blade @include(Theme::getThemeNamespace('views.marketplace.mg-payout-strip')) ``` Şerit `mg_settlement_items` tablosundan besleniyor. Tablo yoksa hiç render edilmiyor — yani Faz 3 migration'ı çalışmasa bile panel kırılmıyor. --- ## Adım 4 — Teslim damgasını ürün kartına ekle `partials/ecommerce/product-item.blade.php` içinde, fiyat bloğunun **hemen altına**: ```blade @include(Theme::getThemeNamespace('partials.ecommerce.mg-delivery-stamp'), [ 'product' => $product, ]) ``` Bu, kartın ikinci en belirgin öğesini indirim yüzdesinden **teslim gününe** çeviriyor. Gerekçe: indirim her pazaryerinde var ve enflasyonist ortamda anlamını yitirdi; teslim tarihi satın alma kararını gerçekten değiştiriyor. Şu an tahmin `termin + transit + 16:00 kesimi` ile hesaplanıyor. Kargo entegrasyonu gelince `magostore_delivery_label()` gerçek API'den beslenecek — **arayüz değişmeyecek.** --- ## Adım 5 — Kontrol - [ ] Ana sayfa açılıyor, renkler yeşil paletde - [ ] Ürün kartları yuvarlak köşeli, hover'da yükseliyor - [ ] Ürün kartında satıcı adı ve teslim damgası görünüyor - [ ] Butonlar lime, üzerindeki metin koyu ve okunabilir - [ ] Alt bilgi koyu yeşil - [ ] Satıcı panelinde Hakediş Şeridi en üstte - [ ] Mobilde şerit tek kolona düşüyor - [ ] Yazı tipi Manrope (tarayıcı denetçisinden bak) --- # ADIM 6 — ADMİN PANELİ Admin paneli **temayı kullanmıyor.** Botble'ın Tabler tabanlı kendi çekirdek arayüzü (`platform/core/base`). Vitrin CSS'i oraya hiç ulaşmıyor, ayrı dosya ve ayrı enjeksiyon gerekiyor. İyi haber: Tabler her şeyi `--tblr-*` değişkenleriyle kuruyor. `magostore-admin.css` o değişkenleri Magostore paletine bağlıyor; Tabler'ın kendi CSS'ine dokunulmuyor, çekirdek güncellemesi bunu kırmıyor. ```bash mkdir -p ~/magostore/public/vendor/core/magostore cp tema/admin/magostore-admin.css ~/magostore/public/vendor/core/magostore/admin.css cp app/Providers/MagostoreAdminServiceProvider.php ~/magostore/app/Providers/ ``` `bootstrap/providers.php` içine ekle: ```php App\Providers\MagostoreAdminServiceProvider::class, ``` ```bash php artisan optimize:clear && php artisan config:cache ``` Sağlayıcı CSS'i **yalnızca admin isteklerinde** yüklüyor — vitrin sayfalarına boşuna 12 KB eklemenin anlamı yok. `ADMIN_DIR` değiştirilebilir olduğu için sabit `/admin` kontrolü yapmıyor, `config('core.base.general.admin_dir')` üzerinden bakıyor. Değişen yerler: yan menü koyu yeşil + lime aktif durum, kartlar yuvarlak ve gölgeli, tablo başlıkları küçük büyük harf, durum etiketleri yumuşak zeminli, tüm rakamlar tabular. Prototip: `tasarim/admin-ve-musteri-paneli.html` --- # ADIM 7 — MÜŞTERİ PANELİ Müşteri paneli temayı kullanıyor, yani `magostore.css` oraya **zaten ulaşıyor.** Ek kurulum yok — Adım 1'i yaptıysan stiller hazır. `magostore.css` içindeki `.mg-acc*`, `.mg-tile*`, `.mg-track*`, `.mg-pkg*`, `.mg-steps*` sınıfları müşteri paneli için. Botble'ın mevcut müşteri şablonları bu sınıfları kullanmıyor; kullanmak için şablonları tema altına kopyalayıp sınıfları eklemek gerekiyor: ```bash mkdir -p ~/magostore/platform/themes/farmart/views/ecommerce/customers cp ~/magostore/platform/plugins/ecommerce/resources/views/themes/customers/orders.blade.php \ ~/magostore/platform/themes/farmart/views/ecommerce/customers/ ``` **En değerli tek ekran: sipariş takibi.** Sipariş bölme mimarimiz yüzünden tek ödeme üç ayrı paket üretiyor; müşteri bunları ayrı ayrı izlemek istiyor ve desteğe en çok soru buradan geliyor. Prototipte her paketin kendi durum adımları var. Bu adım **isteğe bağlı** — yapmasan da müşteri paneli çalışıyor ve Magostore renklerinde görünüyor, sadece paket bazlı takip görseli olmuyor. --- ## Bu adımın kapsamadıkları Dürüst olmak gerekirse: bu bir **yeniden derileme**, prototiplerin birebir kopyası değil. Botble'ın düzeni korunuyor, marka dili değişiyor. Prototiplerdeki şu öğeler ayrı iş gerektiriyor: | Öğe | Neden ayrı iş | |---|---| | Vitrin asimetrik kahraman düzeni | Ana sayfa widget yapısı değişmeli | | Sepette satıcı bazlı gruplama kartları | Botble sepeti gruplu gösteriyor ama markup farklı | | Ürün detay teklif karşılaştırma | Faz 4 buybox'a bağlı, katalog olmadan gösterecek veri yok | | Teslim Şeridi (vitrin geri sayım) | Ayrı widget, ana sayfa düzenine bağlı | Bunların hepsi **isteğe bağlı iyileştirme**. Bu beş adım bittiğinde site Magostore görünüyor ve satılabilir durumda. --- ## Öncelik sırası — buradan sonra **1. Canlıya çıkış bloklarını aç** (kod dışı, paralel): avukatla sözleşme maddesi · 11 ticari karar · iyzico sandbox pazaryeri talebi · mali müşavirle stopaj teyidi · bir kargo entegrasyonu · ETBİS **2. Sen içerik gir:** kategori ağacı, ilk ürünler, sözleşme metinleri, kargo tarifesi, komisyon oranları (`komisyon-ve-kesintiler.xlsx`) **3. İlk gerçek sipariş testi:** sandbox'ta uçtan uca — sepet → ödeme → `magostore:reconcile-payments` → teslim → `magostore:approve-due`. Bu test geçtiğinde para akışı kanıtlanmış olur. **4. Sonra Faz 4** (katalog + buybox), hazır olduğunda. Migration pakette duruyor, tabloları kurar ama hiçbir şey okumaz — zararsız.