Liquid motoruyla Shopify teması oluşturun

Yazar: Peter Berry

Yaratılış Tarihi: 14 Temmuz 2021

Güncelleme Tarihi: 13 Mayıs Ayı 2024

Liquid motoruyla Shopify teması oluşturun - Yaratıcı

İçerik

Tema dosyaları ve klasörleri
URL'leri şablonlarla eşleme
Sıvı: temel bilgiler
Product.liquid'i anlama
Çıktı
Mantık
Filtreler
Sıradaki ne?
Daha fazla kaynak ve ilham

Geçtiğimiz birkaç hafta boyunca, Elliot Jay Stocks ile geçen yıl kurduğumuz Viewport Industries şirketi için Shopify temasını oluşturuyorum. Shopify'ı birkaç nedenden dolayı seçtik:

Hem dijital hem de fiziksel ürünler satmamızı sağlar
Tamamen barındırılıyor, yani endişelenecek sunucu yok
Bankamızla güzel bir şekilde entegre olan bir dizi ödeme ağ geçidini destekler
Tema tabanlıdır, yani mevcut sitemizin HTML, CSS ve JavaScript’ini kolayca yeniden kullanabiliriz.

Shopify, mağazanızdaki verileri şablonlarınıza çıkarmak için Liquid adlı bir şablon motoru kullanır. Liquid, belki de daha önce kullanmadığınız bir Shopify temasının tek bileşenidir ve çıktı olabilir. Ama iyi haber şu ki, başlamak o kadar da zor değil.

Daha önce Smarty, ERB veya Twig kullandıysanız, aşağıdakiler size tanıdık gelecektir. Değilse endişelenmeyin: bu sadece birkaç basit kuralı öğrenme meselesidir. Web geliştirme araç setinize Liquid becerilerini ekledikten sonra, müşteriler için kısa sürede temalar oluşturmaya başlayabileceksiniz.

Tema dosyaları ve klasörleri

Shopify temaları, bir dizi dosyadan (.liquid uzantılı HTML dosyaları, CSS, JS, resimler vb.) Ve klasörlerden başka bir şey değildir. Temalar istediğiniz gibi görünebilir ve çalışabilir: gerçekten hiçbir kısıtlama yoktur. Bir temanın temel yapısı şu şekildedir:

varlıklar
yapılandırma
düzenler
theme.liquid
parçacıklar
şablonlar
404. sıvı
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

Bu dosyalarla en temel temaları oluşturabilirsiniz. Elbette, muhtemelen biraz CSS, JavaScript ve birkaç resim eklemek isteyeceksiniz. Bunları varlıklar klasörüne koyardınız. (Şu anda varlık klasörünüzde alt klasörlere izin verilmediğini belirtmek gerekir.)

Temaların nasıl çalıştığı hakkında daha fazla bilgi edinmek ve yapılandırma ve parçacık klasörleri hakkında bilgi edinmek için Shopify Wiki'deki Kazı Kazan'dan Tema ve Tema Ayarları'nı okumanızı tavsiye ederim.

Alternatif olarak, ücretsiz İş Ortağı programına kaydolabilir, bir test mağazası oluşturabilir ve test mağazanızın yönetici alanında bulunan birçok ücretsiz temadan birini inceleyebilirsiniz - Temalar menüsünde bulunan tema düzenleyicisine gitmeniz yeterlidir.

URL'leri şablonlarla eşleme

Shopify temaları, mevcut URL'yi belirli bir şablonla eşleyerek çalışır. Örneğin, aşağıdaki URL'ye sahip bir ürünü görüntülüyorsak ...

http://www.unitedpixelworkers.com/products/indianapolis

... daha sonra Shopify, product.liquid şablonu. Bu nedenle, şablonlarınız için yalnızca yukarıda listelenen dosya adlarını kullanmanız gerekir.

Shopify'ın mevcut URL ile ilgili olarak hangi şablonun görüntüleneceğini bilmesine ek olarak, bizim için çok özel bir dizi değişkeni kullanılabilir hale getirir. Bunlar "şablon değişkenleri" olarak bilinir ve verileri şablonlarımızda görüntülememizi sağlar.

