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

Question

这是场景：

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

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

用 2 个不同的观察结果解释了这个问题：

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

本打算将其作为评论放入，但需要对其进行格式化以便于查看

我建议在谷歌浏览器中打开页面，然后使用开发者工具做一些事情：

1. 使用Script panel 逐步执行 jQuery 代码 - 然后您可以确保代码正确设置了数量。

2. 检查通过 Ajax 的请求是否正确。您可以通过查看 Network panel、识别 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. 从 input 标记中删除 setQty 函数。
2. 在 Add To Cart Button 标签中粘贴它而不是 setLocation 函数
3. 使用 onmousedown 事件 Add To Cart Button 标签。

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>