Shopify Liquid Nedir?

Shopify Liquid, Shopify platformunda kullanılan bir şablon dilidir. Shopify’daki her tema Liquid kullanılarak yazılır ve bu dil, içerik yönetimi ve şablonlama sistemlerini bir araya getirir. Liquid, Ruby programlama diline dayanan açık kaynaklı bir şablon dilidir ve kullanıcılara dinamik içerikler oluşturma, mağazadaki verileri işleme ve temaları özelleştirme imkanı sağlar.

Bu yazıda Shopify Liquid’in ne olduğunu, nasıl çalıştığını, temel yapısını ve en çok kullanılan Liquid tag’ları ile filtrelerini açıklayacağız. Ayrıca örnekler üzerinden Liquid’in gücünü nasıl kullanabileceğinizi göreceksiniz.

Shopify Liquid’in Yapısı ve Temel Bileşenleri

Liquid dilinde üç ana bileşen bulunur:

1. Objeler
2. Tag’lar
3. Filtreler

1. Objeler

Liquid, Shopify mağazasındaki verileri işlemek için kullanılır. Bu veriler, Liquid içerisinde “objeler” olarak bilinir. Objeler, mağaza, ürün, koleksiyon gibi Shopify platformunda kullanılan farklı veri tiplerini temsil eder.

Örneğin:

{{ shop.name }}

Bu kod, mağazanın adını çeker ve sayfada görüntüler.

Liquid’deki bazı yaygın obje türleri şunlardır:

• shop: Mağaza bilgilerini içerir.
• product: Ürün detaylarını içerir.
• collection: Koleksiyon detaylarını içerir.
• cart: Sepet bilgilerini içerir.
• customer: Müşteri bilgilerini içerir.

2. Tag’lar

Tag’lar, Liquid’in mantıksal yapısını oluşturan kontrol yapılarıdır. Bu tag’lar sayesinde döngüler, koşullu ifadeler ve yorumlar kullanarak dinamik içerikler oluşturabilirsiniz. Tag’lar ikiye ayrılır:

• Mantıksal Tag’lar: Koşullu ifadeler, döngüler gibi kontrol yapıları sağlar.
• Çıktı Tag’ları: Kullanıcıya gösterilecek verileri ekrana bastırmak için kullanılır.

a. Koşullu Tag’lar (Conditional Tags)

Koşullu tag’lar sayesinde belirli koşullara göre içerik gösterebilir ya da gizleyebilirsiniz. En çok kullanılan koşullu ifadelerden biri if tag’ıdır.

Örnek:

{% if product.available %}
  Bu ürün stokta!
{% else %}
  Üzgünüz, bu ürün stokta değil.
{% endif %}

Bu kod, ürün stokta olduğunda “Bu ürün stokta!” mesajını gösterecek, aksi takdirde “Üzgünüz, bu ürün stokta değil.” mesajını verecektir.

b. Döngüler (Loops)

Liquid’de döngüler, koleksiyonlar veya ürün listeleri gibi tekrarlayan içerikleri göstermek için kullanılır. for tag’ı en yaygın kullanılan döngü tag’ıdır.

Örnek:

{% for product in collection.products %}
  <h2>{{ product.title }}</h2>
  <p>{{ product.price | money }}</p>
{% endfor %}

Bu örnekte, belirli bir koleksiyondaki tüm ürünlerin başlıkları ve fiyatları listelenir.

3. Filtreler

Filtreler, objelerden ya da Liquid değişkenlerinden alınan verileri işleyip çıktı olarak göstermek için kullanılır. Filtreler, Liquid tag’larıyla birlikte kullanılabilir ve sonuçları formatlamak, değiştirmek ya da üzerinde işlem yapmak için uygundur.

Örneğin, bir fiyatı para birimi formatında göstermek için money filtresini kullanabilirsiniz:

{{ product.price | money }}

Bu kod, ürünün fiyatını para birimi biçiminde gösterecektir.

Yaygın Kullanılan Filtreler

