1. Struktur File
Website ini terdiri dari 3 file yang saling terhubung, simpan ketiganya dalam satu folder yang sama:
| File | Fungsi |
|---|
| index.html | Struktur & isi halaman (teks, bagian-bagian) |
| style.css | Tampilan & warna |
| script.js | Interaksi website (tombol, filter, keranjang) |
| produk-default.js | Cadangan data produk bawaan |
| produk.json | Data menu tayang — hasil Export dari dashboard |
| admin.js | Dashboard admin (tombol 🔐 Admin di footer index.html): tambah/edit menu, foto, harga, export |
2. Cara Menjalankan
- Buka folder demo
- Klik dua kali index.html → otomatis terbuka di browser (Chrome/Edge).
- Selesai! Tidak perlu install apa pun.
✅ Tips: Kalau sudah punya VS Code, install ekstensi Live Server, lalu klik kanan file → Open with Live Server agar auto-refresh saat diedit.
3. Mengganti Nomor WhatsApp
Buka script.js, cari baris paling atas:
const NOMOR_WA = "6281234567890"; // Ganti nomor ini
- Ganti
6281234567890 dengan nomor kamu.
- Format: kode negara 62 + nomor tanpa angka 0 di depan. Contoh:
08123456789 → 628123456789.
ℹ️ Nomor ini dipakai otomatis oleh SEMUA tombol "Pesan" di produk dan tombol WhatsApp utama.
4. Mengubah / Menambah Produk
Semua produk ada di script.js, di dalam daftar produk. Formatnya:
{ nama: "Brownies Cokelat", harga: 35000, cat: "kue", emoji: "🍫", desc: "Brownies lembut dengan cokelat premium." }
| Bagian | Arti |
|---|
nama | Nama produk |
harga | Harga angka saja (tanpa titik/Rp), contoh 35000 |
cat | Kategori: kue, kering, atau box |
emoji | Ikon sementara (bisa diganti foto, lihat bagian 7) |
desc | Deskripsi singkat |
Cara menambah produk baru
Salin satu baris produk, tempel sebelum tanda ];, lalu ubah isinya. Contoh menambah satu produk:
{ nama: "Es Krim Rumah", harga: 20000, cat: "kue", emoji: "🍦", desc: "Es krim lembut aneka rasa." },
⚠️ Perhatikan koma di akhir setiap produk. Koma terakhir boleh tidak dipasang.
5. Mengubah Warna Tema
Buka style.css, bagian paling atas ada :root. Ubah nilai warna sesuai merek kamu:
:root {
--primary: #e8590c; /* warna utama (oranye) */
--primary-dark: #d9480f;
--wa: #25d366; /* warna tombol WhatsApp (jangan diubah) */
}
- Ganti
#e8590c dengan kode warna lain, misalnya #2fbf5c (hijau), #1a73e8 (biru), #d6336c (pink).
- Cari kode warna gratis di google "color picker".
6. Mengganti Teks & Nama Usaha
Buka index.html, lalu cari dan ganti:
Toko Bu Pelita Sari → nama usaha kamu (ada di beberapa tempat).- Judul besar di bagian atas (hero).
- Teks di bagian Tentang, Testimoni, dan Footer.
- Alamat & jam buka di bagian bawah (CTA Pesan).
💡 Gunakan fitur Find & Replace (Ctrl+H di VS Code) untuk mengganti semua kata sekaligus.
7. Mengganti Emoji jadi Foto Produk
Cara paling mudah: lewat dashboard admin (bagian 9) — tinggal pilih foto di form, otomatis dioptimalkan & tersimpan.
Cara manual per-produk:
- Di script.js atau produk.json, tambahkan properti
foto pada produk, misalnya foto: "foto/nastar.jpg".
- Simpan file gambar di folder demo/foto/.
- Kalau produk tidak punya
foto, tampilan otomatis memakai emoji.
8. Publish ke Internet (Opsional)
Agar website bisa diakses orang lain (bukan cuma di komputer kamu):
- Cara gratis & mudah: gunakan Netlify Drop (app.netlify.com/drop) — cukup drag & drop folder demo, langsung jadi link online.
- GitHub Pages untuk hosting gratis permanen (butuh akun GitHub).
- Bisa juga beli domain (.com/.id) + hosting untuk alamat profesional.
9. Dashboard Admin (Kelola Menu Tanpa Kode)
Di website, klik tombol 🔐 Admin di footer (atau buka index.html#admin) — pemilik toko bisa kelola menu sendiri tanpa menyentuh kode:
- Login — password awal
admin123 (ganti di menu Pengaturan).
- Tambah / Edit menu — isi nama, harga, kategori (bisa bikin kategori baru), deskripsi detail, pilih foto (otomatis dioptimalkan), lalu 💾 Simpan. Tersedia pratinjau kartu produk.
- Daftar menu — ubah (✏️) atau hapus (🗑️) menu yang sudah ada.
- ⬇️ Export produk.json — pindahkan file hasil unduhan ke folder demo, lalu deploy ulang supaya menu baru tampil untuk semua pelanggan.
- ⬆️ Import produk.json — memuat data tayang kembali ke dashboard (misal di komputer lain).
✅ Edit di dashboard langsung terlihat di index.html untuk browser pemilik (penyimpanan lokal). Untuk pelanggan lain: langkah Export + deploy.
⚠️ Password dashboard bersifat pengaman ringan (tersimpan di browser) dan dashboard ikut tampil di website — jangan simpan data sensitif di website ini.
✅ Checklist Sebelum Tunjuk ke Klien
- ☐ Nomor WhatsApp sudah diganti (script.js)
- ☐ Nama usaha diganti di semua tempat
- ☐ Produk & harga sudah sesuai
- ☐ Warna tema sudah disesuaikan
- ☐ Alamat & jam buka diperbarui
- ☐ Sudah dicoba dibuka di HP (responsif)