Tự động cập nhật số lượng giỏ hàng khi thay đổi số lượng

Trong giỏ hàng mặc định của Magento, khi khách hàng chỉnh sửa số lượng, anh ấy / cô ấy cần nhấn nút để cập nhật số lượng.

Có cách nào để giỏ hàng tự động cập nhật số lượng khi người dùng nhập một số khác vào trường số lượng không?

Đầu tiên chỉnh sửa mẫu giỏ hàng /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlvà thêm id trên thành phần biểu mẫu để truy cập dễ dàng hơn. Giả sử bạn thêm 'id = "cart-form"';

Bây giờ chỉnh sửa các mẫu kết xuất các mục giỏ hàng:

• ứng dụng / thiết kế / frontend / {gói} / {theme} /template/checkout/cart/item/default.phtml
• ứng dụng / thiết kế / frontend / {gói} / {theme} /template/doadable/checkout/cart/item/default.phtml

và trên <input>phần tử có tên cart[<?php echo $_item->getId() ?>][qty]thêm này:

onchange="$('cart-form').submit()"

Nhưng tôi không khuyên bạn nên làm điều này. Nó thực sự gây phiền nhiễu cho người dùng. (ít nhất là đối với tôi).

Giả sử trang web của bạn có jQuery được bao gồm trong chế độ không xung đột, đây là cách thực hiện việc này không đồng bộ (ít gây phiền nhiễu hơn nhiều!).

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

Tôi nên chỉ ra rằng điều này đưa ra các giả định sau:

• Giỏ hàng của bạn nằm trong một yếu tố với id của bảng mua sắm
• Các trường nhập số lượng của bạn có thuộc tính tên kết thúc bằng [qty]

Thật dễ dàng để điều chỉnh các bộ chọn trong mã trên dòng 2 và 5 tương ứng để phù hợp với hoàn cảnh của bạn.

Chỉnh sửa hai tập tin này

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

và trên phần tử có tên cart[<?php echo $_item->getId() ?>][qty]thêm này:

onchange="this.form.submit()"

Nếu phiên bản jQuery của bạn cũ, bạn sẽ không thành công. Tôi đã tìm thấy một cách như sau, làm theo hướng dẫn của người bạn Marius của chúng tôi để chèn

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlvà thêm một id trên phần tử biểu mẫu để truy cập dễ dàng hơn. Giả sử bạn thêmid="cart-form"

Bây giờ mở tập tin

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

Và cuộn đến cuối tập tin và bạn sẽ tìm thấy javascript thực hiện tăng và giảm số lượng. Hàm sẽ trông như thế này:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

Thay đổi cho điều này:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}

Trong trường hợp bạn chưa tải jQuery (chưa), bạn cũng có thể tìm <input> phần tử (hoặc trong trường hợp của tôi là một <select>phần tử kể từ khi tôi xây dựng trường thả xuống để chọn số tiền) với tên name="cart[<?php echo $_item->getId() ?>][qty]"và thêm phần này:

onchange="this.form.submit()"

Tệp phtml mà bạn phải chỉnh sửa nằm ở đây:

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml