Resep & Pattern Umum

Pola siap-pakai untuk kasus umum. Copy-paste, ganti tag sesuai context.

1. Resep Harga Produk

Harga normal

{product_price_raw|currency}

Pakai di field text element heading / basicText / button. Contoh tombol CTA:

Beli Sekarang — {product_price_raw|currency}

Diskon dengan harga asli di-coret

{product_original_price_raw|currency} {product_sale_price_raw|currency}

Untuk efek strikethrough visual, pakai richText element dengan inline formatting, atau dua basicText element terpisah (yang satu di-style strikethrough lewat Style tab).

2. Resep Excerpt / Preview Teks

Memotong deskripsi produk dengan ellipsis:

{product_description|strip_html|truncate:120}

Preview konten post:

{post_content|strip_html|truncate:200}

3. Resep Gambar dengan Preset

Pilih preset sesuai konteks (lihat halaman Tags & Filters untuk daftar lengkap):

{product_image|image_url:cardMedium}
{post_featured_image|image_url:cardWide}
{site_logo|image_url:logo}
{page_featured_image|image_url:hero}

4. Resep Tanggal

Format panjang:

{post_date|date:long}

→ "5 Mei 2026"

Copyright footer:

© {site_year} {site_name}

→ "© 2026 Acme Store"

Countdown sale (pakai di basicText):

Sale berakhir: {product_sale_ends_at|date:long}

5. Resep Fallback

Penulis kosong:

{post_author|default:"Anonim"}

Tagline default:

{site_tagline|default:"Endless Possibilities"}

6. Pattern Query Loop (Iterasi)

Query Loop = element ber-queryLoop.enabled = true yang di-render N kali, sekali per row hasil query. Di dalam loop, entity tags resolve ke row aktif: loop postQuery melihat {post_*}, loop product melihat {product_*}, loop course melihat {course_*}.

Card template untuk loop blog post:

<!-- container[queryLoop=postQuery] berisi: -->
<article>
  <img src="{post_featured_image|image_url:cardMedium}" alt="{post_title}">
  <h3>{post_title}</h3>
  <p>{post_excerpt|default:"—"}</p>
  <a href="{post_url}">Selengkapnya</a>
</article>

Nomor urut item (pakai {{loop.*}} metadata yang tetap double-brace):

{{loop.number}}. {post_title}

{{loop.first}} / {{loop.last}} berguna di Display Conditions child element — mis. "tampilkan badge 'NEW' hanya pada item pertama" pakai {{loop.first}} == "true".

7. Best Practice & Gotcha

• Pakai _raw + filter, bukan tag pre-formatted. {product_price_raw|currency} lebih baik dari {product_price} (deprecated). Alasannya: format harga ikut Settings site, jadi konsisten dgn cart/checkout.
• Picker auto-append suggested filter saat klik tag. Jangan hapus kecuali sengaja — itu pairing yg direkomendasikan.
• Di dalam Query Loop, pakai entity tags untuk data row ({product_title}, {post_title}, {course_title}, ...); hanya {{loop.*}} metadata yang pakai sintaks double-brace.
• Tag tidak resolve? Cek template context. {product_title} di custom page render kosong, karena page bukan context product.
• {{loop.*}} di luar Query Loop tidak resolve — tetap muncul sebagai teks {{loop.number}} mentah.
• WhatsApp button (whatsappMessage field) juga di-resolve. Kirim pesan personal: Halo, saya tertarik dengan {product_title} ({product_url}).
• Filter default ambigu untuk number/boolean — fallback selalu string. Untuk boolean conditional, lebih baik pakai Display Conditions.

8. Tip untuk AI Generate

Saat pakai tombol ✨ AI Generate di builder, eksplisit minta dynamic tags supaya hasilnya reusable:

Buat template single_product berikut. WAJIB pakai dynamic tags untuk
semua data product (judul, harga, gambar, deskripsi) supaya template bisa
dipakai untuk semua produk, bukan hardcode satu produk saja.

AI sudah punya akses ke MCP tools get_dynamic_tags, list_dynamic_filters, dan get_data_contexts — jadi akan tahu tag mana yang valid untuk template type yang diminta.