Pengenalan & Cara Kerja
Apa itu Dynamic Data, sintaks tag, picker UI, daftar context template, dan dua pola (Smart Element vs Primitive + Tag).
Dynamic Data adalah sistem placeholder yang otomatis diisi data nyata saat halaman dirender. Kamu menulis tag seperti {product_title} di field text/link element builder; saat user buka halaman produk, tag itu berubah jadi nama produk yang sebenarnya.
Inti manfaatnya: 1 template = banyak halaman. Bikin satu template Single Product, lalu semua produk pakai template yang sama — datanya otomatis menyesuaikan per produk.
Sintaks
Ada dua bentuk tag dengan aturan beda:
Single brace — {tag_name}
Untuk data entity — bisa entity utama halaman atau row aktif dalam Query Loop. Contoh: {product_title}, {post_content}, {site_name}. Tag yang sama dipakai di Single Product template (resolve ke produk halaman) DAN di dalam Query Loop (resolve ke row iterasi) — tidak ada sintaks terpisah.
Double brace — {{loop.*}} (loop metadata saja)
Khusus untuk metadata loop yang tidak punya padanan di entity: {{loop.index}}, {{loop.number}}, {{loop.count}}, {{loop.first}}, {{loop.last}}. Hanya valid di dalam element yang queryLoop.enabled = true.
{{loop.*}} di luar Query Loop tidak akan resolve (hasilnya tetap teks {{...}} mentah). Single-brace di context yang tidak punya tag tersebut juga tidak resolve.
Cara Pakai — Picker UI
Pada field text/link element yang support dynamic data, muncul tombol kecil ikon { } (database) di sudut kanan. Workflow-nya:
- Klik tombol
{ }— popover muncul. - Popover otomatis menampilkan tag yang valid untuk template aktif (mis. di Single Product template menampilkan tag
product_*). - Kalau parent element pakai Query Loop, picker juga menampilkan entity tags untuk data source loop tersebut DAN grup
{{loop.*}}metadata. - Klik tag — otomatis disisipkan ke field. Kalau tag punya suggested filter (mis.
{product_price_raw}dapat|currency), filter ikut ditambahkan.
Field yang Support Dynamic Data
Tidak semua input di inspector menerima tag. Yang support: field bertanda flag hasDynamicData: true di control spec. Daftar umumnya:
- Heading —
text(mode plain),link - Basic Text —
text,link - Rich Text —
body - Button —
text,link,whatsappMessage - Image —
src,alt,link,whatsappMessage - Text Link —
text,link - Menu —
brand.text,brand.tagline,items[*].label(recursive) - Product Image Gallery —
featuredImageSrc,galleryImagesSrc
Template Context
Setiap template type dipetakan ke salah satu context, yang menentukan tag mana yang resolve. Daftar context:
| Context | Berlaku di template | Tag yang resolve |
|---|---|---|
product | single_product, single_bundle | {product_*} + {site_*} |
post | single_post | {post_*} + {site_*} |
page | single_page | {page_*} + {site_*} |
course | single_course | {course_*} + {site_*} |
archive | post_archive, shop_catalog, course_archive | {archive_*}, {post_count} |
loop | di dalam element queryLoop.enabled | Entity tags sesuai data source loop ({product_*} / {post_*} / {course_*}) + {{loop.*}} metadata + {site_*} |
global | section, header, footer, checkout, dll | {site_*} saja |
Dua Pola: Smart Element vs Primitive + Tag
Ada dua cara menampilkan data dinamis di builder. Pilih sesuai kebutuhan:
Pola A — Smart Element
Element khusus yang sudah auto-fill dari context. Tidak ada field text untuk diketik manual.
productTitle— render judul produk. Props:level(h1–h6),alignment,linkToProduct.productDescription— render deskripsi. Prop:plainText(boolean).postTitle,pageTitle,courseTitle— analog untuk post/page/course.
Pakai kalau cuma butuh nampilkan data apa adanya — set-up cepat, props minimal.
Pola B — Primitive + Tag
Pakai element generik (heading, basicText, richText) + sisipkan tag manual lewat picker.
Beli {product_title} sekarang!Pakai kalau butuh komposisi: campur teks statis + tag + filter, atau ingin format custom (bold di tengah judul, dll).
Lanjut ke halaman Daftar Tags & Filters untuk reference lengkap, atau Resep & Pattern Umum untuk pola siap-pakai.