Genel ayarlar, hazır görünümler ve diller

Temanın bütün sayfalarını etkileyen ayarlar (renk, yazı tipi…), tek tıkla uygulanan hazır görünümler ve çevrilebilir tema metinleri.

ayarlar.json

Bölümün ayarı o bölümü, genel ayar bütün temayı yönetir. ayarlar.json gruplardan oluşur; ayar türleri bölüm ayarlarıyla aynıdır, ek olarak font_picker (yazı tipi kataloğundan seçim).

ayarlar.json
[
  {
    "name": "Renkler",
    "settings": [
      { "type": "color", "id": "vurgu", "label": "Vurgu rengi", "default": "#b8925a" }
    ]
  },
  {
    "name": "Yazı",
    "settings": [
      { "type": "font_picker", "id": "baslik_yazi", "label": "Başlık yazı tipi", "default": "Outfit" },
      { "type": "checkbox", "id": "golge", "label": "Kartlarda gölge", "default": true }
    ]
  }
]

Satıcı bu ayarları düzenleyicinin Tema sekmesinde görür. Şablonlarda settings.<id> olarak okunur:

{%- if settings.golge -%}<div class="kart kart--golgeli">{%- endif -%}

Renk ve yazı tipi ayarları ayrıca CSS değişkeni olur — tema CSS'inde sabit renk yazma, değişkeni kullan:

AyarDeğişken
vurgu (color)--mk-tema-vurgu
baslik_yazi (font_picker)--mk-tema-baslik-yazi (ailenin CSS adı; yazı tipi sayfaya kendiliğinden yüklenir)
varliklar/tema.css
.dugme { background: var(--mk-tema-vurgu); }
h1, h2 { font-family: var(--mk-tema-baslik-yazi); }

Platformun renkleri (--mk-primary, --mk-text, --mk-background…) satıcının Tema ayarlarındaki ana renklerdir; temanın kendi paletine ek olarak her zaman kullanılabilir.

Hazır görünümler

Aynı temanın renk / yazı tipi çeşitleri ayrı tema değil, hazır görünümdür. tema.jsonda en çok 5:

tema.json
{
  "ad": "liman", "surum": "1.0.0", "baslik": "Liman",
  "hazirlar": [
    { "ad": "Gece", "ayarlar": { "vurgu": "#d4a64a", "golge": false } },
    { "ad": "Deniz", "ayarlar": { "vurgu": "#1f6f8b" } }
  ]
}

Değerler ayarlar.jsondaki kimliklerle yazılır; olmayan kimlik yüklemede reddedilir.

Diller ve t

Temanın kendi metinleri (düğme yazıları, boş durum mesajları) şablona sabit yazılmaz: diller/<kod>.json dosyalarından t süzgeciyle gelir. Satıcıya özel içerik (başlıklar, kampanya yazıları) ise bölüm ayarıdır.

diller/tr.json
{
  "sepet": {
    "bos": "Sepetiniz boş",
    "adet": { "one": "{{ sayi }} ürün", "other": "{{ sayi }} ürün" }
  }
}
<p>{{ 'sepet.bos' | t }}</p>
<span>{{ 'sepet.adet' | t: sayi: sepet.adet }}</span>
  • Anahtar noktalı yoldur; bulunamazsa anahtarın kendisi basılır.
  • {{ ad }} yer tutucuları süzgece verilen adlı değerlerle dolar.
  • Değer { one, other } gibi bir nesneyse sayi ile dilin çoğul kuralı seçilir.
  • Dil: satıcının sitedeki etkin dili (dil.kod), o dilde dosya yoksa temanın dili (tema.json dil, varsayılan tr). Şablonda dil.kod ve dil.kaynak (mağazanın kaynak dili) okunabilir.

Bu sayfada