Magento | 使用数量增量并将ajax添加到类别页面和产品视图上的购物车

Question

这是场景：

我正在使用ajax添加到购物车扩展来将产品添加到购物车而无需刷新页面。

而且我已经修改了list.phtml文件，使其具有一些数量增加功能，该功能增加了“ +”和“-”加号和减号按钮输入。 （来源： http ： //jigowatt.co.uk/blog/magento-quantity-increments-jquery-edition/ ）。

通过两个不同的观察结果解释了该问题：

1st /如果我通过单击+按钮输入来增加数量，则数量正确更改，因为我在输入框中看到值更改，但是随后我单击了添加到购物车按钮，并且仅添加了1种产品。 无论我单击+按钮获取所需数量的次数，添加到购物车的数量始终为1。

2nd /如果我在数量框中手动输入所需的数量编号，例如5，没问题：购物车会刷新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添加到购物车按钮与list.phtml上的数量输入框一起使用，必须进行一些修改（来源： http : //forum.aheadworks.com/viewtopic.php? f=33&t=601）

必须替换的原始代码是：

<!-- 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个产品添加到购物车）。

是什么引起此问题？ 解决该问题的解决方案是什么？ 我整个下午都在努力尝试，希望能了解并解决此问题。 非常感谢。

Answer 1

打算将其作为注释，但需要对其进行格式化以方便查看

我建议您在Google Chrome浏览器中打开页面，然后使用开发人员工具执行以下操作：

1. 使用“ 脚本”面板单步执行jQuery代码-然后可以确保该代码正确设置了数量。

2. 检查通过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>'; 

Answer 2

1. 从输入标签剪切setQty函数。
2. 将其粘贴到“ 添加到购物车按钮”标签中，而不是setLocation函数
3. 使用onmousedown事件“ 添加到购物车按钮”标签。

4. 在脚本中使用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)"> &nbsp - &nbsp</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)"> &nbsp + &nbsp</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; ?> 

5. 单击锚标记时，使用以下脚本来递增和递减值

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