Magento |使用数量增量和阿贾克斯添加到购物车的类别页面和产品视图

Question

这里是场景：

我正在使用ajax添加到购物车扩展添加产品到购物车没有刷新页面。

而且我修改了list.phtml文件以增加一个“+”和“ - ”加号和减号按钮输入的数量增量功能。 （来源：http://jigowatt.co.uk/blog/magento-quantity-increments-jquery-edition/）。

第一/如果我通过点击+按钮输入增加数量，量正确地更改作为我看到的值在输入框中发生变化，但：

问题与2个不同的观察结果说明然后我点击添加到购物车按钮，并且只添加了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

打算把这个作为一个评论，但需要对其进行格式化以方便查看

我建议谷歌浏览器打开该网页，然后使用开发工具做了两件事情：

1. 使用Script panel步骤通过jQuery代码 - 然后您可以确保代码正确设置数量。

2. 检查通过Ajax发送的请求是否正确。您可以通过查看Network panel来完成此操作，识别Ajax调用并检查去往控制器的qty值是否正确。

就个人而言，我会检查该setQty功能正在由正（+）发射& - （减）按钮，或至少使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. 需要的代码。
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>