Lelah Edit JSON Manual? Ini Trik Kustomisasi Undangan Cepat via Data Editor Laxy!

Data Editor Laxy Motions (terletak di subfolder tools/data-editor/) adalah pusat kendali visual utama untuk merancang dan memodifikasi isi konten undangan digital klien Anda. Dengan menggunakan interface form ini, Anda tidak perlu mengedit baris kode JSON/HTML secara manual, melainkan cukup mengisi kolom visual dan mengekspor hasilnya dalam sekali klik.

✨ Kelebihan Utama Menggunakan Data Editor

• Visual Interface: Tampilan visual form terstruktur rapi sesuai jenis data (teks, gambar, repeater bank, tanggal).
• Anti Error Sintaksis: Menjamin format berkas data.json keluaran selalu valid tanpa resiko kesalahan ketik kurung kurawal/koma.
• Fitur Impor Instan: Mempermudah pemutakhiran data dengan mengunggah kembali file data.json lama untuk diedit kembali.

---

🛠️ Mengoperasikan Data Editor Laxy

Langkah 1: Mengakses & Membuka Data Editor

Data Editor adalah halaman HTML statis di folder laxy/tools/data-editor/. Cara termudah: klik ganda berkas index.html di folder tersebut agar terbuka langsung di browser. Jika ingin memakai server lokal, jalankan server apa saja dengan web root di folder laxy/, lalu buka /tools/data-editor/.

Catatan: start-server.bat di folder laxy/panduan/ hanya menyajikan folder panduan sebagai web root, sehingga alamat http://localhost:8000/tools/data-editor/ dari server tersebut menghasilkan 404.

Langkah 2: Memahami Struktur Formulir Data Editor

Formulir dirancang dengan tata letak dua kolom yang efisien: Sidebar Menu di sebelah kiri untuk navigasi antar-seksi, dan Form Editor Pane di sebelah kanan sebagai tempat input data. Terdapat 10 tab menu yang dapat Anda sesuaikan:

• ⚙️ Info Utama & Cover: Mengatur undangan_id (slug URL), judul cover, foto mempelai berdua yang tampil di atas Love Story (gambar cover dan latar parallax memakai file gambar tema di assets/img/), URL Google Apps Script (rsvpApiUrl), Default Max Pax, mode RSVP (allow_open_rsvp, disable_rsvp_submit, dan rsvp_disabled_message), domain hosting untuk .htaccess, countdown waktu, serta metadata share (OG:Image, OG:Title, OG:Description). Agar thumbnail tampil di WhatsApp, salin potongan dari tab Thumbnail WA (lihat Langkah 4) ke index.html. Kolom Tema Tampilan ikut tersimpan di data.json, tetapi tidak dibaca oleh template mana pun.
• 🤵👰 Profil Mempelai: Data mempelai pria dan wanita: nama lengkap, panggilan, deskripsi keluarga, nama orang tua, nomor WhatsApp, dan tautan media sosial (Instagram, Facebook, Twitter/X, TikTok, YouTube).
• 📅 Detail Acara: Mengelola jadwal dan seksi acara pernikahan (misal: Akad Nikah, Resepsi) secara dinamis yang mendukung sesi, tanggal, jam, alamat lengkap, dan link peta Google Maps. Kolom Sesi (misal: "Sesi 1") tampil di bawah nama acara. Editor menerima maksimal 3 acara: dua acara pertama tampil di slide Acara, acara ke-3 di slide Countdown. Di bagian bawah tab ini ada blok Live Streaming (YouTube, Zoom, Instagram) dengan saklarnya sendiri, yang tetap bisa diatur walaupun seksi Acara dimatikan. Setiap link yang diisi tampil sebagai tombol sendiri di slide Countdown.
• 💕 Love Story: Tempat menulis kisah perjalanan cinta kedua mempelai, masing-masing dengan tanggal, judul, deskripsi, dan foto. Editor dan template membatasi maksimal 4 cerita.
• 🎵 Media & Musik: Video YouTube untuk seksi galeri (kolom URL Video Galeri, satu video), lagu latar belakang (.mp3 direct link atau video YouTube yang diambil suaranya, dengan detik mulai, detik selesai, dan looping), serta galeri album foto (maksimal 10 foto). Detik mulai dan selesai hanya berlaku untuk MP3; jika MP3 dan YouTube sama-sama diisi, yang diputar adalah MP3.
• 💳 Kado & Alamat: Pengaturan nomor WhatsApp konfirmasi kado, alamat kirim paket fisik, serta nomor rekening bank atau e-wallet (maksimal 4 rekening) untuk sumbangan digital. Keterangan rekening (misal: "Rekening utama") tampil di kartu rekening keempat tema.
• 👗 Dresscode: Deskripsi aturan busana dan hingga 4 warna inspirasi (kode hex) yang tampil sebagai lingkaran warna di undangan.
• 📝 Narasi & Teks: Kustomisasi teks pembuka/salam, quote kutipan doa/ayat suci, teks penutup, seksi "Yang Mengundang", "Turut Mengundang", serta preset naskah siap pakai berdasarkan agama (Islam, Kristen / Katolik, Hindu, Buddha, Umum). Kartu ayat di undangan menampilkan quote; teks pembuka hanya dipakai jika quote dikosongkan.
• 👁️ Visibilitas Seksi: Saklar on/off untuk setiap seksi undangan (lihat Langkah 3).
• 🏷️ Brand Footer: Mengisi informasi agensi vendor (nama brand, logo, deskripsi hak cipta, link website order, nomor WhatsApp vendor, auto-text order, dan tautan media sosial brand) untuk memperkuat branding bisnis Anda.

