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 have some quantity increment function which adds a "+" and "-" plus and minus buttons inputs. (source: http://jigowatt.co.uk/blog/magento-quantity-increments-jquery-edition/).

The problem explained with 2 different observations:

1st/ If I increase the quantity by clicking on the + button input, quantity changes correctly as I see the value changing in the input box , but then I click on add to cart button, and there's only 1 product added. No matter how many times I clicked on the + button to get the quantity I wanted, the number added to cart is always 1.

2nd/ If I type the desired quantity number in the quantity box manually, 5 for example, no problem : cart is refreshed with 5 items.

So basically only when clicking on the increment button + , the number of items aren't added, only one gets added.

Here is the code which adds the increment function and adds the + and - buttons:

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);
}
});

Now, to have the ajax add to cart button work with the quantity input box on list.phtml, some modification had to be made (source: http://forum.aheadworks.com/viewtopic.php?f=33&t=601)

The original code which must be replaced is :

<!-- 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: ?>

It must be replaced with this code below, as explained on the forum link posted above:

<!-- 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: ?>

I don't know why the quantity added to cart is only correct when typing the value manually. I would need the correct quantity added to cart also when using the + (plus) or - (minus) buttons . For some reason the quantity changes in the input box, but this value is not the one in the cart after the add to cart is clicked (always 1 product added to cart).

What is causing this problem ? And what would be the solution to resolve this ? I would love to understand and fix this as I've been trying this whole afternoon. Many thanks.

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>