Aşağıdaki makale size yardımcı olacaktır:Shopify Tema Kodunu Bir Profesyonel Gibi Düzenleyin

Shopify temanız markanızı tanımlar. Müşterilerinizin mağazanızla nasıl etkileşimde bulunacağına karar verir ve özelleştirme için sınırlı seçeneklere sahiptir.

Kullanıcı arayüzünün ötesine geçmeyi ve kodu incelemeyi seçmediğiniz sürece.

Bunu yapmak, tasarım öğelerini değiştirmenize veya temanızın içermediği işlevleri eklemenize olanak tanıyabilir.

Shopify’ın Liquid adı verilen şablon kodunu manuel olarak düzenleyerek mağazanızı beğeninize göre özelleştirebilirsiniz. Kendinizi daha güçlü hissetmeye başlayabilirsiniz ancak aynı zamanda mağazanızı yıkacak güce de sahip olacağınızı bilin.

Shopify mağazanızın Liquid kodunu düzenlemeye hazırsanız öncelikle bunun nasıl çalıştığını bilmek isteyeceksiniz.

Resim: Shopify

Neyse ki mağazanızın Liquid kodunu düzeltmek için kodlayıcı olmanıza gerek yok.

Bu Shopify Liquid eğitimi, mümkün olduğunca teknik jargondan kaçınarak ve baştan sona ihtiyaç duyulan tanımlara yer vererek yeni başlayanlara yöneliktir.

O halde kemerlerinizi bağlayın. Liquid hakkında bilgi edinmenin zamanı geldi!

#cta-visual-pb#Shopify mağazanızı basit bir şekilde düzenleyinShopify mağazanızı Shogun Sayfa Oluşturucu’nun güçlü sürükle ve bırak düzenleyicisi, özel kod blokları ve 30’dan fazla ücretsiz şablonla özelleştirin.Oluşturmaya başlayın ücretsiz

Shopify Liquid nedir?

Shopify Liquid, tüm Shopify temaları için çerçeve görevi gören açık kaynaklı bir şablon dilidir. Kısacası Shopify’ın yazıldığı dildir.
Shopify’ın temalarının tümü farklı görünse de, her biri bu merkezi kod tabanına indirgeniyor.

Liquid, diğer programlama dillerinden kasıtlı olarak daha sınırlıdır ve mağaza verileri ile HTML arasında basit bir köprü görevi görür.

Bu nedenle dil yerine şablon motoru veya sözdizimi olarak da tanımlanmaktadır. Ancak diğer kodlama dilleri gibi if/then ifadelerini, mantığını ve döngüleri kullanır.

Başlangıçta Shopify kurucu ortağı ve CEO’su Tobias Lütke tarafından oluşturulan ve Ruby ile yazılan Liquid, artık Salesforce ve Zendesk gibi diğer büyük platformlar tarafından kullanılıyor.

Shopify’da statik içerik ve dinamik içerik

Bir web sitesine baktığınızda statik ve dinamik içerik arasındaki farkı anlayamayacaksınız.

Basitçe, statik içerik sayfaya sabit olarak kodlanırken dinamik içerik bir veritabanından bir sayfaya çekilir.

Web geliştiricileri, bir sayfadaki statik içeriği dinamik içerikle sorunsuz bir şekilde birleştirmek için şablon dillerini kullanır; dolayısıyla farkı anlayamazsınız.

Statik içerik sayfadan sayfaya aynı kalır ancak dinamik içerik değişir. Shopify mağazanızda statik öğeler HTML’de, dinamik öğeler ise Liquid’de yazılır.

Liquid kodu aslında bir yer tutucudur.

Kod derlenip tarayıcıya gönderildiğinde Shopify mağazanızdan mağaza adınız, ürün ayrıntılarınız, görselleriniz vb. gibi belirli referans verileri almak için kullanılır. Ardından tarayıcı, özelleştirilmiş temanızı görüntülemek için Javascript ve CSS dosyalarınız gibi varlıkları alır.

Bu, Shopify temalarının agnostik olmasına olanak tanır; bu, aynı kodun birçok mağazada ayarlama yapılmadan çalışabileceği anlamına gelir.

