Magento |在类别页面和产品视图上使用数量增量和ajax添加到购物车
以下是场景: 我正在使用ajax添加到购物车扩展来将产品添加到购物车,而无需刷新页面 我修改了list.phtml文件,使其具有一些数量增量函数,该函数添加了+和-加号和减号按钮输入。来源: 用两种不同的观察结果解释了问题: 第一次/如果我通过点击+按钮输入来增加数量,当我看到输入框中的值发生变化时,数量会正确变化,但随后我点击添加到购物车按钮,只添加了1个产品。无论我点击+按钮多少次以获得我想要的数量,添加到购物车的数字始终为1 第二/如果我在数量框中手动键入所需的数量编号,例如5,没有问题:购物车将刷新为5个项目 因此,基本上只有当点击递增按钮+,项目的数量不会增加,只会增加一个 下面是添加增量函数和+和-按钮的代码:Magento |在类别页面和产品视图上使用数量增量和ajax添加到购物车,ajax,magento,jquery,onclick,Ajax,Magento,Jquery,Onclick,以下是场景: 我正在使用ajax添加到购物车扩展来将产品添加到购物车,而无需刷新页面 我修改了list.phtml文件,使其具有一些数量增量函数,该函数添加了+和-加号和减号按钮输入。来源: 用两种不同的观察结果解释了问题: 第一次/如果我通过点击+按钮输入来增加数量,当我看到输入框中的值发生变化时,数量会正确变化,但随后我点击添加到购物车按钮,只添加了1个产品。无论我点击+按钮多少次以获得我想要的数量,添加到购物车的数字始终为1 第二/如果我在数量框中手动键入所需的数量编号,例如5,没有问题:
jQuery("div.quantity").append('<input type="button" value="+" id="add1" class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');
jQuery(".plus").click(function()
{
var currentVal = parseInt(jQuery(this).prev(".qty").val());
if (!currentVal || currentVal=="" || currentVal == "NaN") currentVal = 0;
jQuery(this).prev(".qty").val(currentVal + 1);
});
jQuery(".minus").click(function()
{
var currentVal = parseInt(jQuery(this).next(".qty").val());
if (currentVal == "NaN") currentVal = 0;
if (currentVal > 0)
{
jQuery(this).next(".qty").val(currentVal - 1);
}
});
现在,为了让ajax add to cart按钮与list.phtml上的quantity输入框一起工作,必须对源代码进行一些修改:
必须更换的原始代码为:
<!-- Find this block of code: -->
<?php if($_product->isSaleable()): ?>
<button type="button" class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php else: ?>
必须将其替换为以下代码,如上面发布的论坛链接所述:
<!-- And replace it with this block of code: -->
<?php if($_product->isSaleable()): ?>
<script type="text/javascript">
function setQty(id, url) {
var qty = document.getElementById('qty_' + id).value;
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';
}
</script>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<input type="text" name="qty_<?php echo $_product->getId(); ?>" id="qty_<?php echo $_product->getId(); ?>" maxlength="12" value="1" onkeyup="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<span id="cart_button_<?php echo $_product->getId(); ?>"><button type="button" class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></span>
<?php else: ?>
我不知道为什么添加到购物车的数量只有在手动输入值时才正确。我需要正确的数量添加到购物车时,也使用+加号或-减号按钮。由于某些原因,输入框中的数量会发生变化,但在单击“添加到购物车”后,此值不是购物车中的值始终是1个产品添加到购物车
是什么导致了这个问题?解决这个问题的办法是什么?我很想理解并解决这个问题,因为我整个下午都在尝试。非常感谢。本打算将此作为评论,但需要将其格式化以便于查看 我建议在Google Chrome中打开页面,然后使用开发人员工具完成以下几项工作: 使用-逐步浏览jQuery代码,然后可以确保代码正确设置了数量 检查通过Ajax发送的请求是否正确。您可以通过查看、识别Ajax调用并检查发送到控制器的qty值是否正确来实现这一点 就个人而言,我会检查setQty函数是否由+加号和减号按钮触发,或者至少setQty函数是否与加号和减号按钮执行相同的操作 从您发布的代码来看,在加减按钮代码中可能需要setQty函数中的这一行
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';
我打算把它作为评论放进去,但需要格式化以便于查看 我建议在Google Chrome中打开页面,然后使用开发人员工具完成以下几项工作: 使用-逐步浏览jQuery代码,然后可以确保代码正确设置了数量 检查通过Ajax发送的请求是否正确。您可以通过查看、识别Ajax调用并检查发送到控制器的qty值是否正确来实现这一点 就个人而言,我会检查setQty函数是否由+加号和减号按钮触发,或者至少setQty函数是否与加号和减号按钮执行相同的操作 从您发布的代码来看,在加减按钮代码中可能需要setQty函数中的这一行
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';
从输入标签中剪切setQty函数。
将其粘贴到“添加到购物车”按钮标记中,而不是设置位置功能
使用onmousedown事件添加到购物车按钮标记。
在脚本中使用onmouseup事件
整个代码看起来像
<?php if($_product->isSaleable()): ?>
<script type="text/javascript">
function setQty(id, url) {
var qty = document.getElementById('qty_' + id).value;
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onmouseup="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';
}
</script>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<a class="decrement_qty" href="javascript:void(0)">   -  </a>
<input type="text"
name="qty_<?php echo $_product->getId(); ?>"
id="qty_<?php echo $_product->getId(); ?>"
maxlength="12" value="1"
title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<a class="increment_qty" href="javascript:void(0)">   +  </a>
<span id="cart_button_<?php echo $_product->getId(); ?>">
<button type="button"
class="button"
onmousedown="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');">
<span><span><?php echo $this->__('Add to Cart') ?></span></span>
</button>
</span>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
单击锚定标记时,使用以下脚本递增和递减该值
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.increment_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 1 ) {
var newVal = parseFloat(oldVal) + 1;
jQuery(this).parent().find("input").val(newVal);
}
});
jQuery('.decrement_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 2 ) {
var newVal = parseFloat(oldVal) - 1;
jQuery(this).parent().find("input").val(newVal);
}
});
});
</script>
从输入标签中剪切setQty函数。
将其粘贴到“添加到购物车”按钮标记中,而不是设置位置功能
使用onmousedown事件添加到购物车按钮标记。
在脚本中使用onmouseup事件
整个代码看起来像
<?php if($_product->isSaleable()): ?>
<script type="text/javascript">
function setQty(id, url) {
var qty = document.getElementById('qty_' + id).value;
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onmouseup="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';
}
</script>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<a class="decrement_qty" href="javascript:void(0)">   -  </a>
<input type="text"
name="qty_<?php echo $_product->getId(); ?>"
id="qty_<?php echo $_product->getId(); ?>"
maxlength="12" value="1"
title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<a class="increment_qty" href="javascript:void(0)">   +  </a>
<span id="cart_button_<?php echo $_product->getId(); ?>">
<button type="button"
class="button"
onmousedown="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');">
<span><span><?php echo $this->__('Add to Cart') ?></span></span>
</button>
</span>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
单击锚定标记时,使用以下脚本递增和递减该值
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.increment_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 1 ) {
var newVal = parseFloat(oldVal) + 1;
jQuery(this).parent().find("input").val(newVal);
}
});
jQuery('.decrement_qty').click(function() {
var oldVal = jQuery(this).parent().find("input").val();
if ( parseFloat(oldVal) >= 2 ) {
var newVal = parseFloat(oldVal) - 1;
jQuery(this).parent().find("input").val(newVal);
}
});
});
</script>
嘿,非常感谢你花时间回复我。我离开了一会儿,刚刚检查了你的答案。关于setQty函数,您必须是正确的:单击加号或减号按钮时调用了它。我试着直接附加它:jQuerydiv.quantity.append‘嘿,非常感谢你花时间回复我。我离开了一会儿,刚刚检查了你的答案。关于setQty函数,您必须是正确的:单击加号或减号按钮时调用了它。我试图直接附加它:jQuerydiv.quantity.append'