Lắng nghe shopify số lượng cập nhật giỏ hàng
Tôi đang viết một ứng dụng Shopify và tôi muốn lắng nghe sự kiện cập nhật giỏ hàng của shopify. Tôi biết rằng khi người dùng nhấp vào loại bỏ hoặc tăng số lượng mặt hàng. Shopify gửi một yêu cầu POST đến chương trình phụ trợ để cập nhật thẻ. Ứng dụng của tôi tính toán giá trị vận chuyển dựa trên số lượng mặt hàng trong giỏ hàng. Tôi thêm tập lệnh ứng dụng của mình vào shopify thông qua script-tag.
Tôi đã cố gắng lắng nghe đầu vào số lượng nhưng sự kiện này chỉ kích hoạt một. Tôi nghĩ shopify cập nhật DOM đầu vào sau mỗi lần cập nhật giỏ hàng để nó có thể xóa trình nghe của tôi.
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
Làm cách nào để nghe sự kiện cập nhật giỏ hàng? Nó có vẻ là một câu hỏi đơn giản nhưng tôi thực sự không thể tìm thấy bất kỳ câu trả lời nào liên quan đến Shopify!
Trả lời
Vì vậy, có 2 cách để cập nhật giỏ hàng Shopify. Thông qua biểu mẫu gửi hoặc sử dụng API Ajax. Giả sử, bạn đã giải quyết xong trường hợp gửi biểu mẫu bằng cách gọi hàm tính toán vận chuyển khi tải trang. Đối với các bản cập nhật giỏ hàng dựa trên Ajax, không có sự kiện tiêu chuẩn nào. Một số chủ đề có thể kích hoạt sự kiện khi cập nhật giỏ hàng, nhưng trong trường hợp ứng dụng chung, không thể dựa vào chúng do không có hành vi tiêu chuẩn xác định.
Vì vậy, những gì bạn có thể làm là lắng nghe các cuộc gọi AJAX và gọi hàm của bạn nếu nó phù hợp với điều kiện của bạn. API Shopify Docs cho Ajax liệt kê 4 loại yêu cầu ĐĂNG có thể cập nhật Giỏ hàng. Vì vậy, bằng cách vá chức năng mở của XMLHttpRequest, chúng tôi thêm một trình xử lý sự kiện để tải kích hoạt khi yêu cầu kết thúc thành công. Trong trường hợp gọi lại, chúng tôi kiểm tra xem URL có phải là URL được sử dụng để cập nhật giỏ hàng hay không, sau đó gọi chức năng vận chuyển cập nhật.
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
"/cart/change.js",
"/cart/clear.js",
].includes(this._url)
) {
calculateShipping(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function calculateShipping(cartJson) {
console.log("calculate new shipping");
console.log(JSON.parse(cartJson));
}
Ý tưởng được thực hiện bởi câu trả lời từ Nicolas
ajaxComplete không được sử dụng vì nó chỉ lắng nghe các yêu cầu được thực hiện bằng jQuery.
Việc chuyển phản hồi cho chức năng Vận chuyển của bạn sẽ lưu lệnh gọi Nhận giỏ hàng Ajax.
Cập nhật
Nếu mã trên không hoạt động với bạn hoặc không bắt được tất cả các cuộc gọi, hãy xem câu trả lời khác của tôi cũng lắng nghe tất cả các lệnh gọi API Tìm nạp nếu điều đó đang được sử dụng để cập nhật giỏ hàng.
Để cập nhật các trường số lượng mặt hàng trong giỏ hàng trong chủ đề từng phần
Bước 1: Bạn truy cập quản trị Shopify, bấm vào Cửa hàng trực tuyến và vào Chủ đề.
Bước 2: Tìm các chủ đề mà bạn muốn chỉnh sửa, sau đó nhấn Tác vụ rồi nhấn Chỉnh sửa mã.
Bước 3: Nhìn vào Mục, bạn nhấp vào cart-template.liquid. Trong trường hợp bạn không sử dụng chủ đề không có địa chỉ, bạn có thể truy cập thư mục Template và nhấp vào cart.liquid.
Bước 4: Tìm cụm từ được viết là update [item.id] trong thẻ đầu vào.
Bước 5: Thay đổi tên thành giá trị của name = “Updates []”.
Bước 6: Nhắc lại các bước đã đề cập ở trên bất cứ khi nào bạn thấy giá trị tên của các bản cập nhật [] trong thẻ đầu vào.
Bước 7: Nhấp vào Lưu và bạn cập nhật trường số lượng mặt hàng thành công ..