Bu, Shopify temanızı değiştirmeyi oldukça zahmetsiz bir süreç haline getirir.

Görüntü Kaynağı: ShopifyDev’ler

Sıvı sınırlayıcılar

Liquid, tanınması kolay bir dildir.

Liquid, kolayca tanımlanabilir .liquid dosya uzantısının ötesinde, şablon dosyalarındaki nesneleri ve etiketleri tanımlamak için iki benzersiz sınırlayıcı (bir kod parçasındaki bağımsız parçaları ayırmak için kullanılan karakterler) kullanır.

• NesnelerÇıkış olan , çift süslü parantezlerle gösterilir: {{ … }}
• EtiketlerMantık ve kontrol akışını oluşturan , her iki tarafta süslü parantez ve yüzde işaretiyle gösterilir: {% … %}

Filtreler Bir nesnenin çıktısını değiştirmek için çift süslü parantezlerin içinde kullanılabilir.

Liquid’deki nesneler, etiketler ve filtreler

Liquid üç temel parçayla karakterize edilir: nesneler, etiketler ve filtreler.

Nesneler (Ayrıca şöyle bilinir değişkenler) bir veya daha fazla değeri temsil eder. Başlıklardan sayılara, hesaplama sonuçlarına ve veritabanı sorgu sonuçlarına kadar her şeyin yerine geçebilirler.

Liquid’de nesneler (çift küme parantezleriyle sarılmış) veri parçalarını sayfaya çıkarır.

Tek bir nesne birçok farklı özelliği destekleyebilir ve nokta sözdizimi sistemi, nesneyi özelliğinden ayırır.

Örneğin, nesnede {{ sayfa başlığı }}, Noktadan önceki terim nesne, noktadan sonraki terim ise özelliktir. Yani bu çıktıyı verir başlık mülkiyeti sayfa nesne.

Bu basit Liquid sözdizimi, kullanımını son derece kullanıcı dostu hale getirir.

Etiketler (küme parantezleri ve yüzde işaretleriyle sarılmış) şablonlar için mantık oluşturmak amacıyla kullanılır.

Etiketlerin kendisi sayfada oluşturulmasa da nesnelerin sayfada nasıl görüntüleneceğini veya görüntülenip görüntülenmeyeceğini belirler.

Örneğin, bir etiket, mağaza sayfanıza, bir ürünün mevcut olması durumunda fiyatını göstermesi, mevcut olmaması durumunda ise “üzgünüm, bu ürün şu anda tükendi” mesajını görüntülemesi talimatını verebilir.

Filtreler Çıkışları değiştirmek için kullanılır. Dikey çizgi karakteriyle gösterilen filtreler, bir nesnenin sayfada görüntülenme biçimini değiştirmek için birçok şey yapabilir.

Örneğin, belirli nesneler için cümle büyüklüğünü korumak amacıyla büyük harf filtresini şu şekilde kullanabilirsiniz: {{ “kötü bir şekilde BÜYÜK HARFLERLE YAZILMIŞ bir Başlık” | büyük harfle yaz }} çıktılar Kötü büyük harfle yazılmış bir başlık.

Liquid kodu örneği: Shopify iletişim sayfası şablonu

Tüm bu kavramları bir araya getirmek için Shopify’ın Debut temasının önceden biçimlendirilmiş iletişim sayfasının Liquid koduna bakalım.

Liquid kodunu daha net göstermek için nesneler ve etiketler kalın harflerle yazılmıştır.

———————————————

{{ sayfa başlığı }}

{% if page.content.size > 0 %}

{{ sayfa içeriği }}

{% endif %}

{%- atama formId = ‘ContactForm’ -%}

{% form ‘contact’, id: formId %}

{% include ‘form-status’, form_id: formId %}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }} *

type=”e-posta”

id=”{{ formId }}-e-posta”

isim=”iletişim[email]”

otomatik düzeltme=”kapalı”

autocapitalize=”kapalı”

value=”{% if form.email %}{{ form.email }}{% elsif müşteri %}{{ customer.email }}{% endif %}”

aria-gerekli=”doğru”

{%- form.errors ‘e-posta’ içeriyorsa -%}

sınıf=”giriş–hata”

aria-geçersiz=”doğru”

