Sayudha

20 Filters Money, Metafield, Cart, Customer, dan Localization

Properties2
descriptionFilter format uang, nampilin metafield, keranjang, pembayaran, alamat, berat, unit price, dan terjemahan dengan filter t
tagsshopify, liquid, dasar

10 menit baca

Ini bab penutup Bagian 2. Sisa filter yang belum dibahas: uang, metafield, keranjang, pembayaran, dan yang paling penting buat toko multi bahasa, filter t.

Setelah bab ini, kamu udah kenal semua tag, object, dan filter Liquid. Bagian 3 bakal ngerangkai semuanya jadi arsitektur theme yang utuh.

Filter Uang

Ingat dari 14 Objects Produk dan Koleksi > Soal Harga Subunit: semua harga itu angka subunit kaya 1000. Filter-filter ini yang ngubahnya jadi tampilan yang bisa dibaca manusia, sesuai format yang diatur merchant di Shopify admin (Settings > Store details > Currency formatting).

Ada dua setting format di sana: HTML without currency (misalnya ${{amount}}) dan HTML with currency (misalnya ${{amount}} CAD). Filter-filter di bawah milih salah satunya:

  1. money, pakai format tanpa kode mata uang. 1000 | money → $10.00. Ini yang paling sering dipakai.
  2. money_with_currency, pakai format dengan kode mata uang. → $10.00 CAD. Buat toko multi mata uang biar pelanggan gak salah kira.
  3. money_without_currency, angka doang tanpa simbol. → 10.00.
  4. money_without_trailing_zeros, buang desimal kalau nol. 1000 | money_without_trailing_zeros → $10, tapi 1050 tetap $10.50.
  5. money_amount, angka desimal polos tanpa simbol, tanpa pemisah ribuan, tanpa format lokal. → 10.0. Buat dikirim ke JavaScript atau atribut data-*.

❌ salah, nampilin subunit mentah

Harga: {{ product.price }}

✅ benar

Harga: {{ product.price | money }}

❌ salah, money ngasilin string berformat yang gak bisa dihitung JavaScript

<div data-price="{{ product.price | money }}">

✅ benar, angka polos

<div data-price="{{ product.price | money_amount }}">

Bahasan format mata uang lengkapnya di 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B.

currency_selector (Deprecated)

Bikin <select> mata uang di dalam form currency. Dua-duanya deprecated dan gak ada pengganti langsung, karena form currency diganti form localization. Cara bikin pemilih negara yang benar ada di 47 Markets Multi Currency, Multi Bahasa, Localization.

Filter Metafield

Dari 15 Objects Konten > Metafield kita tau metafield punya value yang bentuknya tergantung tipe. Dua filter ini bikin kamu gak perlu mikirin tipenya, langsung dapat output yang pas.

Catatan buat dua-duanya: belum mendukung metafield list kecuali list.single_line_text_field dan list.metaobject_reference.

1. metafield_tag

Bikin elemen HTML yang sesuai tipe metafield, lengkap dengan class metafield-<tipe>:

  1. Teks (single_line_text_field, multi_line_text_field) → <span>.
  2. rich_text_field → <div> berisi HTML lengkap (heading, list, bold).
  3. Referensi (product_reference, collection_reference, page_reference, variant_reference, url) → <a> dengan link ke object-nya.
  4. date dan date_time → <time datetime="...">, nilainya dilokalisasi ke bahasa pelanggan.
  5. money → <span> yang diformat pakai setting HTML with currency.
  6. json → <script type="application/json">.
  7. boolean, color, rating, number_integer, number_decimal → <span>.
{{ product.metafields.information.expiry | metafield_tag }}

Hasilnya kira-kira <time datetime="2023-12-31" class="metafield-date">31 Desember 2023</time>.

Ini cara paling cepat nampilin metafield, terutama rich text yang kalau dibaca .value mentah bentuknya JSON rumit. metafield_tag yang ngubahnya jadi HTML.

2. metafield_text

Bikin teks polos dari metafield, tanpa tag HTML:

  1. Teks → teksnya.
  2. Referensi → judul object-nya (judul produk, judul halaman), atau URL buat file_reference.
  3. weight, volume, dimension → nilai plus satuan, desimal dibulatkan ke 2 tempat.
  4. list.single_line_text_field → format kalimat: Toronto, Ottawa, and Vancouver.
  5. rich_text_field → teks polos tanpa format.
  6. money → diformat dengan mata uang.
{{ product.metafields.information.dosage | metafield_text }}

