Automatically add [+] and [-] buttons to the Quantity input fields

[NormanRouxel]

This will make Quantity fields look like:

Quantity: [+] [ 1 ] [-]

Assuming jQuery is loaded, put the following into the bottom of layout Standard JavaScript Header Functions.

<style>.bumpbutton {padding:0 !important; width:15px !important; border:1px solid #aaa !important; background:#ccc;}</style>
<script type="text/javascript">
$( document ).ready(function(){
	$( "input[name^='Q_'][type='text']:visible" )
		.before( '<input type="button" class="bumpbutton" value="+" onclick="var f=$(this).next(); var q=f.val(); f.val($.isNumeric(q) ? q - 0 + 1 : 0);" />' )
		.after( '<input type="button" class="bumpbutton" value="-" onclick="var f=$(this).prev(); var q=f.val(); f.val($.isNumeric(q) && q > 0 ? q - 1 : 0);" />');
});
</script>

[NormanRouxel]

I wrote this as a demo of how a single line of jQuery can enhance a SD site. I split it over some lines for readability but there's really only a single statement there. And to demonstrate the power of jQuery selectors.

Note that this doesn't add the buttons to the Cart quantity field (because the SD code in ActinicOrder.pm is rather old and uses upper case like TYPE=TEXT) and the matching in the attribute sub-selector is case sensitive.

If you want to display the buttons in the Cart, replace the line above:

	$( "input[name^='Q_'][type='text']:visible" )

With:

	$( "input[name^='Q_']:visible" ).filter(function(i){return $(this).attr('type').toLowerCase() == 'text';})

You may need to widen the Quantity table cell in the Cart for the extra buttons to fit.

[NormanRouxel]

And here it is with half rounded buttons and the plus sign on the right. Tested with all SD 2013 themes.

Assuming jQuery is loaded, put the following into the bottom of layout Standard JavaScript Header Functions.

<style>
.half-circle-left{
	width: 15px !important;
	border: none;
	border-radius: 20px 0 0 20px;
	-moz-border-radius: 20px 0 0 20px;
	-webkit-border-radius: 20px 0 0 20px;
}
.half-circle-right{
	width: 15px !important;
	padding-left: 2px;
	border: none;
	border-radius: 0 20px 20px 0;
	-moz-border-radius: 0 20px 20px 0;
	-webkit-border-radius: 0 20px 20px 0;
}
</style>
<script type="text/javascript">
$( document ).ready(function(){
	$( "input[name^='Q_']:visible" ).filter(function(i){return $(this).attr('type').toLowerCase() == 'text';})
		.before('<input type="button" class="half-circle-left" value="-" onclick="var f=$(this).next(); var q=f.val(); f.val($.isNumeric(q) && q > 0 ? q - 1 : 0);" />')
		.after('<input type="button" class="half-circle-right" value="+" onclick="var f=$(this).prev(); var q=f.val(); f.val($.isNumeric(q) ? q - 0 + 1 : 0);" />');
});
</script>