aria-describeby=”{{ formId }}-e-posta-hatası”

{%- endif -%}

>

{%- form.errors ‘e-posta’ içeriyorsa -%}

{% include ‘icon-error’ %} {{ form.errors.translated_fields[’email’] | büyük harfle yaz }} {{ form.errors.messages[’email’] }}.

{%- endif -%}

{{ ‘contact.form.phone’ | t }}

{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %

{% son form %}

—————————————

Bu kod parçasında üç Liquid özelliğinin örneklerini görebiliriz:

• Nesne: {{ page.content }} nesnesi, Shopify kullanıcı arayüzünde tanımlanan sayfanın gövde içeriğinin yerine geçen bir nesnedir.
• Etiket: Sayfaya form eklemek için {% form %} etiketi, kapatmak için de {% endform %} etiketi kullanılır (açma ve kapatmaya yönelik bu yapı tüm etiketler için kullanılır).
• Filtre: {{ form.errors.translated_fields nesnesinde büyük harf kullanımı için bir filtre kullanılıyor[’email’] | büyük harfle yaz }}

Kodun ön uçta tercüme ettiği şey budur:

Sayfaları özelleştirmek için Liquid kullanma

Mağazanızın kullanıcı arayüzünün temanızın Liquid kodundan nasıl etkilendiğini göstermek için bu iletişim sayfasındaki formu bir metinle değiştirelim.

1. Adım: Temanızı çoğaltın

Tema kodunuzu düzenlemeden önce temanızı çoğaltın ve değişikliklerinizi kopyalanan sürümde yapın.

Bu şekilde yaptığınız herhangi bir hata kolayca tersine çevrilebilir.

Temadaki “Eylemler”e tıklayın ve açılır menüden “Çoğalt”ı seçin.

2. Adım: Kod düzenleyiciye gidin

Yinelenen temanızda “İşlemler” menüsünü açın ve Shopify kod düzenleyicisini açmak için “Kodu Düzenle”yi seçin.

Adım 3: page.contact.liquid dosyanızda iletişim formu kod bölümünü vurgulayın

Kod düzenleyicide page.contact.liquid dosyasını açın.

Kodun formu oluşturan kısmını vurgulayın. Bir div ile başlar ve bir ile biter uç form etiket.

4. Adım: Kod bloğunu silin ve değişikliklerinizi kaydedin

Doğru kodu vurguladığınızdan emin olun ve silin. Değişikliklerinizi kaydedin.

5. Adım: Çevrimiçi Mağaza > Sayfalar’a gidin ve İletişim sayfanızı bulun

Kontrol panelinize döndüğünüzde İletişim sayfanıza gidin.

Adım 6: İletişim bilgilerinizi İletişim sayfanıza ekleyin

İletişim sayfanızın gövde bölümüne formun yerini alacak ayrıntıları ekleyin.

page.contact.liquid dosyası bu bilgiyi {{ sayfa içeriği }} nesne.

“Kaydet”i tıklayın.

Sayfayı incelediğinizde formun gittiğini, yerine yeni bilgilerinizin eklendiğini göreceksiniz.

#cta-visual-pb#Shopify temalarını kod olmadan özelleştirinMarkanıza özel ve güçlü mağaza sayfaları oluşturmak için Shogun Sayfa Oluşturucu ile Shopify mağazanızı oluşturun.Ücretsiz oluşturmaya başlayın

–

Shopify Liquid nesneleri: Daha yakından bakış

Nesneler Liquid’in temelidir.

Sonuçta bunlar, mağazanıza gelen ziyaretçilerin gerçekte neyi görebileceğini belirleyen özelliklerdir.

İçerik nesneleri

İçerik nesneleri, Shopify mağazanız için şablon ve bölüm dosyası içeriğinin yanı sıra Shopify veya uygulamalar tarafından oluşturulan stil sayfaları veya komut dosyalarının çıktısını alır.

• {{ content_for_header }} – Bu nesnenin, Shopify’da ana şablon dosyası olarak işlev gören theme.liquid’e dahil edilmesi gerekir (tüm temalar theme.liquid’de oluşturulur). HTML etiketinin içinde bulunur ve Shopify analizleri ve Google Analytics dahil olmak üzere Shopify uygulamaları için gereken tüm komut dosyalarını yükler.
• {{ content_for_layout }} – Bu theme.liquid’e dahil edilmesi gereken başka bir nesnedir. Diğer şablonlardan içerik alır.
• {{ content_for_index }} – Bu nesne şablonlar/index.liquid’e dahil edilmelidir. Ana sayfanızda işlenecek bölümleri alır.

Küresel nesneler

Global nesnelere (diğer adıyla global değişkenler) temanızdaki herhangi bir Liquid dosyasından erişilebilir.

Mağazanızdan aşağıdaki veri parçalarını çekmek için kullanılırlar:

• {{ Tüm ürünler }} – Mağazanızdaki tüm ürünlerin listesi (en fazla 20).
• {{ nesne }} – Sitenizdeki tüm makalelerin listesi.
• {{ bloglar }} – Sitenizdeki tüm blogların listesi.
• {{ canonical_url }} – Tüm parametrelerin kaldırıldığı geçerli sayfanın URL’si.
• {{ araba }} – Mağazanızın sepeti.
• {{ koleksiyonlar }} – Mağazanızdaki tüm koleksiyonların listesi.
• {{ geçerli sayfa }} – Geçerli sayfanın numarası (sayfalara ayrılmış içerik için kullanılır).
• {{ güncel_etiketler }} – Etiketlerin listesi (alınan belirli etiketler, kullandığınız şablona bağlıdır).
• {{ müşteri }} – Oturum açan müşteri (müşteri oturum açmadıysa hiçbir şey alınmaz).
• {{ bağlantı listeleri }} – Mağazanızdaki menüler ve bağlantılar.
• {{ halletmek }} – Geçerli sayfanın başlığı (tanımlayıcı olarak da bilinir).
• {{ Görüntüler }} – Bir resme dosya adıyla erişin.
• {{ sayfalar }} – Mağazanızdaki tüm sayfaların listesi.
• {{ Sayfa açıklaması }} – Geçerli sayfanın açıklaması.
• {{ sayfa başlığı }} – Geçerli sayfanın başlığı.
• {{ öneriler }} – Ürün önerileri.
• {{ mağaza }} – Mağazanız hakkında bilgiler.
• {{ Kodlar }} – Tüm aktif komut dosyaları hakkında bilgi. Belirli bir komut dosyası hakkındaki bilgilere erişmek için, komut dosyası türünü bu nesneye nokta sözdiziminde (script.type) bir özellik olarak ekleyin.
• {{ ayarlar }} – Geçerli temanızdaki ayarların listesi.
• {{ şablon }} – Mevcut temanızın adı.
• {{ tema }} – Mevcut temanız.

Tüm bu nesnelerin, her birinin kendine ait bir işlevi olan düzinelerce özelliğe sahip olduğunu unutmayın.

Ayrıca birçok nesne içerik nesneleri veya genel nesneler olarak kabul edilmez.

Etiketler nesnelere göre biraz daha aktiftir. Döngüler oluşturabilir, koşullu if/then ifadelerini çalıştırabilir ve nesnelerin görüntülenme biçimini değiştirebilirler.

Dört tür etiket vardır:

• Tema etiketleri: Şablona özgü HTML işaretlemesinin çıktısını alın, temanıza hangi düzenlerin ve parçacıkların (yeniden kullanılabilir kod parçalarını içeren dosyalar) kullanılacağını söyleyin ve dizileri (değişken listeleri) birden fazla sayfaya bölün. Örneğin: {% form %} etiketi bir sayfaya form eklemek için kullanılabilir.
• Değişken etiketler: Yeni değişkenler oluşturun. Örneğin: {% atama %} etiketi, yeni bir değişken oluşturmanıza ve adlandırmanıza olanak tanır.
• Yineleme etiketleri: Kod bloklarını tekrarlayın. Örneğin: {% for %} etiketi bir kod bloğunu tekrar tekrar çalıştıracaktır. Bu, bir ürün koleksiyonunu bir sayfada görüntülemek istediğinizde kullanışlıdır çünkü sizi her bir öğe için kod ekleme zorunluluğundan kurtarır. Bu döngülerin 50 sonuçla sınırlı olduğunu, dolayısıyla 50’den fazla ürününüz varsa sayfalandırmayı kullanmanız gerekeceğini unutmayın.
• Kontrol akışı etiketleri: Duruma göre kod bloklarının yürütülüp yürütülmeyeceğini belirleyin. Örneğin: {% if %} etiketi yalnızca belirli koşullar yerine getirildiğinde bir kod parçasını çalıştırır.

Shopify Liquid filtreleri

Filtreler bir nesnenin küme parantezleri içinde bulunur ve birçok farklı eyleme dayalı olarak çıktısını artırır.

Farklı filtre türleri şunları içerir:

• Renk filtreleri: Nesnelerin rengini değiştirin, açıklaştırın, koyulaştırın, doygunlaştırın veya doygunluğunu azaltın.
• Yazı tipi filtreleri: Metin stilini (normal veya italik/eğik) veya metin ağırlığını (açık, normal, kalın ve aradaki herhangi bir şey) değiştirin. Font_face filtresiyle temanıza özel yazı tipleri de ekleyebilirsiniz.
• HTML filtreleri: Ödeme düğmeleri ve zaman damgaları gibi nesnelere HTML öğeleri ekleyin.
• Matematik filtreleri: Nesnelerinize matematik denklemlerini ekleyin. Bu filtrenin bir uygulaması, bir ziyaretçiye belirli bir fırsattan yararlanarak ne kadar tasarruf edebileceklerini (liste fiyatı ile indirim yüzdesinin çarpımı) göstermektedir.
• Para filtreleri: Para birimini Shopify mağazanızın ayarlarında belirtildiği şekilde biçimlendirin.
• Tarih filtreleri: Nesnelerde kullanılan tarih formatını belirleyin.

• Filtreleri vurgulayın: Arama özelliğinizin işlevselliğini geliştirmek için arama terimleriyle eşleşen metni vurgulayın.
• Dize filtreleri: Tutarlı bir sonuç elde etmek için belirli bir dizeyi (tırnak işaretleri içindeki karakter dizisi) değiştirir. Bu, büyük/küçük harfleri değiştirmek, karakterlerin başına eklemek, karakterleri eklemek, kelimeleri kaldırmak, dizeleri kısaltmak vb. olabilir.
• Dizi filtreleri: Girilen bir veri dizisini belirli bir şekilde çıktı verecek şekilde değiştirir. Buna ters çevirme, birleştirme, sıralama ve daha fazlası dahildir.

Daha fazla bilgi edinmek için bazı Shopify Liquid kaynakları

Şimdiye kadar bu güzel Shopify Liquid eğitiminden Liquid’in ne olduğu ve nasıl çalıştığı hakkında çok şey öğrendiniz.

Bu konu hakkında daha fazla bilgi edinmek istiyorsanız aşağıdaki kaynakları öneririz:

• GitHub: Bu sayfa daha fazla Liquid kodu ve bilgi içerir.
• Shopify Liquid kodu örnekleri: Liquid’de farklı web sitesi öğelerinin nasıl yazılabileceğini görün.
• Öğrenme Sıvısı: Shopify tarafından yayınlanan bu makale serisi Liquid ile ilgili birçok konuyu kapsamaktadır.

Shopify temanızın arkasındaki kodu anlayarak sayfalara yönelik fikirlerinizi gerçeğe dönüştürebileceksiniz.

Kodu atlamayı tercih ederseniz Shopify mağazanızı istediğiniz zaman Shogun Sayfa Oluşturucu ile özelleştirmeye başlayabilirsiniz. Mevcut temanızın işlevselliğini artırmak için sayfa öğelerini birlikte sürükleyip bırakın (her birini markanızın özelliklerine göre özelleştirin).

Shopify mağazanızda kullanmak üzere özel kod blokları bile oluşturabilirsiniz.

–

#cta-visual-pb#Shopify mağazanızı basit bir şekilde düzenlemek mi istiyorsunuz?Shopify mağazanızı Shogun Sayfa Oluşturucu’nun güçlü sürükle ve bırak düzenleyicisiyle özelleştirin, ayrıca kendi özel kodunuzu istediğiniz yere ekleyin .Ücretsiz olarak inşa etmeye başlayın