更改数量时自动更新购物车数量
-
12-12-2019 - |
题
在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,phtml
- app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default。phtml,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版本旧,则不会成功。我找到了一种如下所示,随着我们的朋友Marius的说明来插入
/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>
元素(或在我的情况下a <select>
元素,因为我建立了一个下拉字段来选择金额)与名称 name="cart[<?php echo $_item->getId() ?>][qty]"
并添加此:
onchange="this.form.submit()"
您必须编辑的phtml文件位于此处:
app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml