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

时间:2012-08-16 18:02:50

标签: ajax magento jquery onclick

以下是该方案:

我正在使用ajax add to cart extention将产品添加到购物车而不刷新页面。

我已经修改了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个产品添加到购物车中)。

是什么导致了这个问题?解决这个问题的解决方案是什么?我很乐意理解并解决这个问题,因为我整个下午一直在努力。非常感谢。

2 个答案:

答案 0 :(得分:2)

准备将其作为评论,但需要格式化以便于查看

我建议在Google Chrome中打开该页面,然后使用开发人员工具执行以下操作:

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

  2. 检查通过Ajax发出的请求是否正确。您可以通过查看Network panel,识别Ajax调用并检查发送给控制器的qty值是否正确来执行此操作。

  3. 就个人而言,我会检查setQty函数是由+(加号)&amp;触发的。 - (减号)按钮,或者至少setQty函数与plus&amp;减号按钮是。

    从您发布的代码看起来,在加号和放大器中可能需要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>'; 
    

答案 1 :(得分:2)

  1. 输入标记中剪切 setQty 功能。
  2. 添加到购物车按钮标记
  3. 中粘贴它而不是 setLocation 功能
  4. 使用 onmousedown 活动添加到购物车按钮标记。
  5. 在脚本中使用 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; ?>
    
  6. 单击锚标记

    时,使用以下脚本递增和递减值
    <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>