Add To Cart Html Css Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

31

Share

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

Artikel ini akan membahas cara membuat tombol "Add to Cart" yang sederhana dengan menggunakan HTML, CSS, dan JavaScript. Dengan mengikuti langkah-langkah ini, Anda dapat menambahkan fungsionalitas dasar untuk keranjang belanja dalam situs web Anda.

1. Struktur HTML

Pertama, kita perlu membuat struktur HTML dasar untuk tombol "Add to Cart" dan produk yang akan ditambahkan.

  
  


  

    
    
Nama Produk
    
Deskripsi singkat tentang produk.
    Add to Cart
  
  

Kode di atas mendefinisikan struktur HTML sederhana yang berisi:

• div dengan kelas product: Untuk menampung informasi produk.
• img: Untuk menampilkan gambar produk.
• h2: Untuk menampilkan judul produk.
• p: Untuk menampilkan deskripsi singkat produk.
• button dengan kelas add-to-cart: Tombol "Add to Cart".

2. Styling CSS

Berikut contoh sederhana untuk men-styling tombol "Add to Cart" dengan CSS:

.add-to-cart {
  background-color: #4CAF50; /* Warna latar belakang */
  color: white;             /* Warna teks */
  padding: 10px 20px;       /* Padding */
  border: none;             /* Hilangkan border */
  cursor: pointer;          /* Ubah cursor menjadi pointer */
  border-radius: 5px;       /* Bulatkan sudut */
}

.add-to-cart:hover {
  background-color: #3e8e41; /* Warna latar belakang saat hover */
}

Kode CSS ini:

• Menentukan warna latar belakang, warna teks, padding, menghilangkan border, dan menambahkan cursor pointer ke tombol.
• Menambahkan efek hover dengan mengubah warna latar belakang saat mouse di atas tombol.

3. Fungsionalitas JavaScript

Sekarang, kita akan menambahkan JavaScript untuk membuat tombol "Add to Cart" berfungsi.

const addToCartButtons = document.querySelectorAll('.add-to-cart');

addToCartButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Kode yang akan dijalankan ketika tombol diklik
    alert("Produk telah ditambahkan ke keranjang!");
  });
});

Kode JavaScript ini:

• Mendapatkan semua tombol dengan kelas add-to-cart.
• Menambahkan event listener "click" ke setiap tombol.
• Ketika tombol diklik, kode di dalam event listener akan dijalankan.

Dalam contoh ini, kita hanya menampilkan alert sederhana untuk menandakan bahwa produk telah ditambahkan ke keranjang. Anda dapat mengganti kode ini dengan logika yang lebih kompleks untuk menambahkan produk ke keranjang belanja yang sebenarnya.

4. Menjalankan Kode

Simpan kode HTML, CSS, dan JavaScript di file yang terpisah (misalnya, index.html, style.css, dan script.js). Kemudian, buka index.html di browser web Anda. Anda sekarang dapat mengklik tombol "Add to Cart" dan melihat alert yang muncul.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda telah membuat tombol "Add to Cart" dasar yang berfungsi. Anda dapat memperluas contoh ini dengan menambahkan lebih banyak fitur seperti:

• Menambahkan produk ke keranjang belanja yang sebenarnya.
• Memperbarui jumlah produk dalam keranjang.
• Menampilkan jumlah produk yang ada di keranjang belanja.
• Menambahkan fitur checkout.

Ingat, contoh ini hanya menunjukkan dasar-dasarnya. Anda perlu mempelajari lebih lanjut tentang HTML, CSS, dan JavaScript untuk mengembangkan fungsionalitas yang lebih kompleks.