Bangun tema Shopify dengan mesin Liquid

Pengarang: Peter Berry

Tanggal Pembuatan: 14 Juli 2021

Tanggal Pembaruan: 13 Boleh 2024

Video: An Overview of Liquid: Shopify’s Templating Language

Isi

File dan folder tema
Memetakan URL ke template
Cairan: dasar
Memahami product.liquid
Keluaran
Logika
Filter
Apa berikutnya?
Sumber dan inspirasi lebih lanjut

Selama beberapa minggu terakhir, saya telah membangun tema Shopify untuk Viewport Industries, perusahaan Elliot Jay Stocks dan saya bentuk tahun lalu. Kami memilih Shopify karena beberapa alasan:

Ini memungkinkan kami untuk menjual produk digital dan fisik
Ini sepenuhnya dihosting, artinya tidak ada server yang perlu dikhawatirkan
Ini mendukung sejumlah gateway pembayaran yang terintegrasi dengan baik dengan bank kami
Ini berbasis tema, yang berarti kami dapat dengan mudah menggunakan kembali HTML, CSS, dan JavaScript situs yang ada

Shopify menggunakan mesin templat yang disebut Liquid untuk mengeluarkan data dari toko Anda ke templat Anda. Cairan mungkin adalah salah satu bahan dari tema Shopify yang belum pernah Anda gunakan sebelumnya dan bisa jadi tidak menyenangkan. Namun kabar baiknya adalah tidak terlalu sulit untuk memulai.

Jika Anda pernah menggunakan Smarty, ERB atau Twig, berikut ini yang akan Anda ketahui. Jika tidak, jangan khawatir: ini hanya masalah mempelajari beberapa aturan sederhana. Setelah Anda menambahkan keahlian Liquid ke perangkat pengembangan web Anda, Anda akan dapat mulai membangun tema untuk klien dalam waktu singkat.

File dan folder tema

Tema Shopify tidak lebih dari sejumlah file (file HTML dengan ekstensi .liquid, CSS, JS, gambar, dan sebagainya) dan folder. Tema dapat terlihat dan berfungsi seperti yang Anda inginkan: sebenarnya tidak ada batasan. Berikut struktur dasar sebuah tema:

aktiva
config
tata letak
theme.liquid
cuplikan
template
404. Cairan
artikel.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
halaman.liquid
product.liquid
search.liquid

Dengan file ini, Anda dapat membuat tema paling dasar. Tentu saja, Anda mungkin ingin menambahkan beberapa CSS, JavaScript, dan beberapa gambar. Anda akan meletakkannya di folder aset. (Perlu diperhatikan bahwa Anda saat ini tidak diizinkan subfolder dalam folder aset Anda.)

Untuk lebih lanjut tentang cara kerja tema, dan untuk mengetahui tentang folder config dan snippet, saya akan merekomendasikan membaca Tema dari Scratch dan Pengaturan Tema di Wiki Shopify.

Atau Anda dapat mendaftar ke program Mitra gratis, membuat toko percobaan dan memeriksa salah satu dari banyak tema gratis yang tersedia dari area admin toko percobaan Anda - cukup buka editor tema yang terletak di menu Tema.

Memetakan URL ke template

Tema Shopify bekerja dengan memetakan URL saat ini ke template tertentu. Misalnya, jika kita melihat produk yang memiliki URL berikut ...

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

... maka Shopify akan tahu cara menggunakan file product.liquid template. Karena alasan inilah Anda sebaiknya hanya menggunakan nama file yang tercantum di atas untuk template Anda.

Selain agar Shopify mengetahui template mana yang akan ditampilkan dalam kaitannya dengan URL saat ini, itu membuat sejumlah variabel yang sangat spesifik tersedia bagi kami. Ini dikenal sebagai 'variabel kerangka' dan memungkinkan kami menampilkan data di kerangka kami.

Misalnya di template product.liquid kami, kami memiliki akses ke nama yang tepat produk variabel. Ini berarti kami dapat menampilkan nama, deskripsi, harga, dan ketersediaan produk kami di template kami. Kami akan menggunakan kombinasi variabel Cair dan template untuk mengisi template kami dengan data yang berkaitan dengan produk kami.

Untuk daftar lengkap variabel template yang tersedia, kunjungi Lembar Cheat Shopify Mark Dunkley.

Cairan: dasar

Liquid hadir untuk memudahkan hidup kita sebagai desainer tema. Salah satu cara utama melakukannya adalah dengan menggunakan tata letak. Tata letak ideal untuk menyertakan elemen halaman umum seperti header, navigasi utama, footer, dan sebagainya.

Dalam struktur folder saya di atas, Anda akan melihat sebuah file bernama theme.liquid di folder tata letak. Anda dapat menganggap theme.liquid sebagai template utama kami. Semua template kami yang lain, seperti product.liquid, dirender di dalam template master ini. Anda dapat memiliki lebih dari satu layout jika Anda mau, tetapi yang default harus selalu bernama theme.liquid.

Saya belum melihat file theme.liquid United Pixelworkers, tapi Anda bisa membayangkannya berisi markup untuk area yang diberi garis merah di bawah.

Seperti inilah tampilan theme.liquid dasar:

! DOCTYPE html>
html>
kepala>
{{content_for_header}}
title> Judul Halaman Ada di Sini / judul>
/ head>
tubuh>
{{content_for_layout}}
/ body>
/ html>

Anda akan melihat dua frasa yang dibungkus dengan tanda kurung kurawal ganda: {{content_for_header}} dan {{content_for_layout}}. Ini adalah contoh pertama Liquid yang kami gunakan.

