Tema Oluştur

FriSay mağaza temaları proje kökündeki templates/ altında yer alır. Referans temalar arasında default, fyazilim, blue, restoran, nova ve shopmore (mobil öncelikli) bulunur. Kategori filtreleri çekirdek CatalogFilter kullanır (modül gerekmez).

Hızlı Başlangıç

1. Bir referans tema klasörünü kopyalayın (örn. templates/shopmore veya templates/default).
2. Aynı templates/ dizinine yapıştırın.
3. Kopyayı tema adınıza yeniden adlandırın, örn. fashion.
4. Yalnızca dosya içeriklerini düzenleyin — dosya veya klasörleri yeniden adlandırmayın.
5. Temayı Yönetim → Temalar üzerinden etkinleştirin.

Tema Klasör Yapısı

templates/fashion/
  header.tpl              ← Main layout header (required)
  footer.tpl              ← Main layout footer
  home.tpl                ← Home page
  product.tpl             ← Product detail page
  productList.tpl         ← Product list partial
  productGrid.tpl         ← Product grid partial
  catalog.tpl             ← Category / catalog page
  category.tpl
  brand.tpl
  cart.tpl
  checkout.tpl
  checkout-success.tpl
  search.tpl
  login.tpl
  register.tpl
  hesabim.tpl
  favoriler.tpl
  siparis.tpl
  siparislerim.tpl
  sifremi-unuttum.tpl
  sifre-sifirla.tpl
  contact.tpl
  cms.tpl
  special.tpl
  truck.tpl
  404.tpl
  css/
    bootstrap.min.css     ← Do not rename
    app.css               ← Global styles — edit freely
    colors.css            ← Theme color variables (also editable in Admin)
    home.css
    product.css
    cart.css
    checkout.css
    auth.css
  js/
    jquery-3.2.1.min.js   ← Do not rename
    bootstrap.min.js
    popper.min.js
    app.js                ← Global scripts — edit freely
    home.js
    product.js
    account.js
  img/                    ← Theme images (favicon, placeholders, etc.)
  plugin/                 ← Reusable partial templates
    cart.tpl
    pagination.tpl
    headerTools.tpl
    catalogToolbar.tpl
    slide.tpl
    schema-jsonld.tpl
    left.tpl
  cms/                    ← CMS page layouts
    hakkimizda.tpl
    gizlilik.tpl
    iade-degisim.tpl
    mesafeli-satis.tpl
    odeme-kargo.tpl
        

Ne Düzenlenir

Dosya türü	Amaç	Yeniden adlandırılabilir mi?
.tpl	HTML yapısı ve Smarty işaretlemesi — sayfa düzeni ve tasarımı kontrol eder	Hayır
css/*.css	Renkler, boşluklar, tipografi, duyarlı düzen	Hayır
js/*.js	Ön yüz etkileşimleri (sepet, ürün, hesap vb.)	Hayır
css/colors.css	CSS değişkenleri (--brand-primary vb.) — her kurala dokunmadan hızlı marka renkleri	Hayır
img/	Görselleri değiştirin; şablonlarda referans varsa dosya adlarını koruyun	Adları korumak tercih edilir

Temel Şablon Dosyaları

Dosya	Açıklama
header.tpl	Belge başı, CSS/JS dahil etmeleri, gezinme, sayfa gövdesini açar
footer.tpl	Alt bilgi bağlantıları, betikler, sayfayı kapatır — {$hooks.footer} çıktılar
home.tpl	Ana sayfa bölümleri, öne çıkan ürünler, slaytlar
product.tpl	Ürün detay sayfası — sekmeler, galeri, sepete ekle
catalog.tpl / category.tpl	Ürün listeleme sayfaları
checkout.tpl	Ödeme akışı ve ödeme kancaları ({$hooks.order_payment})
plugin/productList.tpl	Birden fazla sayfada kullanılan ortak ürün kartı listesi

Şablonlarda Smarty Değişkenleri

Tam PHP ↔ Smarty referansına bakın: Sabitler ve Değişkenler.

• {$domain} — site temel URL'si
• {$css_dir} / {$js_dir} / {$img_dir} — tema varlık yolları
• {$siteName}, {$pageName}, {$pageTitle}, {$pageDesc}
• {$hooks.footer}, {$hooks.home_bottom} vb. — modül görüntüleme kancaları
• {$moduleAssets.css} / {$moduleAssets.js} — modül varlıkları
• {'path/file.css'|asset_url} — sürümlemeli varlık URL'si (önbellek güvenli)

Temanızı Etkinleştirme

1. Yönetim → Temalar sayfasına gidin.
2. Açılır listeden temanızı seçin (örn. fashion).
3. Temayı Kaydet'e tıklayın — bu THEME ayarını günceller.
4. İsteğe bağlı olarak aynı ekranda renkleri ayarlayın (css/colors.css dosyasına yazar).
5. Kaydetmeden önizleme: {$domain}?theme_preview=fashion

Geliştirme İpuçları

• Büyük CSS dosyalarını yeniden yazmadan önce marka renkleri için css/colors.css ile başlayın.
• Önce header.tpl ve footer.tpl düzenleyin — her sayfayı etkilerler.
• Kısmi şablonlar için {include file='./plugin/cart.tpl'} kullanın — include yollarını değiştirmeyin.
• Sayfa başına CSS: denetleyiciler $css ayarlayabilir (örn. home.css) — header.tpl içinde otomatik yüklenir.
• Büyük şablon değişikliklerinden sonra güncellemeler görünmezse Smarty önbelleğini temizleyin.

<?php

// Step 1 — Copy theme folder (command line example)
// cp -r templates/default templates/fashion

// Step 2 — Theme is auto-discovered when header.tpl exists:
// Theme::discover() scans templates/* folders (except admin)

// Step 3 — Activate programmatically (optional):
Theme::setActiveTheme('fashion');

// Step 4 — Per-page CSS in a controller:
$smarty->assign('css', 'home.css');   // loads templates/fashion/css/home.css
$smarty->display('home.tpl');

{* templates/fashion/css/colors.css — brand colors (editable in Admin → Themes) *}

:root {
    --brand-primary: #1a1a1a;
    --brand-accent: #d6001c;
    --surface: #ffffff;
    --text-primary: #1a1a1a;
    --footer-bg: #0c0c0c;
}

<link rel="stylesheet" href="{$css_dir}bootstrap.min.css" />
<link rel="stylesheet" href="{$css_dir}app.css?v={$minute}" />
<link rel="stylesheet" href="{$css_dir}colors.css?v={$minute}" />
{if $css}
<link rel="stylesheet" href="{$css_dir}{$css}?v={$minute}" />
{/if}
<script src="{$js_dir}jquery-3.2.1.min.js"></script>

<section class="section-premium home-category-block">
    <div class="section-head">
        <h2 class="section-title">Best Sellers</h2>
        <p class="section-subtitle">Discover our most popular products</p>
    </div>
    {include file='./productList.tpl' products=$featuredProducts}
</section>

{* Module display hooks *}
{$hooks.home}

/* Use CSS variables from colors.css */
.section-title {
    color: var(--brand-primary);
    font-weight: 600;
}

.btn-primary {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}

.perks-strip .perk {
    border-radius: 12px;
    background: var(--surface-soft);
}