Örneğin, product.liquid şablonumuzda, uygun şekilde adlandırılmış ürün değişken. Bu, ürünümüzün adını, açıklamasını, fiyatını ve kullanılabilirliğini şablonumuzda yayınlayabileceğimiz anlamına gelir. Şablonlarımızı ürünlerimizle ilgili verilerle doldurmak için Liquid ve şablon değişkenlerinin kombinasyonunu kullanacağız.

Mevcut şablon değişkenlerinin tam listesi için Mark Dunkley'in Shopify Hile Sayfasını ziyaret edin.

Sıvı: temel bilgiler

Liquid, tema tasarımcıları olarak hayatımızı kolaylaştırmak için burada. Bunu yapmanın ana yollarından biri, düzenlerin kullanılmasıdır. Düzenler, üstbilgi, ana gezinme, altbilgi vb. Gibi yaygın sayfa öğelerini dahil etmek için idealdir.

Yukarıdaki klasör yapımda, adında bir dosya göreceksiniz theme.liquid düzenler klasöründe. Theme.liquid'i ana şablonumuz olarak düşünebilirsiniz. Product.liquid gibi diğer tüm şablonlarımız bu ana şablon içinde oluşturulur. İsterseniz birden fazla düzene sahip olabilirsiniz, ancak varsayılan olan her zaman theme.liquid olarak adlandırılmalıdır.

United Pixelworkers’ın theme.liquid dosyasını görmedim, ancak aşağıda kırmızıyla belirtilen alanlar için işaretler içerdiğini hayal edebilirsiniz.

İşte temel bir theme.liquid düzeni nasıl görünebilir:

! DOCTYPE html>
html>
kafa>
{{content_for_header}}
başlık> Sayfa Başlığı Buraya Gelir / başlık>
/ head>
gövde>
{{content_for_layout}}
/ body>
/ html>

Çift küme parantezi içine sarılmış iki kelime öbeği göreceksiniz: {{content_for_header}} ve {{content_for_layout}}. Bunlar, Liquid uygulamasına ilişkin ilk örneklerimizdir.

Shopify, bir belgenin head> bölümüne belirli dosyaları eklemek için genellikle {{content_for_header}} kullanır: örneğin, izleme kodunu eklemek. {{content_for_layout}}, URL eşlemeli şablonumuzun içeriğinin görüneceği yerdir. Örneğin, bir ürün sayfasını görüntülüyorsak, product.liquid dosyamız, düzen dosyamızdaki {{content_for_layout}} yerine geçecektir.

Product.liquid'i anlama

Düzenlerin temellerini öğrendiğimize göre, artık bir şablona bakma zamanı.Mağazaların tamamı ürünlerle ilgilidir, o halde bakalım product.liquid.

İşte bir product.liquid şablonunun çok basit ama işlevsel bir örneği.

h2> {{product.title}} / h2>
{{ Ürün Açıklaması }}
{% if product.available%}
form action = "/ cart / add" method = "post">
id = "product-select" name = ’id’> seçin>
{product.varants içindeki varyant için%}
seçenek değeri = "{{variant.id}}"> {{variant.title}} - {variant.price} / seçenek>
{% endfor%}
/ seçin>
input type = "submit" name = "add" value = "Sepete ekle" id = "satın alma" />
/ form>
{% Başka %}
p> Bu ürün mevcut değil / p>
{% endif%}

Burada iş başında olan bir dizi temel Sıvı kavramı var. Sırayla onlara bakalım.

Çıktı

İlk kod satırı, kelime öbeğini içerir {{ ürün başlığı }}. Oluşturulduğunda bu, artık bildiğiniz gibi URL tarafından belirlenen ürünün başlığını çıkarır. Aşağıdaki United Pixelworkers örneğinde, ürün başlığı kısaca "Indianapolis" dir.

Liquid, nokta sözdizimi biçimini kullanır. Bu örnekte, {{product.title}}, ürün şablonu değişkenine ve onun title özelliğine eşittir. Ürün açıklamasını kullanarak aynı şekilde çıktı alabiliriz {{ Ürün Açıklaması }}.

