Sayfa & Blok Yönetimi

Tasarım & İçerik > Blok Yönetimi bölümünden mağazanızın tüm sayfalarını parça parça (blok bazlı) yönetebilirsiniz. Her sayfa satır → sütun → blok hiyerarşisinden oluşur. Kod yazmadan sürükle-bırak ile sayfalarınızı düzenleyebilir; blok şablonlarını ise doğrudan Smarty TPL/SCSS/JS editörü ile geliştirebilirsiniz.

Sayfa Yapısı

Sayfa
└── Satır (Row)  ← full-width ya da container
    └── Sütun (Column)  ← 12'li Tailwind grid
        └── Blok (Block)  ← içerik parçası (slider, ürün listesi, banner…)

Bir sayfaya istediğiniz kadar satır eklenebilir. Her satır bağımsız olarak tam genişlikte (full) veya ortalanmış container (container) olarak ayarlanabilir.

Grid Sistemi

EticaretShop, Tailwind CSS tabanlı 12 sütunlu grid sistemi kullanır. Her sütunun genişliği 12 üzerinden belirtilir:

Ekran Boyutu Kırılım Noktaları (Breakpoints)

Bu aralıklar setting.scss dosyasından özelleştirilebilir.

Otomatik Miras (not-set)

Gelişmiş modda bir kırılım için değer not-set seçilirse, bir alt kırılımın değeri devralınır.

Örnek: default:12 / sm:not-set / md:6 → default:12 / sm:12 / md:6 / lg:6 / xl:6

Sayfa Yönetimi

Blok Yönetimi sayfasına girdiğinizde üst kısımdaki açılır menüden düzenlemek istediğiniz sayfayı seçebilirsiniz. Her sayfa için şunlar yapılabilir:

• Yeni Sayfa Ekle: Sayfa adı, SEO alanları ve varsayılan ayarlarla yeni sayfa oluşturun
• Sayfayı Güncelle: Mevcut sayfanın adını ve ayarlarını değiştirin
• Temayı Dışa/İçe Aktar: Sayfa + blok yapısını JSON olarak dışa aktarın ya da başka bir sistemden içe alın
• Özel Şablon Kullanan Bloklar: Sayfada varsayılan şablondan farklı şablon kullanan blokları listeleyin

Satır (Row) Ekleme ve Ayarlama

Satır Ekle butonuna tıkladığınızda açılan panelde şu ayarlar yapılabilir:

Sütun genişliklerini satır düzenleyicisindeki Basit veya Gelişmiş modda ayarlarsınız.

Basit Mod

Mobil ve PC önizlemesini Mobil / PC butonu ile değiştirerek her görünüm için sütun genişliğini seçin. PC önizlemesinde sütun kenarlarına tıklayıp sürükleyerek genişliği ayarlayabilirsiniz.

Gelişmiş Mod

Tüm kırılım noktaları (default, sm, md, lg, xl) için her sütunun genişliğini ayrı ayrı ayarlayın:

Sütun 1: default=12 / sm=12 / md=6 / lg=4 / xl=4
Sütun 2: default=12 / sm=12 / md=6 / lg=4 / xl=4
Sütun 3: default=12 / sm=12 / md=not-set / lg=4 / xl=4

Satırlar ve sütun içindeki bloklar sürükle-bırak ile yeniden sıralanabilir.

Blok Ekleme

Bir sütuna blok eklemek için + Blok Ekle butonuna tıklayın. Açılan panelde blok adına göre arama yapabilir, listeden uygun bloğu bulup + ikonuyla sütuna ekleyebilirsiniz.

Başka Sayfadan Blok Kopyalama

Blok Kopyala özelliğiyle başka bir sayfada yapılandırılmış bir bloğu içeriği ve ayarlarıyla birlikte mevcut sayfanıza kopyalayabilirsiniz:

1. Kaynak sayfayı seçin
2. Kopyalamak istediğiniz bloğu seçin
3. Blok Kopyala butonuna tıklayın

Blok Ayarları (Management)

Bir bloğa tıkladığınızda 3 sekme içeren blok yönetim sayfası açılır:

Sekme 1: Ayarlar

