htmlcssjavascriptecommercedataMenengah10 mnt baca

Filter Produk Berdasarkan Kategori

Tombol kategori yang memfilter daftar produk secara instan, seperti di toko online.

Fitur Wajib Toko Online

Buka situs belanja: selalu ada filter "Elektronik / Pakaian / Makanan". Tanpa filter, pembeli tenggelam dalam ratusan produk. Fitur ini mengajarkan pola fundamental: data -> filter -> tampilkan.

Langkah Membangun

HTML: Bar tombol kategori (Semua, Elektronik, Pakaian, Makanan) dan <div id="daftarProduk"> sebagai wadah kartu.

CSS: Tombol filter aktif berwarna ungu (seperti tab). Kartu produk memakai grid responsif dari modul galeri.

JS: Pola yang sama dengan tabel sortable:

  1. Data sebagai array of object: { nama, harga, kategori, gambar }.
  2. Variabel filterAktif.
  3. Fungsi render(): filter array (filterAktif === "semua" || p.kategori === filterAktif), lalu bangun kartu HTML.
  4. Klik tombol kategori: update filterAktif, tandai tombol aktif, render ulang.

Animasi tambahan: kartu yang muncul memakai animasi fade-in agar transisi filter terasa halus.

Kesalahan Umum

  • Memfilter DOM langsung (sembunyikan kartu) alih-alih memfilter data (sulit dikombinasikan dengan pencarian/sortir nanti).
  • Tombol aktif tidak ditandai sehingga pengguna bingung filter mana yang aktif.
  • Data dan tampilan tidak sinkron setelah filter (selalu render ulang dari data yang difilter).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Filter + Sortir Harga

Tambahkan dropdown sortir: "Termurah", "Termahal", "Nama A-Z". Kombinasikan dengan filter kategori yang sudah ada.