Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

using ajax add to cart and quantity box with increment + and - buttons in list.phtml : quantity of products in cart always 1
 
mlclm
Member
 
Total Posts:  41
Joined:  2010-05-31
 

Hi,

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, 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, and increases the value if + is clicked, and decrease value if - is clicked - it works:

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) because basically there is a problem when using a onclick event with a <form>

The original code which must be replaced is :

<!-- original block of code which must be replaced : -->
<?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: ?>
<!-- rest of code -->

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

<!-- new block of code to make ajax add to cart work with a quantity box -->
<?php if($_product->isSaleable()): ?>
<script type="text/javascript">
function 
setQty(idurl{
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: ?>
<!-- rest of code -->

However, on single product page view, it seem to work correctly. Originally, the way the quantity box and the add to cart button on a single product page is different so it’s working in this case. But when there are multiple products, there is this problem.

So basically in list.phtml: using minus or plus buttons to increment quantity changes the number in the quantity box, but then the number of item stays 1 added to cart.
Mannually entering a number in quantity box for example 5, the number of items in cart added is 5 also.

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 day. Thanks
PS - Some extra escape characters might have been automaticly added like all the extra backslashes in the code snippets above, sorry aboutt that.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sunovisio
Sr. Member
 
Avatar
Total Posts:  94
Joined:  2012-04-12
Ho Chi Minh
 

Hi mlclm,

Regarding your code, I think the issue is that you change the location url with calling the function setQty(id, url). However this function is called only on the event keyup on your input quantity

<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" />
.

I think you have to call it as well when clicking on button + and - with setting the correct quantity.

Hope my answer will help you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mlclm
Member
 
Total Posts:  41
Joined:  2010-05-31
 

Hi Loic,

thank you for your help. You are right, I guess that’s probably the problem here. I will take a deeper look into this, thanks again for your help!

 
Magento Community Magento Community
Magento Community
Magento Community
 
mlclm
Member
 
Total Posts:  41
Joined:  2010-05-31
 

I ‘ve tryed to append the onclick event but that didn’t work:

<script>
jQuery("div.quantity").append('<input type="button" onclick="setQty(<?php echo $_product->getId(); ?>, \'<?php echo $this->getAddToCartUrl($_product?>\');"value="" id="minus1" class="minus" />').prepend('<input type="button" value="" onclick="setQty(<?php echo $_product->getId(); ?>, \'<?php echo $this->getAddToCartUrl($_product?>\');" id="add1" class="plus" />');
    
jQuery(".plus").click(function()
        
{
            
var currentVal parseInt(jQuery(this).next(".qty").val());
            if (!
currentVal || currentVal=="" || currentVal == "NaN"currentVal 0;
            
jQuery(this).next(".qty").val(currentVal 1);
        
// Ajax save here?
        
});

        
jQuery(".minus").click(function()
        
{
            
var currentVal parseInt(jQuery(this).prev(".qty").val());
            if (
currentVal == "NaN"currentVal 0;
            if (
currentVal 0)
            
{
                jQuery
(this).prev(".qty").val(currentVal 1);
            
}
            
// Ajax save here?
        
}); 
</script>

I have no knowledge in php and ajax development so this is getting harder for me now. Would you mind taking a quick look at my .phtml file which has the code see what you think ? Your advice above is correct I guess but don’t really know how to put it in effect. Your help would be so much appreciated right now!

I also came across this blog post where it’s written that some ajax calls in the onclick functions would be needed, too:

http://css-tricks.com/number-increment-buttons/

But it’s on another level for me as far as my experience go with programing and magento!

Many thanks.

-M

 
Magento Community Magento Community
Magento Community
Magento Community
 
mlclm
Member
 
Total Posts:  41
Joined:  2010-05-31
 

okay I managed to make it work , kinda because the + or - buton isnt taken into consideration the first time it is clicked. Basically now my code is:

<div class="actions">
                    
                    
<?php if($_product->isSaleable()): ?>
                
<script type="text/javascript">
                    function 
setQty(idurl{
                        
var qty document.getElementById('qty_' id).value;
                        
document.getElementById('cart_button_' id).innerHTML '<button type="button" class="addToCart" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"></button>';   
                    
}
                </script>
                
<div class="quantity">
                <
input type="button" value="" id="add1" class="plus" onclick="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');"/>
                <
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" />
                <
input type="button" value="" id="minus1" class="minus" onclick="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');"/>
                </
div>
                
                <
span id="cart_button_<?php echo $_product->getId(); ?>"><button type="button" class="addToCart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"></button></span>

But the + and - buttons don’t work properly:
By default, my input quantity box is 1. So when I hit the + button, it shows 2. Then I add to cart, only 1 product is added. Then if I hit the + again, quantity box is correct: it is now showing 3 , and when I click on add to cart, it adds 2 items to cart. It’s like the value of quantity box has in fact one less than what it is showing… Not that easy to explain.

my + and - code is as follow:

<script>
    
jQuery(".plus").click(function()
        
{
            
var currentVal parseInt(jQuery(this).next(".qty").val());
            if (!
currentVal || currentVal=="" || currentVal == "NaN"currentVal 0;
            
jQuery(this).next(".qty").val(currentVal 1);
        
});

        
jQuery(".minus").click(function()
        
{
            
var currentVal parseInt(jQuery(this).prev(".qty").val());
            if (
currentVal == "NaN"currentVal 0;
            if (
currentVal 0)
            
{
                jQuery
(this).prev(".qty").val(currentVal 1);
            
}
            
// Ajax save here??
        
}); 
</script>
 
Magento Community Magento Community
Magento Community
Magento Community
 
phani000
Jr. Member
 
Total Posts:  6
Joined:  2012-09-05
 

Hello Guys,

Thanks for that code. this is working fine. but how can i update the cost and i need to checkout on clicking proceed to checkout button.

can any one give me the code for updating the cart on ajax popup. please suggest me how get this done.

 
Magento Community Magento Community
Magento Community
Magento Community
 
rebeccama
Sr. Member
 
Avatar
Total Posts:  110
Joined:  2012-11-05
 

Did you get it to work correctly? Which extension are you using? You should contact the support team of developer you purchased from. By the way here is another plugin that does the job well.

http://www.fmeextensions.com/magento-ajax-add-to-cart.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
Martinly
Sr. Member
 
Total Posts:  90
Joined:  2013-11-10
 

I refer another similar extension that helps Magento store owners remove shopping cart abadonment and improve user’s experience as well. http://magentoajaxcart.org/

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top