Ana içeriğe geç

Template View Dosyaları Referansı

Bu dokümantasyon, public/templates/basic/views/ dizinindeki tüm template dosyalarının detaylı analizini içerir. Her dosyanın ne işe yaradığı, özel özellikleri ve kullanım örnekleri ile birlikte açıklanmıştır.

Ana Layout ve Temel Template'ler​

layouts/theme.twig.php​

Ana Layout Template'i - Tüm sayfa içeriklerini saran master template

Özellikler:

  • HTML5 dokument yapısı ve responsive meta etiketler
  • SEO optimizasyonu ve Open Graph entegrasyonu
  • Webpack bundle entegrasyonu
  • JavaScript konfigürasyon enjeksiyonu
  • CSS özel özellikler için tema desteği
  • Sidebar sepet offcanvas entegrasyonu
<main>
  {{ render_header() }}
  {{ content_for_layout | raw }}  {# ÖNEMLİ: Backend'den gelen sayfa içeriği buraya yerleşir #}
  {% set footer_url = theme_config('footer_url') %}
  {% if footer_url %}
    {{ render_page(footer_url) }}
  {% endif %}
</main>

content_for_layout Özel Açıklama:

{{ content_for_layout | raw }} değişkeni, template sisteminin en kritik parçalarından biridir. Bu değişken:

  • Backend'den gelen dinamik içeriği layout template'ine yerleştirir
  • Her sayfa (index.twig.php, product.twig.php, login.twig.php vb.) kendi içeriğini üretir ve bu içerik content_for_layout değişkenine atanır
  • raw filtresi HTML içeriğin escape edilmeden, olduğu gibi render edilmesini sağlar
  • Layout template'i (theme.twig.php) bir çerçeve görevi görür, asıl içerik bu placeholder'a yerleştirilir
  • Örneğin: /product/123 URL'si çağrıldığında, backend product.twig.php template'ini işler ve sonucu content_for_layout olarak layout'a gönderir

Çalışma Akışı:

  1. Backend controller bir sayfa template'ini render eder (örn: product.twig.php)
  2. Render edilen içerik content_for_layout değişkenine atanır
  3. Layout template'i (theme.twig.php) yüklenir
  4. {{ content_for_layout | raw }} yerinde sayfa içeriği görüntülenir
  5. Böylece her sayfa aynı header, footer ve genel yapıyı kullanır

open_graph.twig.php​

Sosyal Medya Meta Etiketleri - Dinamik Open Graph etiketleri

Özellikler:

  • Ürün spesifik Open Graph etiketleri
  • Stok durumu entegrasyonu
  • Marka ve kategori metadata'sı
  • Genel website metadata'sına fallback
{% if request.page_type == 'product' and product is defined %}
<meta property="og:type" content="product">
<meta property="product:availability" content="{{ stock_status }}">
<meta property="product:brand" content="{{ product.brand }}">
{% endif %}

index.twig.php​

Ana Sayfa Template'i - Modüler widget sistemi ile homepage

Özellikler:

  • Webpack bundle yükleme
  • Özel widget placeholder'ları
  • Modüler widget include'ları (slider'lar, kategoriler, ürünler)
{{ webpack_bundle('index') }}
{{ ___('page__signin_box') }}

{% include 'widgets/brands_slider.twig.php' %}
{% include 'widgets/manset_slider.twig.php' %}
{% include 'widgets/category_grid.twig.php' %}
{% include 'widgets/last_products.twig.php' %}

ÖNEMLİ NOT - CMS Önceliği:

Eğer CMS'de "index" adında bir sayfa oluşturulmuşsa:

  • CMS'deki "index" sayfası içeriği önceliklidir
  • index.twig.php template'i devre dışı kalır
  • CMS içeriği doğrudan content_for_layout değişkeni aracılığıyla theme.twig.php layout'una yerleştirilir
  • Widget'lar ve özel içerikler CMS editöründen yönetilir
  • Bu sayede kod değişikliği yapmadan ana sayfa içeriği güncellenebilir

Template Öncelik Sırası:

  1. CMS'de tanımlı "index" sayfası varsa → CMS içeriği kullanılır
  2. CMS'de "index" sayfası yoksa → index.twig.php template'i kullanılır

