อัพเดทปริมาณรถเข็นอัตโนมัติเมื่อเปลี่ยนปริมาณ

ในรถเข็นเริ่มต้นของ Magento เมื่อลูกค้าแก้ไขปริมาณเขา / เธอต้องกดปุ่มเพื่ออัพเดทปริมาณ

มีวิธีใดที่รถเข็นจะอัปเดตปริมาณโดยอัตโนมัติเมื่อผู้ใช้ป้อนหมายเลขอื่นในฟิลด์ปริมาณหรือไม่

ขั้นแรกแก้ไขเทมเพลตรถเข็น/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlและเพิ่มรหัสในองค์ประกอบของฟอร์มเพื่อให้เข้าถึงได้ง่ายขึ้น สมมติว่าคุณเพิ่ม 'id = "รูปแบบรถเข็น"';

ตอนนี้แก้ไขเทมเพลตที่แสดงรายการรถเข็น:

• app / ออกแบบ / ส่วนหน้า / แพคเกจ {} / {} ธีม /template/checkout/cart/item/default.phtml
• app / ออกแบบ / ส่วนหน้า / แพคเกจ {} / {} ธีม /template/downloadable/checkout/cart/item/default.phtml

และใน<input>องค์ประกอบที่มีชื่อcart[<?php echo $_item->getId() ?>][qty]เพิ่มสิ่งนี้:

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

แต่ฉันไม่แนะนำให้ทำเช่นนี้ มันน่ารำคาญจริงๆสำหรับผู้ใช้ (อย่างน้อยสำหรับฉัน)

สมมติว่าไซต์ของคุณมี jQuery รวมอยู่ในโหมดไม่มีข้อขัดแย้งนี่เป็นวิธีการทำแบบอะซิงโครนัส (น่ารำคาญน้อยกว่ามาก!)

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()
            });
        }
    );
});

ฉันควรชี้ให้เห็นว่าสิ่งนี้ทำให้สมมติฐานดังต่อไปนี้:

• ตะกร้าสินค้าของคุณใช้ชีวิตอยู่ภายในองค์ประกอบที่มีรหัสของตะกร้าสินค้า
• ช่องป้อนข้อมูลของคุณสำหรับปริมาณมีแอตทริบิวต์ชื่อที่ลงท้ายด้วย[qty]

ควรปรับตัวเลือกในรหัสบนบรรทัดที่ 2 และ 5 ได้ง่ายเพื่อให้เหมาะกับสถานการณ์ของคุณ

แก้ไขสองไฟล์เหล่านี้

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

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

และในองค์ประกอบที่มีชื่อcart[<?php echo $_item->getId() ?>][qty]เพิ่มสิ่งนี้:

onchange="this.form.submit()"

หากเวอร์ชัน jQuery ของคุณเก่าคุณจะไม่ประสบความสำเร็จ ฉันได้พบวิธีที่ดังต่อไปนี้ปฏิบัติตามคำแนะนำของเพื่อน Marius ที่จะแทรก

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlและเพิ่มรหัสบนองค์ประกอบแบบฟอร์มเพื่อให้เข้าถึงได้ง่ายขึ้น สมมติว่าคุณเพิ่มid="cart-form"

ตอนนี้เปิดไฟล์

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

และเลื่อนไปที่จุดสิ้นสุดของไฟล์และคุณจะพบจาวาสคริปต์ที่เพิ่มขึ้นและลดลงของปริมาณ ฟังก์ชั่นจะเป็นดังนี้:

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;
    }
}

เปลี่ยนสำหรับสิ่งนี้:

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();   
    }
}

ในกรณีที่คุณไม่ได้โหลด jQuery (ยัง) คุณสามารถค้นหา<input> องค์ประกอบ (หรือในกรณีของฉันเป็น<select>องค์ประกอบตั้งแต่ฉันสร้างฟิลด์แบบเลื่อนลงเพื่อเลือกจำนวน) ด้วยชื่อname="cart[<?php echo $_item->getId() ?>][qty]"และเพิ่มสิ่งนี้:

onchange="this.form.submit()"

ไฟล์ phtml ที่คุณต้องแก้ไขตั้งอยู่ที่นี่:

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