Add To Cart Html Css Javascript Code

MUAZHAN

4 min read

·

Jun 22, 2024

36

Share

Cara Membuat Tombol "Add to Cart" dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda langkah demi langkah untuk membuat tombol "Add to Cart" yang fungsional menggunakan HTML, CSS, dan JavaScript. Tombol ini akan memungkinkan pengguna untuk menambahkan item ke keranjang belanja mereka.

1. Struktur HTML

Pertama, kita perlu membuat struktur HTML dasar untuk tombol "Add to Cart" dan item yang ingin ditambahkan ke keranjang:

  
  



  

    
    
Nama Produk
    
Harga: Rp100.000
    Add to Cart
  

  

Kode di atas membuat sebuah div dengan kelas product yang berisi:

• Sebuah gambar produk (img)
• Judul produk (h2)
• Deskripsi harga produk (p)
• Tombol "Add to Cart" (button) dengan kelas add-to-cart

2. Styling CSS

Berikut adalah contoh CSS yang dapat Anda gunakan untuk menata tombol "Add to Cart":

.add-to-cart {
  background-color: #4CAF50; /* Hijau */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.add-to-cart:hover {
  background-color: #3e8e41; /* Hijau lebih gelap */
}

Kode CSS di atas akan membuat tombol dengan latar belakang hijau, teks putih, padding, tanpa border, sudut membulat, dan kursor yang berubah menjadi pointer ketika di-hover.

3. Fungsionalitas JavaScript

Sekarang kita perlu menambahkan JavaScript untuk membuat tombol tersebut berfungsi. Berikut adalah contoh kode JavaScript:

const addToCartButton = document.querySelector('.add-to-cart');
const cartItems = []; // Array untuk menyimpan item di keranjang

addToCartButton.addEventListener('click', () => {
  // Tambahkan item ke array cartItems (Anda dapat menambahkan logic untuk mengambil data produk)

  // Tampilkan pesan konfirmasi
  alert('Item berhasil ditambahkan ke keranjang!');
});

Kode JavaScript di atas akan:

• Mengambil elemen tombol "Add to Cart" menggunakan document.querySelector.
• Membuat array kosong cartItems untuk menyimpan item di keranjang.
• Menambahkan event listener "click" ke tombol.
• Ketika tombol diklik, kode akan menjalankan fungsi yang:
  • Menambahkan item ke array cartItems.
  • Menampilkan pesan konfirmasi menggunakan alert.

4. Memperluas Fungsionalitas

Anda dapat memperluas fungsionalitas ini dengan:

• Menampilkan jumlah item di keranjang: Anda dapat menambahkan element HTML untuk menampilkan jumlah item di keranjang dan memperbarui jumlahnya setiap kali item ditambahkan.
• Menampilkan keranjang belanja: Anda dapat membuat halaman terpisah untuk menampilkan keranjang belanja dan daftar item yang telah ditambahkan.
• Menggunakan local storage: Anda dapat menyimpan data keranjang belanja di local storage browser sehingga data tetap tersimpan meskipun pengguna menutup browser.

Kesimpulan

Dengan menggunakan kode HTML, CSS, dan JavaScript ini, Anda dapat membuat tombol "Add to Cart" yang fungsional untuk situs web Anda. Anda dapat menyesuaikan kode ini lebih lanjut untuk memenuhi kebutuhan situs web Anda.