Add “increment field” functionality to Magento’s quantity fields

Featured Image

You’ve maybe noticed that Magento’s quantity inputs are just plain input fields, and if you wish to change it’s value, you have to erase value manually and enter new one on your numpad. Today I’ll show you how to add plus and minus signs by each input for quantity by implementing my colleague’s unobtrusive approach. If interested, read on!

Well, it’s pretty much simple task but like anything else in Magento, it requires some time (about 2 hours with testing for me). What I did was that I’ve created extension that will inject some JavaScript to change functionality.

I’ve dynamically created div element and populated it with paragraph tags that contain “+” and “-” signs. It looks like this:

And code responsible for this goes something like this:

var parentTD;
	var newDiv;
	var navigationDiv;
	var i = 1;
	var currentElement = null;
	$$('input.qty').each(function(el){
		parentTD = el.parentNode;
		newDiv = document.createElement('div');
		Element.extend(newDiv);
		newDiv.id = i++;
		newDiv.update(parentTD.innerHTML).innerHTML; //set new input inside new div
		parentTD.update().innerHTML; //erase old input
		parentTD.appendChild(newDiv); //show new div
		navigationDiv = document.createElement('div');
		Element.extend(navigationDiv);
		navigationDiv.update('<p class="up">+</p><p class="dn">-</p>').innerHTML;
		newDiv.appendChild(navigationDiv);
	});
	$$('p.up').each(function(el){
		el.observe('click',function(event){
			currentElement = el.parentNode.previous();
			i = 0; //In case we get in to infinite loop
			while(currentElement.type != 'text' && i < 5){
				currentElement = currentElement.previous();
				i++;
			}
			currentElement.value = parseInt(currentElement.value) + 1;
		});
	});
	$$('p.dn').each(function(el){
		el.observe('click',function(event){
			currentElement = el.parentNode.previous();
			i = 0; //In case we get in to infinite loop
			while(currentElement.type != 'text' && i < 5){
				currentElement = currentElement.previous();
				i++;
			}
			if(parseInt(currentElement.value) > 0){
				currentElement.value = parseInt(currentElement.value) - 1;
			}
		});
	});

You can download complete extension here. But as always, please make backup before installation, as this is provided for usage at your own risk.

There’s no styling for this implemented, but with some CSS you should be able to create something like this in no-time:

as generated HTML structure looks like this:

<div id="1">
	<label for="qty">
		Qty:
	</label>
	<input name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" type="text">
	<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
		<span>
			<span>
				Add to Cart
			</span>
		</span>
	</button>
	<div>
		<p class="up">
			+
		</p>
		<p class="dn">
			-
		</p>
	</div>
</div>

Cheers!

25
Top

Care to rate this post?

Author

Mladen Lotar

Ex. Inchooer

Mladen worked at Inchoo from 2010 to 2011 in the role of Magento/Zend developer

Other posts from this author

Discussion 25 Comments

Add Comment
  1. We just implemented exactly the same thing across a few of our upcoming Magento builds – it’s a much more intuitive solution.

    Only difference is that we put the minus on the left and the plus on the right of the qty input and we used buttons instead of paragraphs.

    Kudos on the extension – nice idea!

  2. Scott Bowers

    This is just the solution I have been looking for!

    I have copied all the files from the download into my Magento directory. Then I have pasted the javascript code into my view.phtml file; however it isn’t displaying anything :(

    Any chance of some help? :)

  3. Maximillian

    Well the minimum value should be 1, not 0, but great thingy nevertheless, great job, thx

  4. gopal

    when i increase qty suing this module it increase in qty box……but when i add it to cart it add only 1 qty to cart……why??

  5. Vince P

    We’ve just implemented this on our product page but looking to carry it over to our cart page, how would we go about this?

  6. cr3pt

    Strange ;/
    After add extension, I don’t see button (on custom skin)
    regarsd
    cr3pt

  7. KevinH

    I wrote a Extension, which adds increase/decrease buttons to the cart

    http://www.magentocommerce.com/magento-connect/kevinhorst/extension/6991/kh_cartqtybuttons

  8. Laurent

    The code doesn’t seem to work when the compilation is activated.
    Any idea to fix this?
    Regards
    Laurent

  9. valentin

    Hi, what would be the onclick code on the add to cart button on the product list page?

  10. KB

    I would also like to know the code for the onclick button for the list.phtml

  11. A far simpler way using HTML5 is to use the input type of number. E.g. in addtocart.phtml (and wherever else required) use something like

    <input type="number" min="0" max="<?php echo Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty() ?>" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
    

    The downside of course is that browser support is not great yet: it’s fine in Chrome, Safari and Opera but not in Firefox and only in the latest IE beta I think

  12. nicmare

    will it work with tiered pricing??

  13. Maarten

    I would know it also, and a way to implement the QtyIncrements that so nicely implemented in the extension of KevinH

    KB
    24-10-2011 at 8:47 | #

    I would also like to know the code for the onclick button for the list.phtml

  14. Scott

    Doesnt seem to work with IE8, but is fine in IE9. The up and down elements don’t even show. Anyone figured out to fix it?

  15. KevinH

    Bug reports welcome:
    http://www.magentocommerce.com/boards/viewchild/37006/

    Please paste some error-messages, if possible.

  16. André

    as not to break the line and insert image + -?

  17. rabi

    sir, i need some code of Magento – How to make a quantity increment and decerement in catalog page

  18. Mike.V

    Worked flawlessly. THANKS!!!

  19. A+

    Would some please help with an example css? Can’t get my head around styling :-(

  20. Liang

    Hi: Mladen, Thanks for this, excellent work, it works on 1.7 Mage. However I was wondering if you could add a function that it will auto detect if the product qty increments is enabled, and is able to increase or decrease the quantity by preset qty.

  21. Pedro

    A+ just place this piece of code in css of your theme.

    .dn{
        background:transparent url("../images/less.gif") 130px 0px no-repeat;
        cursor:pointer;
    }
    .up{
        background:transparent url("../images/more.gif") 130px 0px no-repeat;
        cursor:pointer;
    }

    and then put in /skin/frontend/default/YOUR_THEME/images two images for plus and minus.
    Rename the images to less.gif and more.gif

    Hope this helps someone

    Regards,

    pedro

  22. Pranali

    Hi

    Is it possible to limit the qty to 5.

  23. hi sir,
    How to display drop down select option for quantity in configurable product.Drop down display for simple product but it does not shows quantity for configurable product.Please help to solve this

  24. Works fine!
    With this CSS….

    #qty {
    width:24px !important; height:18px;
    font-size:14px; font-weight:bold;
    margin:1px; padding:4px;
    border:1px solid #999;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    }

    .increment-buts{
    float:left;
    width:18px; height:28px;
    margin:0 0 0 1px;
    }
    .increment-buts p{

    }
    .down{
    background: url(../images/increment-buts.gif) 0px -13px no-repeat;
    cursor:pointer;
    margin:0;
    }
    .up{
    background: url(../images/increment-buts.gif) 0px 2px no-repeat;
    cursor:pointer;
    margin:0;
    }

    Thanks!

  25. Is it possible to show the quantity in the form of a dropdown?

    I know there are extensions out there for achieving this, but they all work across all the products.

    Is there something which gives the admin the option to set the increment values specific to a category or an attribute set?

    So, for example, there is an attribute set shoes…all the products inside shows will show quantity increments with values 2, 4, 6, 8, etc in the droplist.

    Another attribute set shirts….all products in shirts show quantity increments in the form of 10, 20, 30, 40, etc.

    Thanks!
    V

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top