Hyvä tema renklerini koda dokunmadan yönetim panelinden değiştirmek

Hyvä temaları Tailwind CSS ile oluşturulur. Renkler, yazı tipleri ve boşluklar temanın Tailwind yapılandırmasında tasarım değişkenleri (design token) olarak tanımlanır. Tema derlendiğinde Tailwind, yalnızca şablonların gerçekten kullandığı sınıfları tek bir küçük stil dosyasına yazar.

Hyvä demo mağazamızın üst bölüm ve marka renkleri Stores > Configuration altından değiştirilebiliyor.

Bu hız açısından harika. Ama aynı zamanda bir renk değişikliğinin kod değişikliği olduğu anlamına gelir. Birinin yapılandırmayı düzenlemesi, CSS'i yeniden derlemesi ve dağıtması gerekir. İndirim hafta sonu için daha koyu bir üst bölüm isteyen bir pazarlama ekibi için bu fazla yavaştır.

Bu yazıda sorunu nasıl çözdüğümüzü ve sınırların nerede olduğunu anlatıyoruz.

Hyvä renkleri normalde nerede bulunur

Bir Hyvä alt temasında Tailwind yapılandırması, temanın web/tailwind klasöründe. Burada primary ve secondary gibi adlandırılmış renkler tanımlanır. Şablonlar da şu tür sınıfları kullanır: bg-primary veya text-secondary.

Derleme adımı şablonları tarar, kullanılan sınıfları bulur ve CSS'i oluşturur. Bu süreci şu yazıda anlatıyoruz: Hyvä'da Tailwind: tasarım token'ları ve derleme süreci.

Renk değerleri oluşturulan CSS'in içine yazıldığı için onları değiştirmek, derlemeyi yeniden çalıştırmak demektir. Canlı modda bu, aynı zamanda bir dağıtım demektir.

Fikir: token'lar CSS değişkenlerini gösterir

Çoğu zaman CSS değişkenleri olarak anılan CSS custom properties bu sorunu zarifçe çözer. Bir Tailwind token'ı sabit bir hex değeri yerine bir değişkeni gösterir. Stil dosyası aynı kalır, yalnızca değişkenin değeri değişir.

Değişkenin değeri Magento yapılandırmasından gelir. Sayfanın head bölümündeki küçük bir blok, yapılandırılmış renkleri okur ve değişken olarak yazar.

<style>
:root {
  --brand-header-bg: <?= $escaper->escapeCss($headerBg) ?>;
  --brand-primary: <?= $escaper->escapeCss($primary) ?>;
}
</style>

Şablonlar bu değişkeni token’lar üzerinden ya da Tailwind’in serbest değer (arbitrary value) söz dizimiyle kullanır, örneğin bg-[var(--brand-header-bg)]. Token'ı kullanan her öğe yeni değeri otomatik olarak alır.

Varsayılan değerler hala tema dosyalarında bulunur. Yönetim panelinden kimse renk ayarlamazsa tema tam olarak tasarlandığı gibi görünür.

Ekibin yönetim panelinde gördükleri

Stores > Configuration altına, değiştirilmesi mantıklı olan renkleri içeren bir bölüm ekliyoruz. Çoğu mağazada bu kısa bir listedir:

• Üst bölüm arka planı ve üst bölüm metni.
• Butonlar ve bağlantılar için kullanılan ana marka rengi.
• Rozetler ve vurgular için kullanılan ikincil veya vurgu rengi.
• Üst şerit veya duyuru şeridi rengi.

Her alan bir hex renk kodu kabul eder ve değer kaydedilmeden önce doğrulanır. Yanlış yazılmış bir değer mağaza ön yüzünü asla bozmamalıdır.

Bunlar standart Magento yapılandırma alanları olduğu için web sitesi ve mağaza görünümü bazında çalışır. Almanca mağaza görünümünün üst bölüm rengi İngilizce olandan farklı olabilir. Bu, şu yazıda anlatılan kurulumla da iyi uyum sağlar: çok dilli Hyvä mağazaları.

Kaydettikten sonra ekip tam sayfa önbelleğini yönetim panelinden temizler ve yeni renkler yayına girer. Yeniden derleme ya da dağıtım gerekmez.

Adım adım nasıl yapıyoruz

