[ KAWWA PORTAL ] Components : Product Quantity

eCommerce

Product Quantity

Class name: (k-quantity)
Version: 1.3
jQuery Interactive feature
Tapestry Integration
Angular Integration

This component allows you to increment/decrement the number of items to add to your shopping basket.

Browsers that don't support the "number" type for inputs will call a jQuery plugin that will give the increment/decrement function. Otherwise, the browser will manage the input increment by itself.

Demo
Snippets
Tapestry Integration
Angular Integration

HTML5 Plain Code

COPY

<p class="k-quantity"><input type="number" value="1" title="Define quantity to add to basket"/></p>

CSS Code

COPY

```
.k-quantity {float: left; width: auto;}
```

	.k-catalog .k-quantity {margin-top: 10px;}

```
	.k-quantity span {
```
```
		display: inline-block;
```
```
		font-size: 150%;
```
```
		text-align: center;
```

		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);

```
		color: #FFF;
```
```
		background: #808080;
```
```
		padding: 0 0.3em;
```
```
		vertical-align: middle;
```
```
		border-radius: 3px;
```
```
		cursor: pointer;
```
```
	}
```
```
	.k-quantity span:first-of-type {
```
```
		border-top-right-radius: 0;
```
```
		border-bottom-right-radius: 0;
```
```
	}
```
```
	.k-quantity span:last-of-type {
```
```
		border-top-left-radius: 0;
```
```
		border-bottom-left-radius: 0;
```
```
		padding: 0 0.4em;
```
```
	}
```
```
input.uppydowner {
```
```
	width: 2em;
```
```
	height: 2em;
```
```
	text-align: center;
```
```
	padding: 0;
```
```
	border-radius: 0;
```
```
	vertical-align: -1px;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	/* Feature detection */
```
```
	function isNumberInput() {
```

		var i = document.createElement('input');

```
		i.setAttribute('type', 'number');
```
```
		return i.type !== 'text';
```
```
	}
```
```
	$(document).ready(function(){
```
```
		if ($.fn.uppydowner) {
```
```
			if(!isNumberInput()) {
```

				$('input[type=number]').addClass('uppydowner');

```
				$('input.uppydowner').uppydowner();
```
```
			} else {
```

				$('input[type=number]').css('width', '3em');

```
			}
```
```
		}
```
```
	});
```
```
})(jQuery);
```

This component uses the Uppydowner plugin. For more information about how to apply this plugin, its options, events and methods, see the jQuery-Uppy-Downer page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

This Mixin is used to call the JQuery "uppydower" function to the component, this function will add the buttons "-" and "+" to the input called to decrease and increase its value.

To use it, call the mixin with 't:mixins="kawwa/productquantity"'.

ProductGallery parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
options	false	JSONObject	literal	false	The basic JSON-type parameter of the jQuery widget

The Template

COPY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```
```
<body>
```
```
	
```
```
	
```

		<form t:type="form" t:id="quantityForm" id="quantityForm" method="post">

```
			<fieldset id="fsGeneral">
```

				<label for="QuantitÃ©">QuantitÃ©1</label> <input t:type="textfield" t:value="quantity_1" type="text" value="0" t:mixins="kawwa2/productquantity" />

				<label for="QuantitÃ©">QuantitÃ©2</label> <input t:type="textfield" t:value="quantity_2" type="text" value="0" t:mixins="kawwa2/productquantity" />

				<label for="QuantitÃ©">QuantitÃ©3</label> <input t:type="textfield" t:value="quantity_3" type="text" value="0" t:mixins="kawwa2/productquantity" />

```
			</fieldset>
```
```
			<fieldset id="fsSubmit">
```

				<input t:type="submit" t:clientId="btSubmit" type="button" value="Submit" />

```
			</fieldset>
```
```
		</form>
```
```
		
```
```
</body>
```
```
</html>
```

Angular Integration

Add the specific buttons to the standard HTML input with type number, if the browser can't render it.

productQuantity parameters
Name	Required	Java Type	Description
productQuantity	false	Object	allow you to overload the uppydowner jquery plugin

The Template

COPY

```
<!doctype html>
```
```
<html ng-app="app">
```
```
<head>
```

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>

```
    <script src="script.js"></script>
```
```
</head>
```
```
<body>
```
```
<p class="k-quantity">
```

    <input type="number" value="1" title="Define quantity to add to basket" data-product-quantity="{}"/>

```
</p>
```
```
</body>
```
```
</html>
```

The JavaScript

COPY

var module = angular.module('app',['kawwa2']);

module.controller('myCtrl',function($scope){

```
});
```

Top

KAWWA Markup Pattern Library

eCommerce

Product Quantity

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Angular Integration

The Template

The JavaScript

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce