Magento quantity increments – jQuery edition

by . 14 Comments

I noticed this morning that our Magento developing brethren at Inchoo released a simple extension which transforms the quantity input on Magento’s product pages into an input flanked by plus and minus buttons. This allows the user to adjust the quantity of items they’re buying through a click of the mouse. A much more elegant and intuitive solution than having to click on the input field and then type in a number.

“Great minds think alike” they say. We’d like to think so – we’ve been building exactly the same functionality into our Magento builds over the last few months and would like to follow Inchoo’s lead in sharing our technique with the community.

This solution is for the Magento developer who want’s to keep extensions to a minimum – it’s actually a very simple modification. It is also for the Magento developer who has integrated jQuery into their theme which we find ourselves doing 100% of the time. Here’s how it’s done:

First of all we need to add the jQuery code. Add the following to one of your jQuery js files (or create a new one if that’s your thing).

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

This code ensures that the plus and minus buttons are only present if the user has javascript enabled providing graceful degradation for non-javascript browsers. We’ve also used input’s rather than paragraph tags (as in Inchoos extension) for the plus and minus buttons which is a more semantic solution.

You now simply need to wrap the quantity input inside a div with the class “quantity”. Move the file app/design/frontend/base/default/template/catalog/product/view/addtocart.phtml into your theme directory if you haven’t already, open it up and look for line 34. You should see the code for the input which will look something like:

<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />

Simply wrap this line inside a div like so;

<div class="quantity">
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div> <!-- /.quantity -->

And upload the files. You’ll need to style the plus and minus buttons with some CSS but the functionality will be there :-)

14 Responses to Magento quantity increments – jQuery edition

  2. Chris

    Hi.
    Great stuff. Works like charm. But how do we go about adding this to the checkout cart?
    I want to have this same functionality there as well.

    • Jay

      Hi Chris, you would just need to edit the correct cart template file. Not 100% sure which it is off the top of my head but it could be app/design/frontend/theme/themepackage/checkout/cart.phtml

      • Chris

        Hi jay,

        Thank you for the super fast response.
        I’m still trying to figure out how to achieve this.
        I found the file which contains the qty input.
        app/design/frontend/enterprise/’themename’/template/checkout/cart/item/default.phtml.

        But unfortunately when I add the div:

        <input name="cart[getId() ?>][qty]" value="getQty() ?>" size="4" title="__('Qty') ?>" class="input-text qty" maxlength="12" />

        And the exact same script… It won’t work.
        I 100% sure I’ve got the correct file and input field.
        Any ideas?

      • Jay

        You wrapped the input inside a div with the class quantity yeah? That should be all you need to do. Could you post a link?

    • Jay

      Seems you have an issue with the javascript as the buttons aren’t being added. Is jQuery being loaded on this page?

      You should probably wrap the quantity increment code inside the jQuery ready event too;

      $(document).ready(function(){
      // Your code here
      });

      • Chris

        Can you also tell me how to add jquery on the cart pages?
        I tried $(document).ready(function(){
        // Your code here
        });
        wrapping around my script. But that didn't fix it.

      • Jay

        Well, with Magento you should really be including javascript via the page.xml layout file. If it’s working on the product details page but not the checkout I’d compare both pages source code to see where jQuery is coming from on the product details page.

        This is all very difficult to do without being able to see your pages :-P Could you email the link?

  4. Chris

    We’re working on a local server which is not accessible over the Internet.
    I’ll try to inject some Jquery into my page once I know how to do this.
    That ‘page.xml’ file is driving me nuts.
    Here is the xml: http://cl.ly/1A1v2M1l2m3y2Z2B2G3n

    I’ll let you know when I make some progress. Thank you for your help so far.

  5. Chris

    I managed to get it working. But the javascript function add multiple buttons when more products are in the cart. And when I click one of the buttons it increments with the amount of products in the cart. I.E: 3 different products in cart with amount of ’1′. Increment 1 product (single click) -> Increments with 3 (1 –> 4).
    When there are 8 different products in the cart. It will increment (on single click) with 8 (1 –> 9).
    This thing is taking a bit too much of my time. I’ll look into this thing later. Will keep you updated.

  6. pandu

    increment and decrement buttons are not display in my cart page I follow the above steps properly I have to put the script in catalog/product/ view/default.phtml file and put the div in the add to cart,phtml file

    still there is no result if anybody get this help me

  7. Zmove

    I got the qty fields with firefox and safari, but nothing with IE7 or IE8.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>