1. Ekiple hangi renkleri gerçekten değiştirmeleri gerektiği konusunda anlaşın.
2. Bu alanları, makul varsayılan değerlerle küçük bir modüldeki bir yapılandırma bölümüne ekleyin.
3. Alt temadaki ilgili Tailwind token'larını CSS değişkenlerine yönlendirin.
4. Yapılandırılmış değerleri CSS için güvenli hale getirerek değişken olarak yazan bir head bloğu ekleyin.
5. Üst bölüm ve butonlardaki sabit renk sınıflarını token'larla değiştirin.
6. Her mağaza görünümünü varsayılan renklerle ve değiştirilmiş bir renk setiyle test edin.

İş küçüktür, ancak her sayfadaki üst bölüme, butonlara ve bağlantılara dokunur. Bu yüzden, diğer tüm tema değişiklikleri gibi, yayına almadan önce test ortamında test ediyoruz.

Bilerek kodda bıraktıklarımız

Her renk düzenlenebilir olmamalı. Bir ekibe yirmi renk seçici vermek, tasarımı kaybetmenin hızlı bir yoludur.

Şunları tema dosyalarında tutuyoruz:

• Nötr griler ve kenarlıklar. Sayfa düzenini bir arada tutarlar ve nadiren değişmeleri gerekir.
• Durum renkleri. Hata, uyarı ve başarı renkleri formlarda ve ödeme sayfasında anlam taşır.
• Yazı tipleri ve boşluklar. Bunlar bir kampanyaya değil, tasarım sistemine aittir.

Bu token'lar, diğer tüm kod değişiklikleri gibi, dağıtım sırasında tema dosyalarından yeniden oluşturulur. Ayrım basit: marka ayarları yönetim panelinde, yapı kodda.

Kontrast ve erişilebilirlik

Düzenlenebilir bir renk, okunamayan bir renge de dönüşebilir. Açık sarı bir üst bölümdeki beyaz metin, onu büyük bir monitörde seçen kişiye güzel görünür. Güneş altında bir telefonda ise okunması zordur.

Bunu iki şekilde çözüyoruz. Her arka plan alanının eşleşen bir metin rengi alanı var; böylece ekip ikisini bir çift olarak seçiyor. Ayrıca her yeni çifti kaydetmeden önce bir kontrast kontrol aracıyla denetlemenizi öneriyoruz.

Bu konuda daha fazlası için: Hyvä temalarında erişilebilirlik.

Bu hızı etkiler mi?

Hayır, ölçülebilir bir şekilde etkilemez. Değişkenler sayfanın head bölümüne birkaç satır satır içi CSS ekler. Ana stil dosyası küçük ve önbellekte tutulan tek bir dosya olarak kalır.

Sayfa hala tamamen önbelleğe alınabilir. Renk değerleri her mağaza görünümü için önbelleğe alınan HTML'in parçasıdır; bu yüzden bir değişiklikten sonra tam sayfa önbelleğinin temizlenmesi gerekir.

Bu yaklaşım, Hyvä mağazalarını yayından sonra kolay yönetilebilir tutmamızın bir parçasıdır. Demo mağazamız da bunu, şu hizmetimizdeki hız kurulumuyla birlikte kullanıyor: Hyvä ve Luma karşılaştırması.

SSS

Yazı tiplerini de yönetim panelinden değiştirebilir miyiz?

Aynı değişken yaklaşımıyla teknik olarak mümkün. Yazı tiplerini genellikle kodda tutuyoruz; çünkü yazı tipi değişikliği satır yüksekliğini, boşlukları ve yükleme hızını da etkiler.

Bir Hyvä güncellemesi yönetim panelinden ayarladığımız renklerin üzerine yazar mı?

Hayır. Değerler Magento yapılandırmasında saklanır, mantık ise alt temanızda veya küçük bir modülde bulunur. Hyvä güncellemeleri ikisine de dokunmaz.

Bir kampanya için renk değişikliğini zamanlayabilir miyiz?

Varsayılan olarak hayır, çünkü Magento yapılandırmasında zamanlama yoktur. Kampanyalar sık yapılıyorsa küçük bir modülle eklenebilir. Tam kampanya sayfaları için Mage PageBuilder blok kütüphanemiz genellikle daha uygun bir araçtır.

Ekibinizin geliştiriciye ihtiyaç duymadan ayarlayabileceği bir Hyvä teması mı istiyorsunuz? Şuna göz atın: Hyvä tema geliştirme hizmetimiz ve Mage PageBuilder, ya da bize ulaşın ; mağazanızı birlikte konuşalım.