Membangun Fitur Shopping Cart Dinamis Menggunakan PHP, AJAX, dan MySQLi

Dalam dunia e-commerce, fitur shopping cart atau keranjang belanja merupakan jantung utama sistem toko online. Fitur ini memungkinkan pelanggan memilih beberapa produk, menambah atau menghapus item, serta melihat total harga sebelum checkout. Namun, agar pengalaman pengguna lebih halus dan cepat, fitur ini sebaiknya dibuat dinamis tanpa reload halaman. Dengan menggabungkan PHP, MySQLi, dan AJAX, kita bisa menciptakan sistem shopping cart modern seperti yang digunakan oleh platform besar di mana setiap interaksi (tambah, ubah, hapus item) berlangsung real-time.

Artikel ini akan membahas langkah demi langkah membangun shopping cart dinamis dengan sistem yang aman, cepat, dan mudah dikembangkan untuk proyek toko online.

Konsep Dasar Shopping Cart

Shopping cart berfungsi untuk:

• Menyimpan daftar produk yang ingin dibeli oleh user.

• Menghitung total harga dan jumlah item.

• Mengizinkan update jumlah (quantity) setiap produk.

• Memungkinkan user menghapus item tertentu.

• Menyimpan data sementara sebelum checkout.

Ada dua pendekatan utama:

1. Menyimpan di session – cocok untuk user yang belum login.

2. Menyimpan di database (tabel cart) – cocok untuk sistem multi-user atau toko besar.

Dalam artikel ini, kita akan menggunakan kombinasi keduanya agar data tetap aman dan fleksibel.

Struktur Tabel Database

Contoh tabel minimal yang digunakan:

CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  price DECIMAL(10,2),
  stock INT,
  image VARCHAR(255)
);

CREATE TABLE cart (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT,
  product_id INT,
  quantity INT DEFAULT 1,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

Menampilkan Produk di Halaman Toko

Tampilkan produk dengan tombol Tambah ke Keranjang:

$result = mysqli_query($conn, "SELECT * FROM products");
while($row = mysqli_fetch_assoc($result)) {
  echo "
    <div class='product'>
      <img src='uploads/{$row['image']}' alt='{$row['name']}'>
      <h3>{$row['name']}</h3>
      <p>Rp " . number_format($row['price']) . "</p>
      <button class='add-to-cart' data-id='{$row['id']}'>Tambah ke Keranjang</button>
    </div>
  ";
}

Menambahkan Produk ke Keranjang (AJAX)

Gunakan JavaScript untuk mengirim data tanpa reload:

$('.add-to-cart').click(function() {
  let id = $(this).data('id');
  $.ajax({
    url: 'ajax_add_cart.php',
    type: 'POST',
    data: { product_id: id },
    success: function(response) {
      $('#cart-count').text(response); // update icon cart
    }
  });
});

File ajax_add_cart.php:

session_start();
include 'db.php';
$user_id = $_SESSION['user_id'];
$product_id = $_POST['product_id'];

$check = mysqli_query($conn, "SELECT * FROM cart WHERE user_id='$user_id' AND product_id='$product_id'");
if(mysqli_num_rows($check) > 0){
  mysqli_query($conn, "UPDATE cart SET quantity = quantity + 1 WHERE user_id='$user_id' AND product_id='$product_id'");
} else {
  mysqli_query($conn, "INSERT INTO cart (user_id, product_id, quantity) VALUES ('$user_id', '$product_id', 1)");
}

$count = mysqli_query($conn, "SELECT COUNT(*) AS total FROM cart WHERE user_id='$user_id'");
$row = mysqli_fetch_assoc($count);
echo $row['total'];

Menampilkan Isi Keranjang Belanja

Halaman cart.php menampilkan daftar item:

$result = mysqli_query($conn, "
  SELECT cart.id, products.name, products.price, cart.quantity 
  FROM cart 
  JOIN products ON cart.product_id = products.id 
  WHERE cart.user_id = '$user_id'
");

$total = 0;
while($row = mysqli_fetch_assoc($result)) {
  $subtotal = $row['price'] * $row['quantity'];
  $total += $subtotal;
  
  echo "
  <div class='cart-item'>
    <h4>{$row['name']}</h4>
    <input type='number' class='qty' data-id='{$row['id']}' value='{$row['quantity']}' min='1'>
    <p>Rp " . number_format($subtotal) . "</p>
    <button class='remove-item' data-id='{$row['id']}'>Hapus</button>
  </div>
  ";
}

echo "<h3>Total: Rp " . number_format($total) . "</h3>";

Update Jumlah & Hapus Item Secara Real-Time

AJAX untuk update quantity:

$('.qty').change(function(){
  let id = $(this).data('id');
  let qty = $(this).val();
  $.post('ajax_update_cart.php', { id:id, qty:qty }, function(){
    location.reload();
  });
});

$('.remove-item').click(function(){
  let id = $(this).data('id');
  $.post('ajax_remove_cart.php', { id:id }, function(){
    location.reload();
  });
});

File PHP-nya:

// ajax_update_cart.php
include 'db.php';
$id = $_POST['id'];
$qty = $_POST['qty'];
mysqli_query($conn, "UPDATE cart SET quantity='$qty' WHERE id='$id'");

// ajax_remove_cart.php
include 'db.php';
$id = $_POST['id'];
mysqli_query($conn, "DELETE FROM cart WHERE id='$id'");

Real-Time Dropdown Mini Cart di Navbar

Tampilkan mini cart saat hover di icon keranjang:

$('#cart-icon').hover(function(){
  $.get('ajax_mini_cart.php', function(data){
    $('#mini-cart-dropdown').html(data);
  });
});

File ajax_mini_cart.php berisi ringkasan item dan total harga yang ditampilkan secara ringan.

Fitur Tambahan Profesional

Untuk meningkatkan kualitas sistem:

✅ Validasi stok otomatis: Jangan izinkan pembelian melebihi stok.

✅ Simpan data sementara di session untuk guest user.

✅ Integrasikan checkout dengan metode pembayaran (transfer, e-wallet, saldo).

✅ Tambahkan notifikasi AJAX (toast) saat item berhasil ditambahkan.

Kesimpulan

Membangun shopping cart dinamis dengan PHP, MySQLi, dan AJAX adalah langkah penting untuk menciptakan pengalaman belanja online yang cepat dan interaktif. Dengan pendekatan ini, pengguna dapat menambah, menghapus, dan memperbarui produk di keranjang tanpa harus memuat ulang halaman, menjadikan situs Anda lebih modern seperti marketplace besar.

Fitur ini juga mudah dikembangkan — mulai dari sistem diskon, checkout multi-step, hingga integrasi API pembayaran.