Header Varyantları​

header.twig.php​

Standart Header - İki bölümlü layout ile temel header

Özellikler:

  • Çok dil desteği ve bayrak gösterimi
  • Kullanıcı kimlik doğrulama durumları (giriş yapmış/yapmamış)
  • Dropdown menüler ile kategori navigasyonu
  • Arama işlevselliği
  • Alışveriş sepeti entegrasyonu
  • Sticky header seçeneği
<div class="header-sec-one">
  <!-- Logo, dil seçimi, kullanıcı işlemleri -->
  <div class="language">
    {% for locale_data in get_locales() %}
      <a href="{{ locale_data.url }}">
        <img src="{{ ('flags/' ~ locale_data.code ~ '.png') | image }}">
      </a>
    {% endfor %}
  </div>
</div>
<div class="header-sec-two">
  <!-- Navigasyon ve arama -->
  <nav class="navbar">
    {% for category in categories %}
      <a href="{{ category.url }}">{{ category.name }}</a>
    {% endfor %}
  </nav>
</div>

header_ella.twig.php​

Alternatif Header - Tam genişlik navigasyon ile

Özellikler:

  • Dil seçim dropdown'u
  • Yatay kategori navigasyonu
  • Kullanıcı hesap dropdown'u
  • Typewriter efekti ile arama
<div class="language">
  <div class="dropdown">
    <button class="dropdown-toggle">
      <img src="{{ ('flags/' ~ locale ~ '.png') | image }}">
    </button>
  </div>
</div>
<nav class="row">
  <!-- Logo, navigasyon, kullanıcı butonları -->
</nav>

header_fox.twig.php​

Gelişmiş Header - Mega menü ve promosyon banner'ı ile

Özellikler:

  • Üst promosyon carousel'ı
  • Resim desteği ile mega menü
  • Katlanabilir arama işlevselliği
  • Hesap sidebar'ı
<div class="mega">
  <div class="listBox">
    <!-- Kategori listeleri -->
    {% for category in categories %}
      <div class="category-group">
        <h5>{{ category.name }}</h5>
        {% for subcategory in category.subcategories %}
          <a href="{{ subcategory.url }}">{{ subcategory.name }}</a>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="visualBox">
    <!-- Kategori resimleri -->
    <img src="{{ category.featured_image }}" alt="{{ category.name }}">
  </div>
</div>

header_helen.twig.php​

Üç Katmanlı Header - Dikey hiyerarşi ile

Özellikler:

  • Üst promosyon banner'ı
  • Orta bölümde logo ve arama
  • Alt navigasyon çubuğu
<div class="top">
  <!-- Promosyon carousel'ı -->
</div>
<div class="medium">
  <!-- Logo ve arama -->
</div>
<div class="bottom">
  <!-- Navigasyon -->
</div>

header_mobile.twig.php​

Mobil Header - Offcanvas navigasyon ile optimize edilmiş

Özellikler:

  • Offcanvas ile hamburger menü
  • Katlanabilir arama
  • Mobil dostu layout
  • Akordeon kategori menüsü
<div class="offcanvas offcanvas-start" id="staticBackdrop">
  <div class="accordion accordion-flush">
    {% for category in categories %}
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" data-bs-target="#flush-collapse{{ loop.index }}">
            {{ category.name }}
          </button>
        </h2>
        <div id="flush-collapse{{ loop.index }}" class="accordion-collapse collapse">
          {% for subcategory in category.subcategories %}
            <a href="{{ subcategory.url }}">{{ subcategory.name }}</a>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>

Ürün Template'leri​

📚 İlgili Dokümantasyon: Ürün objesinde kullanılabilir tüm alanlar ve özellikler için Ürün Data Alanları dokümantasyonuna bakınız.

_product_card.twig.php​

Ürün Kartı Bileşeni - Listelerde kullanılan yeniden kullanılabilir ürün kartı

Özellikler:

  • Lazy loading resimler
  • Favori işlevselliği
  • Thumbnail'lar ile varyant seçimi
  • Sepete ekleme formu
  • Ölçü seçimi (paketleme birimleri)
  • İndirim desteği ile fiyat gösterimi
