更改数量时自动更新购物车数量

在Magento的默认购物车中，当客户编辑数量时，他/她需要按下按钮来更新数量。

当用户在数量字段中输入其他数字时，购物车是否可以自动更新数量？

首先，编辑购物车模板，/app/design/frontend/{package}/{theme}/template/checkout/cart.phtml并在表单元素上添加ID，以方便访问。假设您添加了'id =“ cart-form”';

现在，编辑用于渲染购物车项目的模板：

• app / design / frontend / {package} / {theme} /template/checkout/cart/item/default.phtml
• app / design / frontend / {package} / {theme} /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()
            });
        }
    );
});

我应该指出，这是基于以下假设：

• 您的购物车存在于具有购物车表 ID的元素中
• 您输入的数量字段的名称属性以[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版本过旧，您将不会成功。我发现了一种如下方法，请按照我们朋友马吕斯的指示进行插入

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtml并在表单元素上添加一个ID，以便于访问。假设您添加id="cart-form"

现在打开文件

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

并滚动到文件末尾，您将找到执行数量递增和递减的javascript。该函数将如下所示：

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