ajax - 玛根托 |在类别页面和产品 View 上使用数量增量和 ajax 添加到购物车

Question

这是场景:

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

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

用 2 个不同的观察结果解释了该问题:

1st/ 如果我通过单击 + 按钮输入来增加数量，当我看到输入框中的值发生变化时，数量会正确更改，但随后我单击“添加到购物车”按钮，并且仅添加了 1 个产品。无论我点击 + 按钮多少次来获取我想要的数量，添加到购物车的数量始终是 1。

第二/如果我在数量框中手动输入所需的数量，例如 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. 使用 Script panel 单步执行 jQuery 代码- 然后您可以确保代码正确设置了数量。

2. 检查通过 Ajax 发出的请求是否正确。您可以通过查看Network panel来做到这一点，识别 Ajax 调用并检查发送到 Controller 的数量值是否正确。

就我个人而言，我会检查 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>';