Pusat pengetahuan/Blok kustom/Artikel
Blok kustom

Pengantar Custom Blocks

Diperbarui 1 September 2025

Evlop dilengkapi dengan kumpulan blok no-code yang lengkap. Saat Anda membutuhkan sesuatu yang spesifik, Anda bisa menambahkan blok kustom Anda sendiri. Pilih pendekatan yang sesuai dengan keahlian dan kebutuhan Anda: blok React Native yang berjalan di dalam aplikasi, atau blok HTML yang dibangun dengan HTML, CSS, JS, Tailwind, dan Liquid yang ditampilkan dalam WebView.

1) Membuat blok kustom dengan React Native

Apa itu
Blok React Native adalah bagian dari aplikasi native. Paling cocok untuk UI yang halus, gestur, animasi, perilaku offline, dan fitur perangkat.

Apa saja yang bisa Anda gunakan

  • @evlop/native-component untuk komponen UI yang konsisten
  • @evlop/shopify untuk mengakses data toko seperti produk, koleksi, keranjang, metafields, metaobjects, dan pelanggan
  • Semua paket npm yang tercantum di package.json editor blok kustom dapat diimpor dan digunakan

Kapan memilih ini

  • Anda membutuhkan performa tinggi atau interaksi yang kompleks
  • Anda ingin navigasi native dan API perangkat
  • Anda berencana menyimpan data ke cache atau menangani jaringan yang tidak stabil

Tips praktis

  • Jaga pengaturan blok tetap sederhana dan mudah diserialisasi
  • Pilih dependensi secara selektif untuk mengendalikan ukuran bundle
  • Uji di layar home, produk, dan koleksi
  • Validasi aksesibilitas, loading, dan kondisi kosong

2) Membuat blok kustom dengan HTML

Apa itu
Blok HTML berjalan di dalam WebView. Bangun dengan HTML, CSS, JS, Tailwind, dan Liquid untuk iterasi yang cepat.

Data dan batasan

  • Gunakan Liquid untuk mengakses konteks Shopify seperti produk aktif atau koleksi aktif
  • Informasi pelanggan tidak tersedia dalam konteks ini

Navigasi

  • Web bridge Evlop mengubah tautan <a href> biasa menjadi navigasi native ketika ada layar aplikasi yang cocok

Kapan memilih ini

  • Konten marketing atau editorial yang sering berubah
  • Widget ringan yang menampilkan detail produk atau koleksi
  • Tim yang lebih suka Tailwind dan JavaScript sederhana

Tips praktis

  • Desain dengan pendekatan mobile first menggunakan utilitas Tailwind
  • Jaga skrip tetap ringan dan hindari framework berat
  • Gunakan anchor standar agar web bridge dapat merutekan secara native
  • Periksa kontras, spasi, dan waktu muat

Kesimpulan

Blok kustom memungkinkan Anda menyesuaikan aplikasi dengan toko Anda tanpa harus memulai dari nol. Pilih React Native untuk performa dan integrasi mendalam, atau HTML untuk kecepatan dan widget berbasis konten.