MUAZHAN
Home

Add To Cart Html Css Javascript Github

5 min read Jun 22, 2024
Add To Cart Html Css Javascript Github

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

Artikel ini akan memandu Anda untuk membangun tombol "Add to Cart" sederhana yang berfungsi dengan HTML, CSS, dan JavaScript. Tombol ini akan mengubah teks dan ikon setelah item ditambahkan ke keranjang belanja.

HTML (index.html)




    
    
    Add to Cart Example
    


    

        Product Image
        
Nama Produk

        
Rp 100.000

Penjelasan:

  • Kode HTML ini mendefinisikan sebuah produk dengan gambar, nama, harga, dan tombol "Add to Cart".
  • Gunakan file gambar product-image.jpg sesuai dengan gambar produk Anda.
  • Tambahkan CSS dan JavaScript di bagian <head> dan <body>.

CSS (style.css)

.product {
    width: 300px;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px auto;
    text-align: center;
}

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

.add-to-cart.added {
    background-color: #45a049;
    cursor: default;
}

.add-to-cart.added i {
    display: inline-block;
    margin-right: 5px;
}

Penjelasan:

  • CSS ini mengatur tampilan produk, tombol "Add to Cart", dan perubahan yang terjadi saat tombol diklik.
  • Gunakan added class untuk mengubah tampilan tombol setelah diklik.

JavaScript (script.js)

const addToCartButton = document.querySelector('.add-to-cart');

addToCartButton.addEventListener('click', () => {
    addToCartButton.classList.add('added');
    addToCartButton.textContent = 'Added to Cart';
    // Tambahkan ikon check (jika Anda ingin)
    addToCartButton.innerHTML += ' ';
});

Penjelasan:

  • Kode JavaScript ini menambahkan event listener ke tombol "Add to Cart".
  • Saat tombol diklik, kelas added akan ditambahkan ke tombol, mengubah teks menjadi "Added to Cart", dan menambahkan ikon check (jika Anda ingin).

Menggunakan Ikon Font Awesome (Opsional)

Untuk menggunakan ikon check (fa-check), tambahkan Font Awesome ke proyek Anda. Anda dapat menambahkannya melalui CDN:

Kesimpulan

Kode ini membangun tombol "Add to Cart" sederhana yang mengubah teks dan menambahkan ikon check setelah diklik. Anda dapat menyesuaikan CSS dan JavaScript untuk mendapatkan tampilan dan fungsionalitas yang Anda inginkan.

Penjelasan Tambahan

  • Mekanisme Penambahan ke Keranjang: Kode ini hanya mengubah tampilan tombol. Untuk penambahan produk ke keranjang yang sebenarnya, Anda perlu membangun sistem keranjang belanja yang lebih kompleks.
  • Menyimpan Data Keranjang: Data produk yang ditambahkan ke keranjang biasanya disimpan menggunakan penyimpanan lokal (local storage) atau database.
  • Tampilan Keranjang: Untuk melihat dan mengelola item di keranjang belanja, Anda memerlukan halaman keranjang terpisah.

GitHub

Anda dapat menemukan contoh lengkap kode ini di repositori GitHub. Anda dapat mengunduh dan memodifikasinya sesuai kebutuhan Anda.

Ingat: Ini hanya contoh dasar. Untuk membangun sistem keranjang belanja yang lengkap, Anda perlu mengimplementasikan fitur tambahan seperti manajemen kuantitas, menghapus item, dan kalkulasi total harga.

Javascript

Latest Posts

Featured Posts