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!

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


27 comments

  1. Can’t seem to uninstall. Get Magento error page. Is there something written to the database? I just replaced the app folder with the one preinstall. Any help?

    Sorry Thanks

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

  3. 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!

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

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

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

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

  8. 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?

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

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

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

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

  13. 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?

  14. 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??

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

  16. 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? :)

  17. 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!

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=""> <blockquote cite=""> <code> <del datetime=""> <em> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.