Add “increment field” functionality to Magento’s quantity fields
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!
32 comments
I set up 3 increament in a product but still increasing 1
Hi,
How do I install the complete extension (zip file)?
Thank you,
Israel
I have add – code before input and + code after input qty but not work dn please help me when this structure i want what changes in jQuery.
Can anyone tell me where I exactly should place the CSS code that Jair K posted before?
In which css file of my theme?
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
OK my fault didn’t flush the cache
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
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!
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
Hi
Is it possible to limit the qty to 5.
A+ just place this piece of code in css of your theme.
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
HI i have tried to place the code you used in my styles.css folder of my theme but doesnt work is that where it is supposed to go?
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.
Would some please help with an example css? Can’t get my head around styling 🙁
Worked flawlessly. THANKS!!!
sir, i need some code of Magento – How to make a quantity increment and decerement in catalog page
as not to break the line and insert image + -?
Bug reports welcome:
http://www.magentocommerce.com/boards/viewchild/37006/
Please paste some error-messages, if possible.
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?
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
will it work with tiered pricing??
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
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
I would also like to know the code for the onclick button for the list.phtml
Hi, what would be the onclick code on the add to cart button on the product list page?
The code doesn’t seem to work when the compilation is activated.
Any idea to fix this?
Regards
Laurent
I wrote a Extension, which adds increase/decrease buttons to the cart
http://www.magentocommerce.com/magento-connect/kevinhorst/extension/6991/kh_cartqtybuttons
Strange ;/
After add extension, I don’t see button (on custom skin)
regarsd
cr3pt
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?
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??
Well the minimum value should be 1, not 0, but great thingy nevertheless, great job, thx
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? 🙂
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!