Bu, Sıvı terimleriyle şu şekilde bilinir: çıktı. Tüm çıktı, aşağıdaki gibi çift kaşlı ayraçlarla gösterilir: {{your_output}}.

Mantık

Kodun bir sonraki satırında, kaşlı ayraç içinde bir ifade ve ardından bir% ifadesi göreceksiniz: bu durumda, {% if product.available%}. Bu, Sıvı olarak bilinen başka bir önemli kavramdır. mantık. Daha aşağıda, {% else%} ve son olarak {% endif%} ifadelerini göreceksiniz.

Bu eğer ifadesi bir veya daha fazla koşula bağlı olarak şablonumuzun ne göstereceğini dikte etmemizi sağlar: bu durumda, ürünümüzün mevcut olup olmadığı. Etkili bir şekilde bu, “eğer ürünümüz mevcutsa, onunla ilgili bilgileri gösterin; aksi takdirde kullanıcıya stokta kalmadığını bildiren bir mesaj gösterin ”.

Liquid'teki tüm mantık ifadeleri süslü parantez yüzde gösterimini kullanır, yani {% if…%}. İfadelerinizi uygun şekilde kapatmayı unutmayın, aksi takdirde başınız derde girer. Örneğin:

{% if product.available%}
Sepete ekle düğmesini burada göster
{% Başka %}
Ürünün bir sonraki satış tarihiyle ilgili mesajı görüntüle
{% endif%}

Filtreler

Sıvı, çıktımızı çeşitli şekillerde değiştirmemizi sağlar. Bunlardan biri filtre kullanmaktır. Filtreye giren içerik, diğer ucunda belirli bir şekilde değiştirilmiş olarak çıkacaktır.

Yukarıdaki product.liquid örneğine baktığınızda, fark edeceksiniz {money}. Varyant, bir ürünün varyasyonunu tanımlamak için kullanılan bir terimdir: örneğin, farklı renkler ve bedenler. Burada ilginç olan şey, fiyat çıktısını değiştirmek için bir filtre kullanmamızdır - bu durumda, para filtresini kullanarak. Bu, mağazanın para birimi simgesinin fiyatın önüne eklenmesiyle sonuçlanacaktır.

Diğer filtreler şunları içerir: strip_html, belirli bir metin parçasındaki tüm HTML etiketlerini çıkaracak ve ucase bu onu büyük harfe dönüştürecektir.

Ayrıca filtreleri birlikte birleştirebilirsiniz. Örneğin:

{article.content}

Bu örnekte, makale şablonu değişkeninin içerik özniteliğini alıp strip_html filtresine ve son olarak da kesme filtresine geçiriyoruz. Kes filtresinin, son çıktının ne kadar uzun olmasını istediğimizi belirlememize izin verdiğini fark edeceksiniz: bu durumda, 20 karakter.

Filtreler ayrıca, şablonlarda komut dosyası ve görüntü öğeleri oluşturmada hızlı bir şekilde çalışmamıza olanak tanır. İlişkili bir alt etiketi olan bir görüntünün çıktısını almak için filtre kullanmanın çok hızlı bir yolu:

{asset_url}

Bunu Shopify temamızda kullanmak, şablonumuzda aşağıdaki img öğesinin oluşturulmasına neden olur:

img src = "/ dosyalar / dükkanlar / dükkan_sayiniz / varlıklar / logo.png" alt = "Site Logosu" />

asset_url filtresi, geçerli temanın tam yolunu döndürdüğü için çok kullanışlıdır. varlıklar Klasör. Bu filtreyi kullanmak, temanızı birden çok mağazaya uygulamanıza ve yollar hakkında endişelenmenize gerek kalmamasına olanak tanır.

Sıradaki ne?

Umarım bu birkaç örnek size Liquid'in o kadar karmaşık olmadığını göstermiştir. Elbette bununla yapabileceğiniz çok daha fazla şey var, ancak çıktı, mantık ve filtrelerde uzmanlaşarak, bir Shopify teması oluşturmak için ihtiyaç duyacağınız şeylerin çoğunu anlama yolundasınız.