Yeni Başlayanlar İçin Shopify Liquid Kodlama Temelleri

Liquid, veritabanınız ile görsel mağaza arasında köprü görevi görür. Tamamen sunucu tarafı işleme (server-side rendering) üzerinde çalışır, yani son HTML tarayıcı sayfayı almadan önce oluşturulur. Bu ayrım, ürün veritabanlarına ve müşteri kayıtlarına güvenli erişimi korurken ön uç kodunu temiz tutar. Dil, her şablon dosyasında birlikte çalışan üç ana bileşenden oluşur. Bu parçaları anlamak, mevcut tema kodunu okumanıza ve kendi değişikliklerinizi güvenli bir şekilde yazmanıza yardımcı olur. Shopify yönetici dizininizdeki her tema dosyasını oluşturan yapısal elementlere göz atalım.

Nesneler sayfaya içerik çıktısı verir, etiketler mantık ve kontrol akışı oluşturur ve filtreler sayıların, dizelerin veya dizilerin çıktısını değiştirir. Bir alışverişçi bir ürün sayfasını ziyaret ettiğinde, sunucu bu öğeleri gerçek zamanlı olarak değerlendirir. Örneğin, bir ürünün varyantları varsa, şablon koşullu etiketleri kullanarak her seçeneği döngüye sokar. Ardından seçilen boyuta veya renge bağlı olarak doğru fiyatı görüntüler. Bu dinamik değerlendirme anında arka planda gerçekleşir ve alışveriş yapanların tüm cihaz türlerinde her zaman doğru stok bilgilerini ve güncel fiyatlandırma yapılarını görmesini sağlar.

Nesneler, şablon motoruna Shopify mağazanızdan belirli verilerin nerede görüntüleneceğini söyler. Her zaman product.title veya customer.first_name gibi çift kıvrık süslü parantez içine alınırlar. Sunucu dosyayı işlediğinde, bu yer tutucuları gerçek veritabanı değerleriyle değiştirir. Standart bir ürün şablonu, ürün adlarını, açıklamalarını, satıcı ayrıntılarını ve medya galerilerini doldurmak için büyük ölçüde nesnelere güvenir. Bir nesne eksik veya boşsa, şablon basitçe boş alan oluşturur; bu da profesyonel mağaza tasarımı için uygun koşullu kontrolü hayati önem taşır.

Mevcut nesneleri resmi belgelere başvurarak veya yerel olarak tema geliştirme araçlarını kullanarak inceleyebilirsiniz. Örneğin, product.price ifadesini şablonunuza koymak, mağaza ayarlarına göre biçimlendirilmiş sayısal maliyeti çıkarır. Yüksek dönüşüm sağlayan mağazalarda yaygın bir model, indirimleri vurgulamak için güncel fiyatların yanında karşılaştırma fiyatlarını göstermektir. Nesne çağrılarını temel matematik filtrelerine sararak, manuel veri girişi olmadan tasarruf yüzdelerini dinamik olarak hesaplarsınız. Bu otomasyon, yüzlerce envanter kalemi üzerinden büyük promosyon kampanyaları yürütürken idari genel giderleri azaltır.

Etiketler, şablon belgelerinizin mantığını ve yapısını kontrol eder. If ifadeleri, for döngüleri ve değişken atamaları gibi süslü parantez yüzdeleri içine alınırlar. Nesnelerin aksine etiketler, metni doğrudan oluşturulan web sayfasına çıkarmaz. Bunun yerine sunucuya, belirli koşullara dayanarak hangi kodun yürütüleceğini, yineleneceğini veya gizleneceğini söylerler. Etiketler olmadan her sayfa, kimin göz attığına veya sepetinde hangi öğelerin olduğuna bakılmaksızın aynı statik içeriği gösterirdi.

• If, unless ve case gibi kontrol akışı etiketleri, sepet toplamlarına veya müşteri etiketlerine dayalı koşullu işlemeyi yönetir.
• For ve tablerow gibi yineleme etiketleri, koleksiyonlar veya sepet satırı öğeleri gibi öğe listeleri için kod bloklarını yineler.
• Assign ve capture gibi değişken atama etiketleri, aynı şablon dosyası içinde daha sonra kullanılmak üzere değerleri saklar.

Kontrol etiketlerini etkili bir şekilde kullanmak mağazanızı düzenli ve hızlı tutar. Örneğin, oturum açmış bir kullanıcı belirli bir müşteri grubuna ait olduğunda özel bir toptan nakliye banner’ı gösteren bir koşul yazabilirsiniz. Diğer bir sık kullanım durumu, belirli ödeme bildirimlerini işlemeden önce bir sepetin kısıtlı bir nakliye bölgesinden ürün içerip içermediğini kontrol etmeyi içerir. Doğru etiket iç içe geçmesi yürütme hatalarını önler ve tema kodunuzu platform performans standartlarına uygun tutar.

