10 Tags Variabel dan Percabangan

Di 09 Dasar Liquid kita kenalan sama tiga bahan Liquid. Sekarang kita bedah tag-tag pertama: yang bikin variabel dan yang bikin keputusan.

Tag itu instruksi di dalam {% %}. Di bab ini kita bahas dua kelompok yang paling sering dipakai: tag variabel dan tag percabangan. Tag perulangan ada di 11 Tags Perulangan, dan tag khusus theme di 12 Tags Khusus Theme.

Peringatan Umum: Jangan Nimpa Object Bawaan

Sebelum masuk ke tag-tagnya, ada satu peringatan yang berlaku buat semua tag pembuat variabel: object bawaan Liquid bisa ketimpa sama variabel yang namanya sama. Kalau kamu bikin variabel bernama product, shop, atau cart, object aslinya jadi gak bisa diakses lagi di file itu.

❌ salah, object product asli ketimpa, semua kode di bawahnya rusak

{% assign product = collection.products.first %}

✅ benar, pakai nama yang beda

{% assign first_product = collection.products.first %}

Tag Variabel

1. assign

Bikin variabel baru. Nilainya bisa tipe dasar apapun, object, atau properti object, dan boleh langsung dikasih filter:

{% assign variable_name = value %}

Contoh:

{%- assign product_title = product.title | upcase -%}
{{ product_title }}

Kalau judulnya “Health potion”, hasilnya:

HEALTH POTION

Ini tag yang bakal paling sering kamu tulis. Gunanya bukan cuma buat nyimpen nilai, tapi juga buat ngasih nama yang jelas ke hasil perhitungan yang rumit, dan buat nyimpen hasil filter yang mahal biar gak dihitung berulang-ulang. Bahasan performanya di 58 Performance Liquid.

2. capture

Bikin variabel baru yang nilainya string, tapi isinya hasil render dari blok Liquid. Jadi kamu bisa nyusun string yang kompleks pakai logika dan variabel:

{% capture variable %}
  value
{% endcapture %}

Contoh:

{%- assign up_title = product.title | upcase -%}
{%- assign down_title = product.title | downcase -%}
{%- assign show_up_title = true -%}
{%- capture title -%}
  {% if show_up_title -%}
    Upcase title: {{ up_title }}
  {%- else -%}
    Downcase title: {{ down_title }}
  {%- endif %}
{%- endcapture %}
{{ title }}

Hasilnya:

Upcase title: HEALTH POTION

Bedanya sama assign: assign nerima satu ekspresi, capture nerima satu blok. Kalau nilai yang mau disimpan butuh if, for, atau gabungan beberapa baris, pakai capture. Hasilnya selalu string, walaupun isinya angka.

❌ salah, assign gak bisa nampung logika bercabang

{% assign label = if product.available then 'Ready' else 'Sold out' %}

✅ benar, pakai capture

{% capture label %}
  {% if product.available %}Ready{% else %}Sold out{% endif %}
{% endcapture %}

3. echo

Nampilin ekspresi. Fungsinya sama persis kaya {{ }}, bedanya echo bisa dipakai di dalam tag liquid (dibahas di bawah), sementara {{ }} nggak bisa. Filter juga bisa dipakai:

{% echo product.title %}
{% liquid
  echo product.price | money
%}

Kalau harganya 1000 dan judulnya “Health potion”, hasilnya:

Health potion
$10.00

Di luar tag liquid, gak ada alasan pakai echo, cukup {{ }}. Tapi di dalam tag liquid, echo itu satu-satunya cara nampilin sesuatu.

4. increment dan decrement

increment bikin variabel baru dengan nilai awal 0, dan naik 1 tiap kali dipanggil. Sekaligus nampilin nilainya:

{% increment variable %}
{% increment variable %}
{% increment variable %}

Hasilnya:

0
1
2

decrement kebalikannya: nilai awal -1, turun 1 tiap dipanggil:

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

Hasilnya:

-1
-2
-3

Ada dua aturan yang bikin tag ini beda dari assign:

1. Variabel increment dan decrement terpisah dari variabel assign dan capture. Jadi {% assign counter = 5 %} terus {% increment counter %} bakal nampilin 0, bukan 6, karena itu dua variabel yang beda walaupun namanya sama. Tapi increment dan decrement saling berbagi variabel.
2. Variabelnya unik per file layout, template, atau section, tapi dibagi ke snippet yang di-render dari file itu. Jadi counter di section A dan section B itu beda, tapi snippet yang dipanggil section A ngelanjutin counter section A.

