Magento | Use quantity increments and ajax add to cart on category page and product view

Question

Here is the scenario:

I\'m using an ajax add to cart extention to add product to cart without refreshing page.

And I have modified the list.phtml file to hav

Answer 1

Was going to put this in as a comment, but need to format it for easier viewing

I would recommend opening the page in Google Chrome and then using the developer tools to do a couple of things:

1. Step through the jQuery code using the Script panel - you can then make sure that the code is setting the quantity correctly.

2. Check that the request going via Ajax is correct. You can do this by looking at the Network panel, identifying the Ajax call and checking that the qty value going to the controller is correct.

Personally, I'd be checking that the setQty function is being fired by the + (plus) & - (minus) buttons, or at least that the setQty function is doing the same thing as the plus & minus buttons are.

From the code you have posted it looks like this line in the setQty function may be required in the plus & minus button code

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. Cut the setQty function from input tag.
2. paste it instead of setLocation function in Add To Cart Button tag
3. Use onmousedown event Add To Cart Button tag.

4. Use onmouseup event within script Totally the code looks like

    <?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. Use the following script to increment and decrement the value when click on anchor tags

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