Filtreler, nesnelerin ve değişkenlerin ekranda görünme biçimini değiştirir. Çıktı parantezleri içine yerleştirilirler ve product.title | upcase veya cart.total_price | money gibi bir boru karakteriyle ayrılırlar. Filtreler metin büyük/küçük harflerini dönüştürebilir, uzun paragrafları kısaltabilir, para birimi değerlerini biçimlendirebilir veya görüntü boyutlarını dinamik olarak manipüle edebilir. Ham veritabanı girdilerini tam olarak işleme anında insan tarafından okunabilir biçimlere biçimlendirerek zaman kazandırırlar.

Görüntü filtreleri, mobil cihazlarda hızlı yükleme hızlarını korumak için özellikle yararlıdır. Ürün görsellerini çıktılarken boyutlandırma parametreleri eklemek, tarayıcının devasa ham varlıklar yerine uygun şekilde ölçeklendirilmiş dosyaları indirmesini sağlar. Tipik bir uygulama, image_url filtresine genişlik ve yükseklik argümanlarının iletilmesini içerir. Bu basit uygulama Core Web Vitals performans metriklerini iyileştirir ve En Büyük İçerikli Boya (Largest Contentful Paint) rakamlarını mobil alıcılar için önerilen eşiklerin çok altında tutar.

Tema dosyalarını düzenlemek, Shopify kontrol panelinizdeki kod düzenleyicisine veya yerel bir geliştirme ortamına erişim gerektirir. Yerleşik düzenleyiciyi bulmak için Çevrimiçi Mağaza’ya gidin, Temalar’a tıklayın, aktif temanızdaki eylemler menüsünü açın ve Kodu Düzenle’yi seçin. Dizin yapısı, dosyaları layouts, templates, sections, snippets ve assets dahil olmak üzere mantıksal klasörlerde düzenler. Her klasör, modüler, sürdürülebilir bir mağaza oluşturmada farklı bir amaca hizmet eder.

• Layouts klasörü, mağazanızdaki her sayfanın etrafını saran theme.liquid gibi genel sarmalayıcı dosyalarını içerir.
• Templates klasörü, ürün, koleksiyon veya sepet gibi belirli sayfa türlerine karşılık gelen JSON veya Liquid dosyalarını barındırır.
• Sections klasörü, satıcıların görsel tema düzenleyicisi içinde yeniden düzenleyebileceği modüler kod bloklarını depolar.
• Snippets klasörü, kodu DRY (kendini tekrarlama) tutmak için birden çok şablonda yer alan daha küçük yeniden kullanılabilir kod parçacıklarını içerir.

Üretim dosyalarında doğrudan düzenlemeler yapmadan önce her zaman mevcut temanızı çoğaltın. Bu, sözdizimi hatalarının görsel düzeni bozması durumunda anında bir yedek oluşturur. Modern geliştiriciler ayrıca tema dosyalarını yerel olarak çekmek, profesyonel metin düzenleyicilerde kod yazmak ve güncellemeleri canlıya almadan önce geliştirme sunucularında değişiklikleri önizlemek için Shopify CLI aracını kullanır. Bu iş akışı kapalı kalma süresini en aza indirir ve sözdizimi hatalarını erken yakalar.

Yeni başlayanlar, şablonların doğru şekilde oluşturulmasını engelleyen sözdizimi hatalarıyla sıklıkla karşılaşır. Yaygın bir hata, endfor veya endif ifadesini dışarıda bırakmak gibi etiket bloklarını kapatmayı unutmaktır. Bu sınırlayıcılar eksik olduğunda şablon ayrıştırıcısı bir hata mesajı çıkaracak veya sayfanın oluşturulmasını tamamen durduracaktır. Yönetici düzenleyicisinde şablon dosyalarını kaydetmeden önce her zaman etiket çiftlerinizi kontrol edin.

Sık karşılaşılan bir diğer sorun, değişken kapsamı ve adlandırma çakışmalarını içerir. Döngüler içinde özel değişkenler atarken, adların product veya collection gibi küresel nesneleri yanlışlıkla geçersiz kılmadığından emin olun. Özel değişkenler için benzersiz önekler kullanmak, işleme sırasında beklenmeyen davranışları önler. Önizleme modunda düzenli testler, bu mantık kusurlarının canlı alıcıları etkilemeden önce yakalanmasına yardımcı olur.