jQuery購物車結算實現是電子商務網站中常見的功能之一,通過使用jQuery實現購物車的添加、刪除、數量的修改等操作,再通過結算功能實現商品價格的匯總計算,為用戶提供便捷的購物體驗。
//添加商品到購物車 $("#add-to-cart").click(function(){ var name = $("#product-name").text(); var price = $("#product-price").text(); var quantity = $("#product-quantity").val(); //將商品添加到購物車中 $(".cart-items").append("<li>" + name + " - " + price + " x " + quantity + "<button class='remove-item'>刪除</button></li>"); //更新購物車總價 updateCartTotal(); }); //刪除購物車中的商品 $(document).on('click', '.remove-item', function(){ $(this).parent().remove(); //更新購物車總價 updateCartTotal(); }); //修改購物車中商品數量 $(document).on('change', '.item-quantity', function(){ var quantity = $(this).val(); var price = $(this).parent().siblings(".item-price").text(); var total = quantity * price; $(this).parent().siblings(".item-total").text(total.toFixed(2)); //更新購物車總價 updateCartTotal(); }); //更新購物車總價 function updateCartTotal(){ var total = 0; $(".cart-items li").each(function(){ var price = $(this).text().split(" ")[2]; var quantity = $(this).text().split(" ")[4]; total += price * quantity; }); $(".cart-total").text(total.toFixed(2)); }
使用以上代碼就可以輕松實現購物車結算功能,為用戶提供更好的購物體驗。