Xóa mặt hàng khỏi giỏ hàng JavaScript

Trong bài viết thứ 13 của thử thách #4weeksOfShopifyDev, tôi sẽ nói về cách thêm và xóa mặt hàng khỏi giỏ hàng trên trang sản phẩm bằng AJAX

Hãy làm nó

Trong đoạn mã này, chúng tôi đã thêm vào nút giỏ hàng và thêm vào biểu mẫu giỏ hàng

function removeItem() {
  let variantId = cartBtn.getAttribute("data-variant-id");
  $.ajax({
    type: "POST",
    url: "/cart/change.js",
    dataType: "json",
    data: {
      id: parseFloat(variantId),
      quantity: 0,
    },
  }).then((data) => {
    cartBtn.textContent = "Add to cart";
    cartBtn.removeAttribute("data-variant-id");
  });
}

mã cuối cùng

Đăng ký bên dưới để nhận thông báo về bài viết mới

Cách xóa đúng sản phẩm khỏi giỏ hàng bằng JavaScript

Trước đây, chúng tôi đã giới thiệu hàm JS addToCart có thể được sử dụng để thêm các mặt hàng khác nhau vào giỏ hàng, xem bài đăng tại đây
Là một chức năng bổ sung, chúng tôi đã thêm chức năng xóa một mặt hàng khỏi giỏ hàng có sẵn trong cấu trúc Shoptet. shoptet.cartShared.removeFromCart. Hàm này chấp nhận một tham số itemId được tạo thành một đối tượng. ID này có thể được tìm thấy ở dạng giỏ hàng dưới dạng phần tử đầu vào ẩn

Các ví dụ sau sử dụng id sản phẩm và tham số từ https. //cổ điển. cửa hàng. cz/

/* Add product */
shoptet.cartShared.addToCart({priceId: 1745});
/* Remove added product */
shoptet.cartShared.removeFromCart({itemId: '610a403f6a8fa'});

Xin lưu ý rằng chức năng xóa một mục ngay cả khi số tiền lớn hơn một

bài chuyển hướng

Xin lỗi nhưng đó là một dự án lớn, giúp đỡ sẽ là một công việc khá khó khăn để thực sự đọc, nghiên cứu và hiểu mã của bạn…

Nếu mặt hàng được cho là đã xóa được thêm lại vào giỏ hàng, điều đó có nghĩa là mặt hàng đó không bị xóa hoàn toàn mà thực sự được lưu ở đâu đó trong bộ nhớ trong của ứng dụng. Nếu devtools cho biết mục đã bị xóa, điều đó có nghĩa là phải có một đoạn mã khác không bị ảnh hưởng bởi việc xóa và khi bạn thêm một mục khác, đối tượng trước đó sẽ được gọi lại và tất cả các mục bên trong nó được sử dụng để tạo giỏ hàng

Vì vậy, bạn phải kiểm tra tất cả các đối tượng có trong logic “thêm vào giỏ hàng” và xem liệu tất cả chúng có được điều chỉnh trong hành động “xóa khỏi giỏ hàng” hay không

Đó là tất cả những gì tôi có thể nói mà không cần dành 1-2 giờ để đọc mã của bạn với hy vọng tìm thấy bất cứ nơi nào bạn đặt logic này hay logic khác…

Xin lỗi, tôi giả sử phản ứng vì bạn đã sử dụng các chức năng mũi tên ở mọi nơi và theo kiểu giống như móc phản ứng

Dù sao đi nữa, vì vậy hãy chuyển sự chú ý của bạn sang getDOMElements nơi bạn đang thêm các mặt hàng vào giỏ hàng. Bạn có một biến cục bộ có tên là cart, đây là một mảng sẽ theo dõi các nút khác nhau để thêm các mặt hàng vào giỏ hàng. Bạn tạo một bao đóng xung quanh biến giỏ hàng này. Có nghĩa là mỗi khi một trong các nút được nhấp, tất cả sẽ được thêm vào cùng một giỏ hàng (các sự kiện được cho là “đóng” xung quanh biến mảng giỏ hàng). cái nào cũng được. Sau đó, vấn đề xảy ra khi bạn xóa khi bạn xóa phần tử khỏi DOM (bên trong handleRemoveItem) nhưng lần sau khi ai đó nhấp vào nút để thêm, bạn lại đọc biến giỏ hàng đó (vẫn có tất cả các mặt hàng trong đó) và tất cả những thứ đó đều nhận được

Điều bạn cần làm là khi một mặt hàng được lấy ra khỏi giỏ hàng, biến giỏ hàng này trở lại trong getDOMElements sẽ được sửa đổi và tính toán lại. Bạn sẽ nghĩ rằng nó đã được đặt lại, nhưng vì bạn có các sự kiện xung quanh nó, nên không phải vậy. Bây giờ, đây là lý do tại sao có quá nhiều chức năng mũi tên và cách đóng có thể hơi phức tạp vì bạn sẽ không dễ dàng quay lại và điều chỉnh giỏ hàng này vì nó nằm trong trình xử lý sự kiện. Để chứng minh điều này, hãy console.log biến số giỏ hàng của bạn trước và sau khi bạn unshift một mặt hàng trên đó. Bạn sẽ thấy rằng giỏ hàng không bao giờ được cập nhật khi bạn xóa một mặt hàng và do đó được sử dụng để thêm tất cả các mặt hàng trở lại giỏ hàng

Đề xuất của tôi là tăng biến giỏ hàng lên một mức cao hơn mà cả hàm getDOMElements có thể thêm vào và cả hàm handleRemoveItem có thể xóa khỏi. Đây thực chất là những gì một kịch bản usestate trong React sẽ làm cho bạn. Các mặt hàng trong giỏ hàng của bạn là một số thông tin trạng thái và rất nhiều chức năng sẽ cần xem và làm việc với nó

Làm cách nào để xóa các mặt hàng khỏi giỏ hàng trong JavaScript?

Làm cách nào để xóa một mặt hàng khỏi giỏ hàng trong góc?