Tôi đang cố gắng làm giỏ hàng kéo và thả. Bằng sự giúp đỡ từ một số trang web trên Internet, tôi có thể thêm mặt hàng vào giỏ hàng và nó cũng tính toán tổng giá. Nhưng tôi không thể loại bỏ một mặt hàng đã chọn cho giỏ hàng. Tôi rất mới với JavaScript và HTML5, vì vậy hãy giúp tôi .. Mã là: <script>
function addEvent(element, event, delegate ) {
if (typeof (window.event) != 'undefined' && element.attachEvent)
element.attachEvent('on' + event, delegate);
else
element.addEventListener(event, delegate, false);
}
addEvent(document, 'readystatechange', function() {
if ( document.readyState !== "complete" )
return true;
var items = document.querySelectorAll("section.products ul li");
var cart = document.querySelectorAll("#cart ul")[0];
function updateCart(){
var total = 0.0;
var cart_items = document.querySelectorAll("#cart ul li")
for (var i = 0; i < cart_items.length; i++) {
var cart_item = cart_items[i];
var quantity = cart_item.getAttribute('data-quantity');
var price = cart_item.getAttribute('data-price');
var sub_total = parseFloat(quantity * parseFloat(price));
cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2);
total += sub_total;
}
document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2);
}
function addCartItem(item, id) {
var clone = item.cloneNode(true);
clone.setAttribute('data-id', id);
clone.setAttribute('data-quantity', 1);
var btn=document.createElement('BUTTON');
btn.className = 'remove-item';
var t=document.createTextNode("X");
btn.appendChild(t);
cart.appendChild(btn);
clone.removeAttribute('id');
fragment = document.createElement('span');
fragment.setAttribute('class', 'sub-total');
clone.appendChild(fragment);
cart.appendChild(clone);
$('#product').on('click','.remove-item',function(){
$(this).closest('li').remove();// remove the closest li item row
});
}
function updateCartItem(item){
var quantity = item.getAttribute('data-quantity');
quantity = parseInt(quantity) + 1
item.setAttribute('data-quantity', quantity);
var span = item.querySelectorAll('span.quantity');
span[0].innerHTML = ' x ' + quantity;
}
function onDrop(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
var id = event.dataTransfer.getData("Text");
var item = document.getElementById(id);
var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");
if(exists.length > 0){
alert("Already present");
} else {
addCartItem(item, id);
}
updateCart();
return false;
}
function onDragOver(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
return false;
}
addEvent(cart, 'drop', onDrop);
addEvent(cart, 'dragover', onDragOver);
function onDrag(event){
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
var target = event.target || event.srcElement;
var success = event.dataTransfer.setData('Text', target.id);
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.setAttribute("draggable", "true");
addEvent(item, 'dragstart', onDrag);
};
});
</script>
và <section id="product">
<ul class="clear">
<li data-id="1">
<a href="#">
<img src="a.jpg" alt="">
<h3>item 1</h3>
<p>xyz</p>
</a>
</li>
</ul>
</secton>
và CSS là: <style>
ul, li{
list-style: none;
margin: 0px;
padding: 0px;
cursor: pointer;
}
section#cart ul{
height: 200px;
overflow: auto;
background-color: #cccccc;
}
</style>
Bài viết này mô tả cách loại bỏ các sản phẩm riêng lẻ và toàn bộ dòng sản phẩm khỏi giỏ hàng bằng cách sử dụng các yêu cầu AJAX.
Dòng sản phẩm trong giỏ hàng phải có một phần tử có thể được nhấp để khởi tạo tập lệnh loại bỏ. Trong ví dụ này, chúng tôi sử dụng đầu ra mặc định của thẻ {Cart}, trong đó phần tử có thể được tìm thấy dựa trên định danh a.CartRemove. Dưới đây bạn có thể thấy ví dụ về triển khai trang Giỏ hàng đơn giản hóa: <div class="CartContainer">
{Cart}
</div>
Một sản phẩm được xóa khỏi giỏ hàng bằng cách gửi yêu cầu bài đăng đến địa chỉ/giỏ hàng/xóa/n trong đó n là ID của sản phẩm sẽ bị xóa./cart/delete/n where n is the ID of the product to be deleted. /*
* The removal script is executed after the a.CartRemove element is clicked
*/
$("a.CartRemove").on("click", function(event) {
event.preventDefault();
/*
* The ID of the product to be removed is retrieved
* from the link.
*/
productId = $(this).attr("href").split("/")[3];
/*
* A POST request is sent
*/
$.ajax({
type: "POST",
url: "/cart/delete/" + productId,
success: function() {
/*
* The product is now removed and the shopping cart is reloaded
* so that the customer can see the change.
*/
$.ajax({
type: "GET",
url: "/interface/Cart",
success: function(data) {
$(".CartContainer").html(data);
}
});
}
});
});
Loại bỏ các sản phẩm bằng plugin giỏ hàng của chủ đề mặc địnhTrong chủ đề mặc định của Mycashflow, Barebones, loại bỏ các sản phẩm khỏi giỏ hàng được cung cấp thông qua plugin Cart.js dựa trên AJAX.Bạn có thể tùy chỉnh cách plugin hoạt động với các chức năng móc.cart.js plugin. You can customize how the plugin works with hook functions.
Làm thế nào để loại bỏ sản phẩm trong JavaScript?
Một sản phẩm được xóa khỏi giỏ hàng bằng cách gửi yêu cầu bài đăng đến địa chỉ/giỏ hàng/xóa/n trong đó n là ID của sản phẩm sẽ bị xóa./ * * Tập lệnh loại bỏ được thực thi sau a.
Làm thế nào để loại bỏ vật phẩm khỏi giỏ hàng trong jQuery?
item-button ", function () {$ (this) .Parent (). Remove ();}); parent(). remove(); }); | 