Sol panelde blok kimliği ve genel ayarlar, sağ panelde ise o bloğun setting.json dosyasında tanımlanmış özel ayarlar görünür.

Sol Panel — Genel Bilgiler

Yetkilendirme

Bloğun hangi kullanıcı türlerine görüneceğini kontrol eder:

Cihaz Görünürlüğü

Bloğun hangi cihazlarda gösterileceğini kontrol eder:

Sağ Panel — Blok Özel Ayarları

Her blok kendi setting.json dosyasında tanımlı ayarlara sahip olabilir. Bu ayarlar çeşitli form bileşenleri olarak görünür:

Ayar Dosyası (setting.json) İndirme/Yükleme

Ayarları Yönet butonuyla ayar dosyasını dışa/içe aktarabilirsiniz:

• Ayarları İndir: Ayar yapısını (opsiyonel olarak mevcut değerleriyle birlikte) JSON olarak indirir
• setting.json Yükle: Yeni ayar dosyasını yükler. Seçenekler:
  • Ayar değerlerini de set et: Yüklenen dosyadaki değerleri de uygular
  • Kullanılmayan ayarları sil: Artık olmayan ayarları veritabanından temizler

Sekme 2: Editör

Blok kaynak dosyalarını doğrudan düzenlediğiniz kod editörü sekmesidir. Her blok için üç tür dosya yönetilir:

Editör araç çubuğundaki işlemler:

Karşılaştırma (Diff) Ekranı

İki dosya veya sürüm arasındaki farkları diff2html kütüphanesiyle renkli olarak gösterir. TPL, SCSS veya JS için ayrı karşılaştırma yapılabilir. Her dosya için geçmiş sürümler listelenerek karşılaştırma yapılabilir.

Sekme 3: Dil Değişkenleri

Her blok, şablonunda kullanabileceği dil değişkenlerini kendi language/ klasöründe tutar (örn: tr.conf, en.conf). Bu sekmede bu değişkenler düzenlenir.

Değişken Ekleme / Düzenleme

Her dil değişkeni bir anahtar ve her dil için bir değer içerir. Değer alanı zengin metin (HTML) destekler.

Anahtar: KAMPANYA_BASLIK
Türkçe: Yaz İndirimi
İngilizce: Summer Sale

Toplu Çeviri

Kaynak Dil ve Hedef Dil seçilerek tüm değişkenlerin çevirisi Google Translate ile otomatik yapılabilir.

Dışa / İçe Aktarma

Dil değişkenleri Excel veya Text formatında dışa aktarılabilir, düzenlenmiş dosya geri yüklenebilir. Dışa aktarırken hangi dillerin dahil edileceği seçilebilir.

Sistem Tarafından Otomatik Yüklenen Kütüphaneler

Her sayfada şu kütüphaneler otomatik olarak yüklenir — ayrıca import gerekmez:

Şablon Dosya Yapısı

Her blok şablonu için sunucuda şu klasör/dosya yapısı bulunur:

themes/
└── [tema-adi]/
    └── [blok-adi]/
        ├── [blok-adi].tpl        ← Ana Smarty şablonu
        ├── [blok-adi].scss       ← Bloka özel stiller
        ├── [blok-adi].js         ← Bloka özel JS
        ├── setting/
        │   └── setting.json      ← Ayar tanımları
        └── language/
            ├── tr.conf           ← Türkçe dil değişkenleri
            └── en.conf           ← İngilizce dil değişkenleri

Tema Yönetimi

Bloklar tema klasörleri altında gruplandırılır. "Tema Klasörlerini Yönet" ekranından:

• Yeni tema klasörü ekleyebilir
• Kaç bloğun o temayı kullandığını görebilir
• Kullanımda olan blokları listeleyebilirsiniz

Tema Dışa / İçe Aktarma

Hazırladığınız sayfa yapısını başka bir mağazaya taşımak veya yedeklemek için Theme Dışa Aktar kullanabilirsiniz:

1. Dışa aktarılacak sayfaları seçin
2. Her sayfa için dışa aktarılacak blokları seçin
3. JSON dosyası olarak indirin

İçe aktarmak için JSON dosyasını yükleyin — sayfa ve blok yapısı otomatik oluşturulur.