Buat metaobject_reference dan list.metaobject_reference, wajib parameter field buat nentuin field mana dari metaobject yang ditampilin (cuma boleh field bertipe single_line_text_field):

{{ product.metafields.information.ingredients | metafield_text: field: 'name' }}

Hasilnya Spinach, Kale, and Mushrooms.

Kapan pakai yang mana: metafield_tag buat konten yang ditampilin di halaman (butuh markup), metafield_text buat atribut, meta tag, atau tempat yang gak boleh ada HTML.

Filter Keranjang

1. item_count_for_variant

Jumlah total sebuah varian di keranjang, dari ID variannya:

{{ cart | item_count_for_variant: 39888235757633 }}

Buat nampilin “2 di keranjang” di tombol produk, atau ngecek batas pembelian.

2. line_items_for

Ambil baris-baris keranjang yang berisi produk atau varian tertentu:

{% assign product = all_products['bloodroot-whole'] %}
{% assign line_items = cart | line_items_for: product %}
Total cart quantity for product: {{ line_items | sum: 'quantity' }}

Nerima object product (semua variannya) atau variant (cuma varian itu). Bedanya sama item_count_for_variant: ini ngasih array line_item yang bisa diolah lebih jauh, bukan cuma angka.

Filter Pembayaran

1. payment_button

Bikin wadah buat tombol accelerated checkout (Buy it now, Shop Pay, PayPal, Apple Pay) di dalam form produk:

{% form 'product', product %}
  ...
  {{ form | payment_button }}
{% endform %}

Hasilnya <div data-shopify="payment-button" class="shopify-payment-button"> yang isinya diisi Shopify secara dinamis sesuai metode pembayaran yang tersedia buat pelanggan itu. Wajib di dalam {% form 'product' %}. Bahasannya di 43 Accelerated Checkout.

2. payment_terms

Bikin banner Shop Pay Installments (“Bayar 4x tanpa bunga”), di dalam form produk atau form keranjang:

{% form 'product', product %}
  {{ form | payment_terms }}
{% endform %}

Bahasannya di 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B.

3. payment_type_img_url dan payment_type_svg_tag

Logo metode pembayaran dari shop.enabled_payment_types (dibahas di 13 Objects Global > shop):

  1. payment_type_img_url, URL SVG-nya, buat <img>.
  2. payment_type_svg_tag, langsung <svg> inline, bisa diwarnai CSS.
{% for type in shop.enabled_payment_types -%}
  {{ type | payment_type_svg_tag }}
{% endfor %}

Ini yang bikin deretan logo Visa, Mastercard, PayPal di footer, dan otomatis nyesuaiin sama provider yang aktif dan negara pelanggan.

Filter Alamat, Berat, dan Satuan

1. format_address

Nampilin object address sebagai HTML yang urutan komponennya sesuai negara alamat itu:

{{ shop.address | format_address }}

Hasilnya:

<p>Polina&#39;s Potions, LLC<br>150 Elgin Street<br>8th floor<br>Ottawa ON K2P 1L4<br>Canada</p>

Kenapa penting? Karena tiap negara punya urutan alamat beda. Amerika nulis kota, negara bagian, kode pos; Jepang kebalikannya. format_address udah tau semuanya.

❌ salah, urutannya cuma benar buat satu negara

<p>{{ address.address1 }}<br>{{ address.city }}, {{ address.province }} {{ address.zip }}</p>

✅ benar

{{ address | format_address }}

2. weight_with_unit

Format berat varian sesuai satuan di pengaturan toko:

{{ variant.weight | weight_with_unit }}

variant.weight selalu gram, jadi 200 | weight_with_unit bisa jadi 0.2 kg kalau toko pakai kg. Buat pakai satuan yang diatur di varian itu sendiri:

{{ variant.weight_in_unit | weight_with_unit: variant.weight_unit }}

Hasilnya 200 g.

3. unit_price_with_measurement

Format harga per satuan (wajib di beberapa negara Eropa buat produk makanan dan kosmetik):

