htmlcssjavascriptecommercekeranjangMenengah12 mnt baca

Keranjang Belanja Mini

Membangun keranjang belanja: tambah produk, ubah jumlah, hapus, dan hitung total otomatis.

Jantung E-Commerce

Keranjang belanja adalah fitur paling kritis di toko online: tempat produk "menunggu" sebelum checkout. Modul ini menggabungkan semua yang sudah dipelajari: render data, state array, event delegation, dan perhitungan.

Langkah Membangun

HTML: Dua kolom: daftar produk (kartu + tombol "Tambah") dan panel keranjang (daftar item, kontrol jumlah +/-, tombol hapus, total harga, tombol checkout).

CSS: Layout dua kolom dengan grid yang menjadi satu kolom di HP. Panel keranjang sticky di desktop agar selalu terlihat saat scroll produk.

JS: State keranjang sebagai array object { id, nama, harga, jumlah }.

  1. Tambah: Jika produk sudah ada, naikkan jumlah. Jika belum, push object baru.
  2. Ubah jumlah: Tombol +/- mengubah jumlah. Jika jumlah jadi 0, hapus item.
  3. Hapus: Filter array.
  4. Total: reduce untuk menjumlahkan harga × jumlah.
  5. Render ulang setiap ada perubahan, dan tampilkan badge jumlah item di judul keranjang.

reduce adalah cara fungsional menjumlahkan: keranjang.reduce((total, item) => total + item.harga * item.jumlah, 0).

Kesalahan Umum

  • Duplikat item saat produk sama ditambahkan dua kali (cek id dulu).
  • Total tidak update setelah hapus (selalu hitung ulang dari array, jangan simpan total di variabel terpisah).
  • Jumlah bisa minus (batasi minimal 1, atau hapus saat 0).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Kode Diskon

Tambahkan input kode diskon di panel keranjang. Kode "HEMAT10" memberi diskon 10 persen, "HEMAT20" memberi 20 persen. Tampilkan baris diskon dan total setelah diskon.