Shopify sering kali menggunakan {{content_for_header}} untuk menambahkan file tertentu ke head> bagian dokumen: misalnya, menambahkan kode pelacakan. {{content_for_layout}} adalah tempat konten template yang dipetakan URL kami akan muncul. Misalnya, jika kita melihat halaman produk, file product.liquid kita akan menggantikan {{content_for_layout}} di file layout kita.

Memahami product.liquid

Sekarang setelah kita mempelajari dasar-dasar tata letak, sekarang saatnya untuk melihat template.Toko adalah tentang produk, jadi mari kita lihat product.liquid.

Berikut adalah contoh yang sangat sederhana namun fungsional dari template product.liquid.

h2> {{product.title}} / h2>
{{ Deskripsi Produk }}
{% jika product.available%}
form action = "/ cart / add" method = "post">
pilih id = "product-select" name = ’id’>
{% untuk varian dalam product.variants%}
option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ pilih>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% lain %}
p> Produk ini tidak tersedia / p>
{% berakhir jika %}

Ada sejumlah konsep Liquid utama yang bekerja di sini. Mari kita lihat secara berurutan.

Keluaran

Baris kode pertama berisi frase {{product.title}}. Saat dirender, ini akan menampilkan judul produk, yang seperti yang Anda ketahui sekarang ditentukan oleh URL. Dalam contoh United Pixelworkers di bawah ini, judul produknya adalah 'Indianapolis'.

Liquid menggunakan format sintaks titik. Dalam contoh ini, {{product.title}} sama dengan variabel template produk dan atribut title-nya. Kami dapat menampilkan deskripsi produk dengan cara yang sama menggunakan {{ Deskripsi Produk }}.

Ini dikenal dalam istilah Liquid sebagai keluaran. Semua keluaran ditandai dengan tanda kurung kurawal ganda, sebagai berikut: {{your_output}}.

Logika

Pada baris kode berikutnya, Anda akan melihat pernyataan dalam tanda kurung kurawal diikuti dengan%: dalam kasus ini, {% jika product.available%}. Ini adalah konsep penting lainnya dalam Liquid yang dikenal sebagai logika. Lebih jauh ke bawah, Anda akan melihat {% else%} dan terakhir pernyataan {% endif%}.

Ini jika pernyataan memungkinkan kami untuk menentukan apa yang ditampilkan template kami, berdasarkan satu atau beberapa kondisi: dalam hal ini, apakah produk kami tersedia atau tidak. Secara efektif ini mengatakan, “jika produk kami tersedia, tunjukkan informasi yang berkaitan dengannya; jika tidak, tampilkan pesan yang memberi tahu pengguna bahwa stoknya habis ”.

Semua pernyataan logika dalam Liquid menggunakan notasi persentase kurung kurawal, yaitu {% if…%}. Ingatlah untuk menutup pernyataan Anda dengan benar, atau Anda akan mengalami masalah. Sebagai contoh:

{% jika product.available%}
Tampilkan tombol Tambahkan ke keranjang di sini
{% lain %}
Tampilkan pesan tentang kapan produk akan tersedia berikutnya
{% berakhir jika %}

Filter

Cairan memungkinkan kami untuk memanipulasi keluaran kami dalam beberapa cara. Salah satunya adalah dengan menggunakan filter. Konten yang masuk ke filter akan keluar dari ujung lain dan diubah dengan cara tertentu.

Melihat contoh product.liquid di atas, Anda akan melihatnya {uang}. Varian adalah istilah yang digunakan untuk mendeskripsikan variasi produk: misalnya, warna dan ukuran yang berbeda. Yang menarik di sini adalah kami menggunakan filter untuk mengubah keluaran harga - dalam hal ini, dengan menggunakan filter uang. Ini akan mengakibatkan simbol mata uang toko ditambahkan di depan harga.

Filter lainnya termasuk strip_html, yang akan menghapus semua tag HTML dari bagian teks tertentu dan ucase, yang akan mengubahnya menjadi huruf besar.

Anda juga dapat menggabungkan filter bersama. Sebagai contoh:

{article.content}

Dalam contoh ini, kami mengambil atribut konten dari variabel template artikel dan meneruskannya ke filter strip_html dan terakhir ke filter truncate. Anda akan melihat bahwa filter pemotongan memungkinkan kita untuk menentukan berapa lama kita ingin hasil akhirnya menjadi: dalam hal ini, 20 karakter.

Filter juga memungkinkan kita untuk membuat skrip dan elemen gambar dengan cepat dalam template. Berikut adalah cara yang sangat cepat dalam menggunakan filter untuk menghasilkan gambar dengan tag alt terkait:

{asset_url}

Menggunakan ini di tema Shopify kami akan menghasilkan elemen img berikut yang dirender di template kami:

img src = "/ files / Shops / your_shop_number / assets / logo.png" alt = "Logo Situs" />

Itu asset_url filter sangat berguna karena mengembalikan jalur lengkap ke tema saat ini aktiva map. Menggunakan filter ini memungkinkan Anda untuk menerapkan tema Anda di banyak toko dan tidak perlu khawatir tentang jalur.

Apa berikutnya?

Mudah-mudahan, beberapa contoh ini menunjukkan kepada Anda bahwa Liquid tidak terlalu rumit. Tentu saja, ada banyak hal yang dapat Anda lakukan dengannya, tetapi dengan menguasai output, logika, dan filter, Anda berada di jalur yang tepat untuk memahami sebagian besar dari apa yang Anda perlukan untuk membangun tema Shopify.