{%- assign variant = product.variants.first -%}
{{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}

Hasilnya $50.00/kg. Bisa dikombinasi filter uang lain: variant.unit_price | money_with_currency | unit_price_with_measurement: variant.unit_price_measurement → $50.00 CAD/kg. Bahasannya di 42 Harga Diskon, Currency, Unit Pricing, Installments, B2B.

Filter Event

standard_event_data bikin JSON buat standard events Shopify (pelacakan analitik standar). Dipakai di object product, collection, dan cart, dengan tipe event yang cuma "view":

{{ product | standard_event_data: "view", context: "page" }}

Hasilnya:

{"product":{"id":6786188247105,"title":"Health potion","handle":"health-potion","selectedVariant":null},"context":"page","selectedOptions":[]}

Parameter context buat produk: page, search, collection, dialog, recommendation. Buat keranjang: page, dialog. Koleksi gak pakai context. Bahasannya di 54 Best Practices Umum.

Filter Terjemahan: t

Ini filter paling penting di bab ini, karena theme yang baik gak boleh punya teks hardcode. Semua teks yang dilihat pelanggan (“Tambah ke keranjang”, “Habis”, “Cari”) harus lewat file terjemahan biar merchant bisa ngubah dan nerjemahin tanpa nyentuh kode.

Filter aslinya bernama translate, tapi alias t yang selalu dipakai. Dia ngambil teks dari file locale di folder locales/ sesuai bahasa yang aktif.

1. Cara Dasar

File locale itu JSON bertingkat tiga: kategori → grup → deskripsi:

{
  "blog": {
    "comment": {
      "email": "Your email"
    }
  }
}

Dipanggil pakai kunci bertitik, wajib dalam kutip tunggal:

<span>{{ 'blog.comment.email' | t }}</span>

Kalau toko punya en.default.json, fr.json, dan es.json, hasilnya otomatis:

// English
<span>Your email</span>
// French
<span>Votre adresse courriel</span>
// Spanish
<span>Su correo electrónico</span>

❌ salah, teks hardcode, merchant gak bisa ngubah atau nerjemahin

<button>Add to cart</button>

✅ benar

<button>{{ 'products.product.add_to_cart' | t }}</button>

Theme Check punya aturan TranslationKeyExists yang ngecek kuncinya beneran ada di file locale, dibahas di 67 Theme Check Referensi Aturan M–V.

2. Interpolasi

Teks terjemahan bisa punya variabel pakai {{ nama }}:

{
  "layout": {
    "header": {
      "hello_user": "Hello {{ name }}!"
    }
  }
}

Nilainya dikirim sebagai parameter filter:

{% if customer %}
  <h1>{{ 'layout.header.hello_user' | t: name: customer.first_name }}</h1>
{% endif %}

Hasilnya <h1>Hello Jane!</h1>. Boleh lebih dari satu, dipisah koma:

{{ 'layout.header.hello_user' | t: first_name: customer.first_name, last_name: customer.last_name }}

Kenapa gak 'Hello ' | append: customer.first_name aja? Karena urutan kata beda tiap bahasa. Di Jepang, nama datang duluan baru sapaan. Dengan interpolasi, penerjemah bisa naruh {{ name }} di mana aja.

3. Pluralisasi

Ingat peringatan pluralize di 18 Filters String, Math, dan Array > 7. Pluralize yang cuma bahasa Inggris? Ini solusinya. Kirim parameter count, dan file locale nyediain bentuk-bentuk jamaknya sesuai aturan CLDR (standar Unicode):

{
  "customers": {
    "orders": {
      "order_count": {
        "one": "You've made {{ count }} order with us",
        "other": "You've made {{ count }} orders with us"
      }
    }
  }
}
<h1>{{ 'customers.orders.order_count' | t: count: customer.orders_count }}</h1>

Hasilnya You've made 1 order with us atau You've made 12 orders with us. Kunci yang didukung: zero, one, two, few, many, other. Bahasa Inggris cuma butuh one dan other, Arab butuh semuanya, Indonesia cukup other. Tiap file bahasa ngatur sendiri, kodenya tetap sama.

4. HTML di Terjemahan

Bawaannya teks terjemahan di-escape, jadi <strong> bakal tampil sebagai teks &lt;strong&gt;. Kalau terjemahannya emang butuh HTML, akhiri nama kuncinya dengan _html:

{
  "layout": {
    "header": {
      "announcement_bar_text_html": "Spend $50 and get <strong>FREE</strong> shipping"
    }
  }
}

Ini juga berguna buat terjemahan yang dipakai di dalam <script> atau file .js.liquid.

❌ salah, <strong> tampil sebagai teks

"announcement_bar_text": "Spend $50 and get <strong>FREE</strong> shipping"

✅ benar

"announcement_bar_text_html": "Spend $50 and get <strong>FREE</strong> shipping"

5. Locale di Section

Filter t juga bisa baca kunci dari object locales di dalam {% schema %} sebuah section. Terjemahan di situ cuma bisa diakses section itu, cocok buat section mandiri yang mau dibagi ke banyak theme. Teks yang global tetap taruh di folder locales/.

Jangan ketuker: terjemahan lain di schema section yang bukan di bawah locales itu buat teks merchant di theme editor (label setting), dan itu gak pakai filter t. Bahasannya di 26 Sections dan Section Schema dan 33 Locales dan Translasi.

6. Tanggal Sadar Bahasa

Udah dibahas di 18 Filters String, Math, dan Array > date dan 19 Filters HTML, URL, Media, Color, dan Font > 4. time_tag: date: format: 'nama' dan time_tag: format: 'nama' ngambil format dari locale, dan format kustom didefinisikan di date_formats file locale.

Bagian 2 Selesai: Peta Filter

Biar gampang nyari lagi, ini semua filter dikelompokkan per bab:

  1. 18 Filters String, Math, dan Array: upcase, downcase, capitalize, camelize, append, prepend, remove*, replace*, strip*, strip_html, newline_to_br, truncate*, split, join, slice, handleize, pluralize, escape*, url_*, base64_*, hash, plus, minus, times, divided_by, modulo, abs, ceil, floor, round, at_least, at_most, first, last, size, where, reject, find*, has, compact, uniq, map, concat, reverse, sum, sort*, default, date, json.
  2. 19 Filters HTML, URL, Media, Color, dan Font: asset_url, file_url, inline_asset_content, image_url, image_tag, placeholder_svg_tag, media_tag, video_tag, external_video_*, model_viewer_tag, script_tag, stylesheet_tag, preload_tag, time_tag, structured_data, link_to*, url_for_*, within, highlight*, color_*, brightness_difference, font_*, default_errors, default_pagination, customer_*_link, login_button, avatar.
  3. Bab ini: money*, metafield_tag, metafield_text, item_count_for_variant, line_items_for, payment_*, format_address, weight_with_unit, unit_price_with_measurement, standard_event_data, t.

Ringkasan

  1. money buat tampilan harga umum, money_with_currency buat toko multi mata uang, money_amount buat JavaScript. Formatnya ngikutin pengaturan merchant.
  2. currency_selector dan form currency deprecated, pakai form localization.
  3. metafield_tag bikin HTML sesuai tipe metafield, metafield_text bikin teks polos. Buat metaobject wajib parameter field.
  4. item_count_for_variant ngasih angka, line_items_for ngasih array line_item buat produk atau varian tertentu di keranjang.
  5. payment_button dan payment_terms wajib di dalam {% form 'product' %} (atau form cart buat payment_terms).
  6. payment_type_svg_tag bikin deretan logo pembayaran yang otomatis sesuai provider aktif.
  7. format_address ngurutin komponen alamat sesuai negaranya, jangan susun manual.
  8. weight_with_unit dan unit_price_with_measurement buat berat dan harga per satuan yang diformat.
  9. Semua teks pelanggan harus lewat t, kunci dalam kutip tunggal, struktur kategori → grup → deskripsi.
  10. Interpolasi pakai {{ nama }} di locale dan t: nama: nilai di Liquid, biar urutan kata bisa beda tiap bahasa.
  11. Pluralisasi pakai t: count: n dengan kunci zero/one/two/few/many/other di locale, sesuai aturan tiap bahasa.
  12. Akhiran _html di kunci terjemahan biar HTML-nya gak di-escape.

Bagian 2 selesai, kamu udah kenal seluruh bahasa Liquid. Bab selanjutnya kita mulai Bagian 3 dengan bedah struktur theme secara utuh: tiap folder, tiap jenis file, snippet, dan batasan-batasan yang harus dipatuhi.

Tampilan Grafik

Tautan Balik