Langkah 3: Mengontrol Visibilitas Bagian (Visibility Control)

Template Laxy Motions membaca objek show di data.json dengan tiga kemungkinan nilai untuk setiap seksi (fungsi shouldShow di assets/js/extractors.js):

1. true (Selalu Tampilkan): Seksi tetap muncul di undangan, meskipun data isiannya belum lengkap.
2. false (Selalu Sembunyikan): Seksi dihapus dari halaman, terlepas dari apakah datanya sudah diisi atau belum.
3. Kunci tidak ada (Otomatis): Seksi tampil hanya jika datanya terisi (misal: jika link live streaming kosong, tombol Live Streaming tidak muncul).

Data Editor hanya menyediakan saklar on/off, baik di tab Visibilitas Seksi maupun saklar Tampilkan Seksi di kepala beberapa tab. Saklar menyala menulis true, saklar mati menulis false. Mode otomatis hanya bisa didapat dengan menghapus kunci tersebut dari objek show di data.json hasil ekspor memakai editor teks. Jika kunci tidak ada, saklar di editor tampil dalam posisi mati.

Langkah 4: Ekspor Sekali Klik: Tombol "Generate All"

Setelah seluruh data diisi dengan benar, klik tombol Generate All di bagian bawah halaman editor. Tombol ini membuka jendela Generate File Paket Undangan dengan enam tab: Unduh Paket, data.json, Code.gs, .htaccess, Thumbnail WA (potongan tag untuk pratinjau link WhatsApp), dan Panduan Setup (checklist menghubungkan Google Sheet). Tab Unduh Paket menyediakan tombol unduh atau salin untuk tiga berkas berikut:

Nama File	Fungsi Utama	Penempatan
data.json	Menampung seluruh isi konten undangan terstruktur (penanda skema _schema: 1). Template selalu membaca konten dari berkas ini.	Simpan di root folder template klien.
Code.gs	Kode backend Google Apps Script yang sudah terisi ID Undangan, Default Max Pax, dan pengaturan RSVP terbuka dari editor.	Salin dan tempel ke Apps Script (Google Sheets).
.htaccess	Proteksi aset: menolak akses file JS dan CSS jika permintaan tidak datang dari domain terdaftar.	Ganti file .htaccess di folder undangan.

Berkas .htaccess dibuat dari kolom Domain / Subdomain Hosting Undangan (hosting_domain) di tab Info Utama & Cover. Isi tanpa https://; versi dengan dan tanpa www. otomatis diizinkan. Jika kolom ini kosong, tab .htaccess hanya menampilkan peringatan dan berkas tidak dibuat. Kolom ini tidak ikut tersimpan ke data.json hasil ekspor. Penjelasan lengkap ada di panduan Whitelist Domain di .htaccess.

Tab Thumbnail WA berisi empat baris (og:title, og:description, og:image, dan <title>) yang dibuat dari kolom share di tab Info Utama & Cover. WhatsApp dan Facebook membaca pratinjau link dari index.html tanpa menjalankan JavaScript, jadi isian share di data.json saja tidak cukup. Klik Salin Potongan Meta, lalu ganti empat baris yang sama di bagian <head> index.html undangan. Pakai alamat gambar lengkap yang diawali https://.

Langkah 5: Mengimpor Berkas Data yang Sudah Ada

Jika Anda ingin mengedit kembali atau memperbarui data undangan klien yang sudah pernah dibuat sebelumnya:

1. Buka Data Editor di browser Anda.
2. Klik tombol Unggah data.json di pojok kanan atas (header), ATAU cukup Drag & Drop (tarik dan lepas) berkas data.json lama Anda langsung ke area halaman Data Editor.
3. Seluruh isian formulir visual akan terisi kembali secara otomatis sesuai data berkas tersebut. Anda tinggal melakukan perubahan yang diperlukan dan menekan tombol Generate All kembali untuk mengunduh versi terbaru.