<div class="product pnlurun-item product-card-body" id="divUrunKutu_{{ product.id }}">
  <div class="pro card">
    {# Giriş yapmış kullanıcılar için favori butonu #}
    {% if config('ADD_TO_FAVORITE') and is_logged %}
    <button class="fav-icon btn-add-to-favorites" data-urunid="{{ product.id }}">
      <i class="bi {% if product.is_favorited %} bi-heart-fill text-danger {% else %} bi-heart {% endif %}"></i>
    </button>
    {% endif %}

    {# Ürün resmi ve linki #}
    <a href="{{ product.url }}" title="{{ product.title }}">
      <img data-src="{{ product.med_image }}" class="mainImg lazyload"
           src="{{ product.min_image }}" alt="{{ product.title }}" />
    </a>

    {# Varyantlar #}
    <div class="product-variant-img-cont">
      {% for variant in product.variants %}
        <div {{ variant['html-data'] | html_data_attributes }}
             class="variant-container {{ loop.first ? 'selectedThumb' : '' }}">
          <img data-src="{{ variant['image'] }}" src="{{ variant['image_min'] }}"
               class="product-color-img lazyload" alt="{{ variant['name'] }}">
          <p class="product-color">{{ variant['name'] ?: '&nbsp;' }}</p>
        </div>
      {% endfor %}
    </div>

    {# Sepete ekleme formu #}
    {% if is_logged and not product.sale_disabled %}
    <form action="{{ 'ADD_TO_CART' | route }}" method="post" class="frm-add-to-cart">
      <input type="hidden" name="urun_id" value="{{ product.id }}"/>
      <input type="hidden" name="renk" class="drUrunRenk{{ product.id }}"
             value="{{ product.default_variant_id }}"/>
      
      <div class="d-flex align-items-center justify-content-between">
        <div class="count-btns d-flex">
          <span class="decrease-btn btn-qty-decrease">
            <i class="bi bi-dash"></i>
          </span>
          <input class="count" type="text" name="adet" value="{{ product.package_qty ?: 1 }}">
          <span class="increase-btn btn-qty-increase">
            <i class="bi bi-plus"></i>
          </span>
        </div>
        <button type="submit" class="cart basket-btn addtocartbtn">
          <i class="bi bi-cart-plus"></i>
        </button>
      </div>
    </form>
    {% endif %}
  </div>
</div>

product.twig.php​

Ürün Detay Sayfası - Kapsamlı ürün görüntüleme template'i

Özellikler:

  • Zoom işlevselliği ile ürün galerisi
  • Resim değiştirme ile varyant seçimi
  • Modal ile video desteği
  • Miktar kontrolleri ile sepete ekleme formu
  • Ürün özellikleri gösterimi
  • Benzer ürünler bölümü
  • Tam ekran görüntüleme için resim modal'ı
<div class="renkkategori d-flex gap-2">
  {% for variant in product.variants_with_gallery %}
  <div class="productVariantSelect" data-galeri_index="{{ iiVariant }}">
    <img src="{{ variant.image_thumb }}" />
    <p>{{ variant.name }}</p>
  </div>
  {% endfor %}
</div>

{# Ürün galerisi #}
<div class="product-gallery">
  <div class="main-image">
    <img id="mainProductImage" src="{{ product.main_image }}" data-zoom="{{ product.large_image }}">
  </div>
  <div class="thumbnail-gallery">
    {% for image in product.gallery %}
      <img src="{{ image.thumb }}" data-main="{{ image.large }}" class="gallery-thumb">
    {% endfor %}
  </div>
</div>

{# Video desteği #}
{% if product.video_url %}
<div class="product-video">
  <button type="button" data-bs-toggle="modal" data-bs-target="#videoModal">
    <i class="bi bi-play-circle"></i> {{ 'video_izle' | t }}
  </button>
</div>
{% endif %}

product_list.twig.php​

Kategori/Arama Sonuç Listesi - Filtrelenebilir ürün listesi

Özellikler:

  • Responsive filtre paneli (masaüstü/mobil)
  • Sıralama seçenekleri dropdown'u
  • Infinite scroll sayfalama
  • Ürün kartları ile grid layout
  • Mobil offcanvas filtreler
{# Filtreler ve sıralama #}
<div class="row">
  <div class="col-md-3">
    {% include 'filters.twig.php' %}
  </div>
  <div class="col-md-9">
    <div class="sorting-options">
      <select id="sort-products">
        <option value="name">{{ 'isme_gore_sirala' | t }}</option>
        <option value="price_asc">{{ 'fiyat_artan' | t }}</option>
        <option value="price_desc">{{ 'fiyat_azalan' | t }}</option>
      </select>
    </div>
    
    {# Ürün listesi #}
    <div class="row row-cols-2 row-cols-md-4 urunlistesi">
      {% for product in products.getData %}
        {% include '_product_card.twig.php' with {'product': product} %}
      {% endfor %}
    </div>
    
    {# Infinite scroll için loading #}
    <div id="loading" class="text-center" style="display: none;">
      <div class="spinner-border"></div>
    </div>
  </div>
</div>

Müşteri Yönetimi Template'leri​

customers/login.twig.php​

Kullanıcı Giriş Formu - Kimlik doğrulama template'i

Özellikler:

  • Email/müşteri kodu ile giriş desteği
  • Otomatik tamamlama ile şifre alanı
  • Responsive form layout'u
  • Kayıt olma ve şifre kurtarma linkleri
<form id="frmLogin" action="{{ 'LOGIN' | route }}" method="post">
  <div class="form-group">
    <label for="email">{{ 'email_veya_musteri_kodu' | t }}</label>
    <input type="email" name="email" id="email" autocomplete="username" required
           placeholder="{{ 'email_giriniz' | t }}">
  </div>
  
  <div class="form-group">
    <label for="password">{{ 'sifre' | t }}</label>
    <input type="password" name="sifre" id="password" autocomplete="current-password" required
           placeholder="{{ 'sifre_giriniz' | t }}">
  </div>
  
  <div class="form-actions">
    <button type="submit" class="btn btn-primary">{{ 'giris_yap' | t }}</button>
    <a href="{{ 'register' | url }}">{{ 'kayit_ol' | t }}</a>
    <a href="{{ 'forgot_password' | url }}">{{ 'sifremi_unuttum' | t }}</a>
  </div>
</form>

customers/register.twig.php​

Kullanıcı Kayıt Formu - Kapsamlı kayıt template'i

Özellikler:

  • Firma/kişisel bilgi formu
  • AJAX ile ülke/şehir seçimi
  • Konfigürasyona dayalı koşullu alanlar
  • Özel alan entegrasyonu
  • reCAPTCHA desteği
  • Şartlar ve koşullar onay kutusu
<form id="frmRegister" action="{{ 'REGISTER' | route }}" method="post">
  <div class="row">
    <div class="col-md-6">
      <label for="firma">{{ 'firma_adi' | t }}</label>
      <input type="text" name="firma" id="firma" required>
    </div>
    <div class="col-md-6">
      <label for="mail">{{ 'email' | t }}</label>
      <input type="email" name="mail" id="mail" required>
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <label for="ulke">{{ 'ulke' | t }}</label>
      <select name="ulke" id="ulke" class="ulkeSecim" required>
        <option value="">{{ 'ulke_seciniz' | t }}</option>
        {% for ulke in ulkeler %}
          <option value="{{ ulke.Id }}">{{ ulke.UlkeAdi }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-6">
      <label for="sehir">{{ 'sehir' | t }}</label>
      <select name="sehir" id="sehir" class="sehirSecim" required>
        <option value="">{{ 'once_ulke_seciniz' | t }}</option>
      </select>
    </div>
  </div>
  
  {# Özel alanlar #}
  {% include 'customers/register_customs.twig.php' %}
  
  {# reCAPTCHA #}
  {% if config('RECAPTCHA_SITE_KEY') %}
  <div class="g-recaptcha" data-sitekey="{{ config('RECAPTCHA_SITE_KEY') }}"></div>
  {% endif %}
  
  <div class="form-check">
    <input type="checkbox" name="terms" id="terms" required>
    <label for="terms">{{ 'sartlari_kabul_ediyorum' | t }}</label>
  </div>
  
  <button type="submit" class="btn btn-primary">{{ 'kayit_ol' | t }}</button>
</form>

customers/register_customs.twig.php​

Dinamik Özel Alanlar - Kayıt formu için özelleştirilebilir alanlar

Özellikler:

  • Çoklu alan tipleri (input, textarea, select, checkbox, file, datepicker)
  • Konfigürasyondan dinamik alan üretimi
  • Koşullu zorunlu alanlar
{% for key_name, field_data in custom_fields %}
  <div class="form-group">
    <label for="custom_field_{{ key_name }}">{{ field_data.label }}</label>
    
    {% if field_data.type == 'input' %}
      <input type="text" name="custom_field_{{ key_name }}" id="custom_field_{{ key_name }}"
             {{ field_data.required ? 'required' : '' }}
             placeholder="{{ field_data.placeholder }}">
             
    {% elseif field_data.type == 'textarea' %}
      <textarea name="custom_field_{{ key_name }}" id="custom_field_{{ key_name }}"
                {{ field_data.required ? 'required' : '' }}
                placeholder="{{ field_data.placeholder }}"></textarea>
                
    {% elseif field_data.type == 'select' %}
      <select name="custom_field_{{ key_name }}" id="custom_field_{{ key_name }}"
              {{ field_data.required ? 'required' : '' }}>
        <option value="">{{ 'seciniz' | t }}</option>
        {% for option in field_data.options %}
          <option value="{{ option }}">{{ option }}</option>
        {% endfor %}
      </select>
      
    {% elseif field_data.type == 'checkbox' %}
      <div class="form-check">
        <input type="checkbox" name="custom_field_{{ key_name }}" value="1"
               id="custom_field_{{ key_name }}" {{ field_data.required ? 'required' : '' }}>
        <label for="custom_field_{{ key_name }}">{{ field_data.label }}</label>
      </div>
      
    {% elseif field_data.type == 'file' %}
      <input type="file" name="custom_field_{{ key_name }}" id="custom_field_{{ key_name }}"
             {{ field_data.required ? 'required' : '' }}
             accept="{{ field_data.accept }}">
             
    {% elseif field_data.type == 'datepicker' %}
      <input type="date" name="custom_field_{{ key_name }}" id="custom_field_{{ key_name }}"
             {{ field_data.required ? 'required' : '' }}>
    {% endif %}
  </div>
{% endfor %}

Sipariş Yönetimi Template'leri​

orders/index.twig.php​

Sipariş Geçmişi - Kullanıcının sipariş listesi

Özellikler:

  • Tablo formatında sipariş gösterimi
  • Sipariş durumu ve tutarlar
  • Kargo bilgileri
  • Sayfalama desteği
  • Sipariş detaylarına linkler
<div class="orders-table-container">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>{{ 'tarih' | t }}</th>
        <th>{{ 'siparis_no' | t }}</th>
        <th>{{ 'tutar' | t }}</th>
        <th>{{ 'durum' | t }}</th>
        <th>{{ 'kargo' | t }}</th>
        <th>{{ 'islemler' | t }}</th>
      </tr>
    </thead>
    <tbody>
      {% for order in orders.data %}
      <tr>
        <td>{{ order.short_date }}</td>
        <td>{{ order.order_number }}</td>
        <td>{{ order.amount_text }}</td>
        <td>
          <span class="badge badge-{{ order.status_class }}">
            {{ order.status_text }}
          </span>
        </td>
        <td>{{ order.shipping_info }}</td>
        <td>
          <a href="{{ order.detail_url }}" class="btn btn-sm btn-outline-primary">
            {{ 'detay' | t }}
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  
  {# Sayfalama #}
  {% if orders.pagination %}
    {{ orders.pagination | raw }}
  {% endif %}
</div>

orders/detail.twig.php​

Sipariş Detayı - Bireysel sipariş görüntüleme

Özellikler:

  • Sipariş bilgi tablosu
  • Excel export işlevselliği
  • Fotoğraf export özelliği
  • Tekrar sipariş işlevselliği
  • Sipariş HTML içerik gösterimi
<div class="order-detail-header">
  <h2>{{ 'siparis_detayi' | t }} - {{ order.order_number }}</h2>
  
  <div class="order-actions">
    <a href="{{ order.excel_export_url }}" class="btn btn-success">
      <i class="bi bi-file-excel"></i> {{ 'excel_indir' | t }}
    </a>
    
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#photoExportModal">
      <i class="bi bi-download"></i> {{ 'urun_fotograflarini_indir' | t }}
    </button>
    
    <button type="button" class="btn btn-primary" onclick="reorderProducts({{ order.id }})">
      <i class="bi bi-arrow-repeat"></i> {{ 'tekrar_siparis_ver' | t }}
    </button>
  </div>
</div>

<div class="order-info-table">
  <table class="table">
    <tr>
      <td>{{ 'siparis_tarihi' | t }}</td>
      <td>{{ order.created_date }}</td>
    </tr>
    <tr>
      <td>{{ 'durum' | t }}</td>
      <td>{{ order.status_text }}</td>
    </tr>
    <tr>
      <td>{{ 'toplam_tutar' | t }}</td>
      <td>{{ order.total_amount_text }}</td>
    </tr>
  </table>
</div>

<div class="pnl-order-detail">
  {{ order.order_html | raw }}
</div>

{# Fotoğraf export modal'ı #}
{% include 'orders/_photo_export_modal.twig.php' %}

Widget Template'leri​

widgets/brands_slider.twig.php​

Marka Carousel'ı - Ana sayfada marka gösterimi

Özellikler:

  • Swiffy slider entegrasyonu
  • Konfigüre edilebilir görüntüleme ayarları
  • Navigasyon ve göstergeler
  • Responsive tasarım
{% set brands_banner = get_banner('brands_slider') %}
{% if brands_banner and theme_config('brands_slider_active') %}
<div class="container mt-5" data-widget="brands-slider">
  <h3 class="text-center">{{ 'markalar' | t }}</h3>
  
  <div class="swiffy-slider {{ theme_config('brands_slider_settings') }}">
    <ul class="slider-container">
      {% for slide in brands_banner.slide_items %}
        <li class="brand-container">
          {% if slide.link %}
            <a href="{{ slide.link }}" target="_blank">
          {% endif %}
          
          <img src="{{ slide.image }}" alt="{{ slide.title }}" class="brand-logo">
          
          {% if slide.link %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
    
    <button type="button" class="slider-nav" aria-label="Go left">
      <i class="bi bi-chevron-left"></i>
    </button>
    <button type="button" class="slider-nav slider-nav-next" aria-label="Go right">
      <i class="bi bi-chevron-right"></i>
    </button>
    
    <div class="slider-indicators">
      {% for slide in brands_banner.slide_items %}
        <button class="{{ loop.first ? 'active' : '' }}" aria-label="Go to slide {{ loop.index }}"></button>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

widgets/category_grid.twig.php​

Kategori Grid'i - Ana sayfada kategori vitrine edimi

Özellikler:

  • 4'e kadar konfigüre edilebilir kategori grid'i
  • Renk özelleştirmesi
  • Alt kategoriler ile öne çıkan kategori
{% for ii in 1..4 %}
  {% if theme_config('category_grid_slider_' ~ ii ~ '_active') %}
    {% set grid_category = theme_config('category_grid_slider_' ~ ii ~ '_category') %}
    {% set grid_color = theme_config('category_grid_slider_' ~ ii ~ '_color') %}
    
    <div class="category-grid-{{ ii }}" style="background-color: {{ grid_color }};">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h3>{{ grid_category.name }}</h3>
            <div class="subcategories">
              {% for subcategory in grid_category.subcategories %}
                <a href="{{ subcategory.url }}" class="subcategory-link">
                  {{ subcategory.name }}
                </a>
              {% endfor %}
            </div>
          </div>
          <div class="col-md-4">
            <img src="{{ grid_category.featured_image }}" alt="{{ grid_category.name }}" class="category-featured-image">
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endfor %}

widgets/last_products.twig.php​

Son Ürünler - Ana sayfada son eklenen ürünler

Özellikler:

  • Ürün kartı template'ini yeniden kullanma
  • Responsive grid layout
{% set last_products = get_last_products() %}
{% if last_products %}
<div class="container mt-5" data-widget="last-products">
  <h3 class="text-center">{{ 'son_eklenenler' | t }}</h3>
  <div class="row row-cols-md-4 row-cols-2 g-1">
    {% for product in last_products %}
      {{ include('_product_card.twig.php', {'product': product}) }}
    {% endfor %}
  </div>
</div>
{% endif %}

widgets/instagram.twig.php​

Instagram Feed - Sosyal medya entegrasyonu

Özellikler:

  • Instagram API entegrasyonu
  • Takip butonu
  • Responsive fotoğraf grid'i
{% if theme_config('module_instagram') and theme_config('module_instagram_token') %}
<div class="container mt-5" data-widget="instagram">
  <h3 class="text-center">{{ 'instagram' | t }}</h3>
  
  <div id="instagram-feed1" class="instagram_feed" 
       data-token="{{ theme_config('module_instagram_token') }}"
       data-count="{{ theme_config('module_instagram_count') ?: 6 }}">
  </div>
  
  <div class="text-center mt-3">
    <a href="{{ config('SITE_INSTAGRAM_LINK') }}" target="_blank" class="btn btn-primary">
      <i class="bi bi-instagram"></i> {{ 'takip_et' | t }}
    </a>
  </div>
</div>
{% endif %}

Yardımcı Template'ler​

filters.twig.php​

Ürün Filtreleme Arayüzü - Kategori sayfalarında filtreleme

Özellikler:

  • Akordeon stil filtre grupları
  • Filtre içinde arama
  • Checkbox stil seçim
  • URL tabanlı filtreleme
<div class="accordion accordion-filter" id="accordionFilter">
  {% for group in filters %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading{{ loop.index }}">
        <button class="accordion-button {{ loop.first ? '' : 'collapsed' }}" 
                data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}">
          {{ group.name }}
        </button>
      </h2>
      
      <div id="collapse{{ loop.index }}" 
           class="accordion-collapse collapse {{ loop.first ? 'show' : '' }}">
        <div class="accordion-body">
          {% if group.filters|length > 5 %}
            <input type="text" class="filter-search form-control mb-2" 
                   placeholder="{{ 'filtrele' | t }}" />
          {% endif %}
          
          <div class="filter-options">
            {% for filter in group.filters %}
              <div class="filter-option">
                <a href="{{ filter.url }}" class="filter-link {{ filter.selected ? 'active' : '' }}">
                  <span class="filter-checkbox">
                    {% if filter.selected %}
                      <i class="bi bi-check-square"></i>
                    {% else %}
                      <i class="bi bi-square"></i>
                    {% endif %}
                  </span>
                  {{ filter.label }}
                  <small class="text-muted">({{ filter.count }})</small>
                </a>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>

no_records.twig.php​

Boş Durum Template'i - Sonuç bulunamadığında

Özellikler:

  • Şirket logosu gösterimi
  • "Ürün yok" mesajı
  • Ana sayfaya dönüş butonu
<div class="no-records-container text-center py-5">
  <div class="mb-4">
    <img src="{{ config('LOGO_URL') }}" alt="{{ config('FIRMA_ISIM') }}" class="company-logo">
  </div>
  
  <h4 class="mb-3">{{ 'kategori_urun_yok' | t }}</h4>
  <p class="text-muted mb-4">{{ 'aradiginiz_kriterlere_uygun_urun_bulunamadi' | t }}</p>
  
  <a href="{{ base_url }}" class="btn btn-primary">
    <i class="bi bi-house"></i> {{ 'ana_sayfaya_don' | t }}
  </a>
</div>

Kısmi Template'ler (Partial)​

partial/product/add_to_cart.twig.php​

Sepete Ekleme Formu - Yeniden kullanılabilir sepet formu

Özellikler:

  • Miktar kontrolleri
  • Ölçü/paketleme seçimi
  • Favori butonu entegrasyonu
  • Satış devre dışı durumu
  • Giriş yapmamış kullanıcılar için gereklilik
{% if is_logged and not product.sale_disabled %}
<form action="{{ 'ADD_TO_CART' | route }}" method="post" class="add-to-cart-form">
  <input type="hidden" name="urun_id" value="{{ product.id }}">
  <input type="hidden" name="renk" value="{{ product.default_variant_id }}">
  
  {# Ölçü seçimi #}
  {% if product.measures %}
    <div class="measure-selection mb-3">
      <label>{{ 'olcu' | t }}</label>
      <select name="olcu" class="form-control">
        {% for measure in product.measures %}
          <option value="{{ measure.id }}">{{ measure.name }}</option>
        {% endfor %}
      </select>
    </div>
  {% endif %}
  
  <div class="quantity-controls d-flex align-items-center mb-3">
    <div class="count-btns d-flex">
      <span class="decrease-btn btn-qty-decrease" data-package-qty="{{ product.package_qty }}">
        <i class="bi bi-dash"></i>
      </span>
      <input class="count form-control" type="number" name="adet" 
             value="{{ product.package_qty ?: 1 }}" min="1" step="{{ product.package_qty ?: 1 }}">
      <span class="increase-btn btn-qty-increase" data-package-qty="{{ product.package_qty }}">
        <i class="bi bi-plus"></i>
      </span>
    </div>
  </div>
  
  <div class="cart-actions">
    <button type="submit" class="btn btn-primary add-to-cart-btn">
      <i class="bi bi-cart-plus"></i> {{ 'sepete_ekle' | t }}
    </button>
    
    {% if config('ADD_TO_FAVORITE') %}
    <button type="button" class="btn btn-outline-secondary btn-add-to-favorites" data-urunid="{{ product.id }}">
      <i class="bi {% if product.is_favorited %} bi-heart-fill {% else %} bi-heart {% endif %}"></i>
    </button>
    {% endif %}
  </div>
</form>
{% else %}
  {% if not is_logged %}
    <div class="login-required text-center p-3">
      <p>{{ 'siparis_vermek_icin_giris_yapin' | t }}</p>
      <a href="{{ 'login' | url }}" class="btn btn-primary">{{ 'giris_yap' | t }}</a>
    </div>
  {% else %}
    <div class="sale-disabled text-center p-3">
      <p>{{ 'bu_urun_satis_disi' | t }}</p>
    </div>
  {% endif %}
{% endif %}

Temel Teknik Özellikler​

Çok Dil Desteği​

Tüm template'ler {{ 'anahtar' | t }} filtresi ile çeviri desteği sağlar:

{{ 'merhaba_dunya' | t }}
{{ 'hosgeldin_mesaji' | translate }}

Responsive Tasarım​

Bootstrap 5 sınıfları ile responsive yapı:

<div class="row row-cols-2 row-cols-md-4 g-2">
  <div class="col">
    <!-- İçerik -->
  </div>
</div>

Lazy Loading​

Performans optimizasyonu için resim lazy loading:

<img data-src="{{ product.med_image }}" 
     src="{{ product.min_image }}" 
     class="lazyload" 
     alt="{{ product.title }}">

Webpack Entegrasyonu​

Varlık yönetimi için webpack bundle sistemi:

{{ webpack_bundle('layout') }}
{{ webpack_bundle('product') }}
{{ webpack_bundle_header() }}

Tema Konfigürasyonu​

Dinamik tema ayarları:

{% if theme_config('header_style') == 'modern' %}
  {% include 'header_modern.twig.php' %}
{% endif %}

Kullanıcı Durumu Yönetimi​

Koşullu rendering:

{% if is_logged %}
  {{ 'hosgeldin' | t }} {{ user.name }}!
{% else %}
  <a href="{{ 'login' | url }}">{{ 'giris_yap' | t }}</a>
{% endif %}

Bu kapsamlı referans, frontend geliştiricilerin template sistemiyle etkili şekilde çalışabilmesi için her dosyanın amacını, özelliklerini ve kullanım şeklini detaylı olarak açıklamaktadır.