Kegunaan praktisnya: bikin ID unik buat elemen HTML yang diulang, misalnya id="slide-{% increment slide_id %}".

Tag liquid

Ini tag yang bikin kode Liquid jauh lebih enak dibaca. Biasanya tiap tag butuh {% %} sendiri-sendiri. Dengan tag liquid, kamu bisa nulis banyak tag dalam satu pembungkus, satu tag per baris, tanpa {% %}:

{% liquid
  # Show a message that's customized to the product type
  assign product_type = product.type | downcase
  assign message = ''
  case product_type
    when 'health'
      assign message = 'This is a health potion!'
    when 'love'
      assign message = 'This is a love potion!'
    else
      assign message = 'This is a potion!'
  endcase
  echo message
%}

Kalau tipenya “Health”, hasilnya:

This is a health potion!

Aturannya: tiap tag harus di barisnya sendiri, karena gak ada pembatas {% %} yang misahin. Dan buat nampilin sesuatu, pakai echo, bukan {{ }}.

❌ salah, {{ }} gak jalan di dalam tag liquid

{% liquid
  assign name = 'Potion'
  {{ name }}
%}

✅ benar, pakai echo

{% liquid
  assign name = 'Potion'
  echo name
%}

Bandingin dua kode ini yang hasilnya sama:

{% assign a = 1 %}
{% assign b = 2 %}
{% assign c = a | plus: b %}
{{ c }}

{% liquid
  assign a = 1
  assign b = 2
  assign c = a | plus: b
  echo c
%}

Yang kedua jauh lebih rapi kalau logikanya panjang. Kebanyakan theme modern kaya Dawn pakai tag liquid buat blok logika.

Komentar

1. comment

Mencegah ekspresi dirender. Teks di dalamnya gak ditampilin, dan kode Liquid di dalamnya di-parse tapi gak dieksekusi:

{% comment %}
  content
{% endcomment %}

Karena masih di-parse, kode Liquid di dalam komentar tetap harus valid secara sintaks. Komentar yang isinya tag if tanpa endif bakal bikin error.

2. Komentar Inline

Bentuk pendeknya, pakai # di dalam satu tag:

