Kartu Produk E-Commerce
Kartu produk dengan gambar, nama, harga, rating, dan tombol beli, seperti di toko online.
Kenapa Kartu Produk?
Buka Tokopedia, Shopee, atau Amazon: semuanya menampilkan produk sebagai kartu. Kartu adalah unit tampilan paling penting di web modern: produk, artikel blog, video YouTube, semua memakai pola kartu. Kuasai satu kartu, kuasai semuanya.
Langkah Membangun
HTML: <article class="kartu"> berisi <img>, <div class="info"> dengan nama produk, rating bintang, harga, dan <button> beli. Tag <article> adalah semantik yang tepat untuk konten mandiri seperti ini.
CSS: Kartu punya border-radius, box-shadow, dan overflow: hidden agar gambar mengikuti sudut melengkung. Efek hover: kartu terangkat sedikit (transform: translateY(-6px)) dengan transisi, memberi kesan bisa diklik. Harga memakai warna tegas, harga coret memakai text-decoration: line-through.
JS: Tombol "Beli" menambah jumlah ke keranjang: variabel keranjang bertambah, badge angka di tombol ikut update, plus animasi tombol berubah teks menjadi "Ditambahkan ✓" sesaat.
Analogi
Kartu produk seperti etalase toko: foto menarik di depan, label harga jelas, dan tombol "beli" selalu dalam jangkauan. Tugas desainernya memastikan pembeli tidak perlu berpikir untuk tahu apa yang harus dilakukan.
Kesalahan Umum
- Gambar tidak proporsional dan merusak layout (pakai
aspect-ratio: 4/3; object-fit: cover). - Terlalu banyak info dalam satu kartu sehingga sesak (nama, harga, rating, tombol: cukup).
- Tombol tidak memberi feedback saat diklik sehingga pengguna mengklik berkali-kali.
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Grid 3 Kartu Produk
Ubah menjadi 3 kartu produk berbeda yang dibuat otomatis dari array JavaScript (bukan ditulis manual di HTML). Setiap kartu punya tombol beli sendiri yang menambah keranjang bersama.