• capitalize: İlk harfi büyük yapar.
• upcase: Tüm harfleri büyük yapar.
• downcase: Tüm harfleri küçük yapar.
• money: Değeri para birimi formatında gösterir.
• date: Tarih formatını değiştirir.

Örnek:

{{ "hello world" | capitalize }}  <!-- Çıktı: Hello world -->
{{ product.price | money }}       <!-- Çıktı: $10.00 -->
{{ "2023-09-25" | date: "%B %d, %Y" }}  <!-- Çıktı: September 25, 2023 -->

Shopify Liquid ile Çalışma Mantığı

Liquid, statik HTML ile dinamik içeriklerin birleştiği yer olarak görülebilir. Shopify temaları, Liquid’in bu dinamik yapısı sayesinde mağazadaki ürünler, koleksiyonlar, sepet, ödeme sayfası gibi birçok dinamik veriyi kullanıcıya sunar.

Statik ve Dinamik İçeriği Birleştirmek

Bir Liquid dosyası hem statik HTML içerebilir hem de dinamik verileri gösterebilir. Örneğin, bir ürün sayfasında ürün detaylarını göstermek için HTML ve Liquid bir arada kullanılır:

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<p>{{ product.price | money }}</p>

Bu örnekte:

• {{ product.title }}: Ürünün başlığını gösterir.
• {{ product.description }}: Ürünün açıklamasını gösterir.
• {{ product.price | money }}: Ürünün fiyatını para birimi formatında gösterir.

Shopify’da Kullanılan Bazı Özel Liquid Obje ve Tag’ları

Shopify Liquid, özellikle e-ticaret mağazalarında kullanılan birçok özel objeye ve tag’a sahiptir. Bunlardan bazıları:

• cart.total_price: Sepetteki ürünlerin toplam fiyatını getirir.
• customer.orders: Müşterinin sipariş geçmişini çeker.
• collection.products: Bir koleksiyondaki ürünleri listeler.
• shop.products_count: Mağazada toplam kaç ürün olduğunu gösterir.

Örnek: Sepet Toplamını Göstermek

<p>Sepetinizdeki toplam tutar: {{ cart.total_price | money }}</p>

Bu kod, müşterinin sepetindeki toplam tutarı gösterecektir.

Örnek: Belirli Bir Koleksiyonun Ürünlerini Listelemek

<h1>{{ collection.title }}</h1>

{% for product in collection.products %}
  <div>
    <h2>{{ product.title }}</h2>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

Bu örnek, bir koleksiyondaki tüm ürünlerin başlıklarını ve fiyatlarını listeleyecektir.

Liquid ile Özelleştirilmiş Shopify Deneyimi

Liquid ile Shopify mağazanızı kişiselleştirmenin sınırı yoktur. Mağaza sahipleri, temalarını ve içeriklerini Liquid’in gücüyle istedikleri gibi özelleştirebilirler. Kendi kodlarınızı yazarak müşterilere farklı bir deneyim sunabilir, dinamik ve çekici sayfalar oluşturabilirsiniz.

Örnek: Stokta Olmayan Ürünleri Göstermemek

Eğer stokta olmayan ürünleri koleksiyon sayfasında göstermek istemiyorsanız, aşağıdaki Liquid kodu ile bunu yapabilirsiniz:

{% for product in collection.products %}
  {% if product.available %}
    <h2>{{ product.title }}</h2>
    <p>{{ product.price | money }}</p>
  {% endif %}
{% endfor %}

Bu kod, sadece stokta olan ürünleri gösterecektir.

Sonuç

Shopify Liquid, Shopify’da mağaza temaları ve dinamik içerikleri oluşturmak için kullanılan güçlü bir şablon dilidir. Liquid sayesinde mağazanızdaki ürün, koleksiyon ve müşteri bilgilerini kolayca yönetebilir, kullanıcı dostu ve dinamik web sayfaları oluşturabilirsiniz.

Devam eden yazılarda bu konuda detaylı içerikler üretmeye devam edeceğim.