{% # this is a comment %}

Bisa dipakai buat ngasih catatan atau mematikan logika sementara:

{% # this is a comment %}
{% # for i in (1..3) -%}
  {{ i }}
{% # endfor %}
{%
  ###############################
  # This is a comment
  # across multiple lines
  ###############################
%}

Buat komentar multi-baris, tiap baris harus diawali #, kalau nggak bakal error sintaks.

Di dalam tag liquid, komentar inline juga jalan, tapi tiap baris yang mau dikomentari harus dikasih # sendiri:

{% liquid
  # this is a comment
  assign topic = 'Learning about comments!'
  echo topic
%}

Hasilnya:

Learning about comments!

Bedanya sama komentar HTML <!-- -->: komentar HTML tetap dikirim ke browser dan bisa dibaca siapa aja lewat view source. Komentar Liquid hilang total waktu dirender. Jadi catatan internal pakai komentar Liquid, jangan HTML.

❌ kurang aman, catatan internal kebaca pengunjung lewat view source

<!-- TODO: harga ini belum termasuk diskon member -->

✅ benar, hilang waktu dirender

{% # TODO: harga ini belum termasuk diskon member %}

3. raw

Kebalikan dari komentar: nampilin kode Liquid sebagai teks tanpa dirender:

{% raw %}
{{ 2 | plus: 2 }} equals 4.
{% endraw %}

Hasilnya, dengan {{ }}-nya utuh:

{{ 2 | plus: 2 }} equals 4.

Kepakai kalau kamu perlu nulis sintaks yang mirip Liquid tapi bukan Liquid, misalnya template JavaScript kaya Mustache yang juga pakai {{ }}.

Tag Percabangan

1. if

Ngerender ekspresi kalau kondisinya true:

{% if condition %}
  expression
{% endif %}

Contoh:

{% if product.compare_at_price > product.price %}
  This product is on sale!
{% endif %}

Ingat aturan dari 09 Dasar Liquid > Truthy dan Falsy: yang dianggap false cuma nil dan false. Jadi {% if some_string %} bakal jalan walaupun string-nya kosong.

2. elsif

Buat ngecek beberapa kondisi berurutan:

{% if product.type == 'Love' %}
  This is a love potion!
{% elsif product.type == 'Health' %}
  This is a health potion!
{% endif %}

Ejaannya elsif, bukan elseif atau else if. Ini salah ketik yang sering banget kejadian buat yang biasa pakai bahasa lain.

❌ salah, Liquid gak kenal elseif

{% elseif product.type == 'Health' %}

✅ benar

{% elsif product.type == 'Health' %}

3. else

Ekspresi default kalau gak ada kondisi yang cocok. Bisa dipakai sama if, unless, dan case:

{% if product.available %}
  This product is available!
{% else %}
  This product is sold out!
{% endif %}

4. unless

Kebalikan if: ngerender ekspresi kecuali kondisinya true:

{% unless product.has_only_default_variant %}
  // Variant selection functionality
{% endunless %}

unless juga bisa pakai elsif dan else. Kapan pakai unless daripada if ... != ...? Waktu bacaannya lebih natural: “kecuali produk cuma punya varian default, tampilin pemilih varian” lebih enak dibaca daripada “kalau produk gak cuma punya varian default”. Tapi jangan pakai unless dengan kondisi yang udah negatif, otaknya jadi muter.

❌ bikin bingung, negatif ganda

{% unless product.available == false %}

✅ jelas

{% if product.available %}

5. case

Ngerender ekspresi tertentu tergantung nilai satu variabel. Cocok kalau kamu ngecek satu variabel terhadap banyak kemungkinan nilai, daripada if / elsif panjang:

{% case variable %}
  {% when first_value %}
    first_expression
  {% when second_value %}
    second_expression
  {% else %}
    third_expression
{% endcase %}

Contoh:

{% case product.type %}
  {% when 'Health' %}
    This is a health potion.
  {% when 'Love' %}
    This is a love potion.
  {% else %}
    This is a potion.
{% endcase %}

Satu when bisa nerima beberapa nilai, dipisah koma atau or. Ekspresinya jalan kalau variabelnya cocok sama salah satu:

{% case product.type %}
  {% when 'Love' or 'Luck' %}
    This is a love or luck potion.
  {% when 'Strength','Health' %}
    This is a strength or health potion.
  {% else %}
    This is a potion.
{% endcase %}

Kalau tipenya “Health”, hasilnya:

This is a strength or health potion.

Bedanya sama if: case cuma ngecek kesamaan (==), gak bisa > atau contains. Kalau butuh perbandingan, pakai if.

❌ salah, when gak nerima operator perbandingan

{% case product.price %}
  {% when > 1000 %}

✅ benar, pakai if

{% if product.price > 1000 %}

Kapan Pakai yang Mana

Biar gak bingung milih:

1. Satu nilai sederhana atau hasil filter → assign.
2. Nilai yang butuh logika atau beberapa baris → capture.
3. Nomor urut atau ID unik → increment.
4. Banyak tag berturut-turut → bungkus pakai liquid, nampilin pakai echo.
5. Kondisi benar/salah, atau perbandingan → if / elsif / else.
6. Kondisi yang bacaannya “kecuali” → unless.
7. Satu variabel dicocokin ke banyak nilai → case / when.

Ringkasan

1. Jangan bikin variabel yang namanya sama dengan object bawaan (product, shop, cart), object aslinya bakal ketimpa.
2. assign buat satu ekspresi, capture buat satu blok, dan hasil capture selalu string.
3. echo itu {{ }} versi tag, satu-satunya cara nampilin sesuatu di dalam tag liquid.
4. increment mulai dari 0 naik 1, decrement mulai dari -1 turun 1, dan variabelnya terpisah dari assign tapi berbagi satu sama lain, serta unik per file tapi dibagi ke snippet-nya.
5. Tag liquid bikin banyak tag jadi satu blok tanpa {% %}, satu tag per baris.
6. Komentar Liquid hilang waktu dirender, komentar HTML dikirim ke browser. Isi {% comment %} tetap di-parse jadi harus valid.
7. raw nampilin kode Liquid sebagai teks mentah.
8. if / elsif / else buat kondisi umum. Ejaannya elsif.
9. unless itu kebalikan if, jangan dipakai dengan kondisi yang udah negatif.
10. case / when buat nyocokin satu variabel ke banyak nilai, cuma ngecek kesamaan, dan satu when boleh punya banyak nilai dipisah koma atau or.

---

Bab selanjutnya kita bahas tag perulangan: for dengan semua parameternya, break, continue, cycle, tablerow, dan paginate buat mecah daftar panjang jadi beberapa halaman.