Cara membuat keranjang belanja dengan javascript
Membuat keranjang belanja dengan javascript sangat membantu responsive interaksi dengan pengunjung dan mempercepat langkah tanpa harus berpindah halaman. berikut tutorial Cara membuat keranjang belanja dengan javascript
pertama tama buat file index.html yang codenya seperti di bawah ini
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cart LKP Naura</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <!-- Nav --> <nav class="navbar navbar-default"> <div class="row"> <div class="container"> <ul class="nav navbar-nav"> <li> <a data-toggle="modal" data-target="#cart">Keranjang (<span class="total-count badge badge-danger"></span>)</a></li> <li></li> <li></li> </ul> </div> </div> </nav> <!-- Main --> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Orange</h4> <p class="card-text">Price: 20000</p> <a href="#" data-name="Orange" data-price="20000" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> <div class="col-lg-4"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="http://images.all-free-download.com/images/graphicthumb/vector_illustration_of_ripe_bananas_567893.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Banana</h4> <p class="card-text">Price: 15000</p> <a href="#" data-name="Banana" data-price="15000" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> <div class="col-lg-4"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY-9839190/organic-lemon-250x250.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Lemon</h4> <p class="card-text">Price: 5000</p> <a href="#" data-name="Lemon" data-price="5000" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Keranjang Anda</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table table-bordered"> <thead> <tr> <th>Nama barang</th> <th>Harga</th> <th>Jumlah</th> <th>Aksi</th> <th>Subtotal</th> </tr> </thead> <tbody class="show-cart"> </tbody> </table> <div>Total Harga: Rp <span class="total-cart"></span></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button> <button type="button" class="btn btn-danger clear-cart" data-dismiss="modal">Bersihkan Keranjang</button> <button type="button" class="btn btn-primary">Checkout</button> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <script src="aksi.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
lalu buat file aksi.js dengan kode seperti dibawah ini :
// ************************************************ // Shopping Cart API // ************************************************ var shoppingCart = (function() { // ============================= // Private methods and propeties // ============================= cart = []; // Constructor function Item(name, price, count) { this.name = name; this.price = price; this.count = count; } // Save cart function saveCart() { sessionStorage.setItem('shoppingCart', JSON.stringify(cart)); } // Load cart function loadCart() { cart = JSON.parse(sessionStorage.getItem('shoppingCart')); } if (sessionStorage.getItem("shoppingCart") != null) { loadCart(); } // ============================= // Public methods and propeties // ============================= var obj = {}; // Add to cart obj.addItemToCart = function(name, price, count) { for(var item in cart) { if(cart[item].name === name) { cart[item].count ++; saveCart(); return; } } var item = new Item(name, price, count); cart.push(item); saveCart(); } // Set count from item obj.setCountForItem = function(name, count) { for(var i in cart) { if (cart[i].name === name) { cart[i].count = count; break; } } }; // Remove item from cart obj.removeItemFromCart = function(name) { for(var item in cart) { if(cart[item].name === name) { cart[item].count --; if(cart[item].count === 0) { cart.splice(item, 1); } break; } } saveCart(); } // Remove all items from cart obj.removeItemFromCartAll = function(name) { for(var item in cart) { if(cart[item].name === name) { cart.splice(item, 1); break; } } saveCart(); } // Clear cart obj.clearCart = function() { cart = []; saveCart(); } // Count cart obj.totalCount = function() { var totalCount = 0; for(var item in cart) { totalCount += cart[item].count; } return totalCount; } // Total cart obj.totalCart = function() { var totalCart = 0; for(var item in cart) { totalCart += cart[item].price * cart[item].count; } return Number(totalCart.toFixed(2)); } // List cart obj.listCart = function() { var cartCopy = []; for(i in cart) { item = cart[i]; itemCopy = {}; for(p in item) { itemCopy[p] = item[p]; } itemCopy.total = Number(item.price * item.count).toFixed(2); cartCopy.push(itemCopy) } return cartCopy; } // cart : Array // Item : Object/Class // addItemToCart : Function // removeItemFromCart : Function // removeItemFromCartAll : Function // clearCart : Function // countCart : Function // totalCart : Function // listCart : Function // saveCart : Function // loadCart : Function return obj; })(); // ***************************************** // Triggers / Events // ***************************************** // Add item $('.add-to-cart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); shoppingCart.addItemToCart(name, price, 1); displayCart(); }); // Clear items $('.clear-cart').click(function() { shoppingCart.clearCart(); displayCart(); }); function displayCart() { var cartArray = shoppingCart.listCart(); var output = ""; for(var i in cartArray) { output += "<tr>" + "<td>" + cartArray[i].name + "</td>" + "<td>(" + cartArray[i].price + ")</td>" + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>" + "<input type='number' class='item-count form-control col-lg-1' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>" + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>" + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>" + " = " + "<td>" + cartArray[i].total + "</td>" + "</tr>"; } $('.show-cart').html(output); $('.total-cart').html(shoppingCart.totalCart()); $('.total-count').html(shoppingCart.totalCount()); } // Delete item button $('.show-cart').on("click", ".delete-item", function(event) { var name = $(this).data('name') shoppingCart.removeItemFromCartAll(name); displayCart(); }) // -1 $('.show-cart').on("click", ".minus-item", function(event) { var name = $(this).data('name') shoppingCart.removeItemFromCart(name); displayCart(); }) // +1 $('.show-cart').on("click", ".plus-item", function(event) { var name = $(this).data('name') shoppingCart.addItemToCart(name); displayCart(); }) // Item count input $('.show-cart').on("change", ".item-count", function(event) { var name = $(this).data('name'); var count = Number($(this).val()); shoppingCart.setCountForItem(name, count); displayCart(); }); displayCart();
lalu tambahkan css biar mantap seperti dibawah ini kodenya :
body { padding-top: 80px; } .show-cart li { display: flex; } .card { margin-bottom: 20px; } .card-img-top { width: 200px; height: 200px; align-self: center; }
nah silakan mencoba semoga berhasil ya

Seorang pengajar dan pembelajar yang mengurus lembaga pelatihan dan kursus komputer bernama LKP Naura