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.
HTML5 Plain Code
-
<p class="k-quantity"><input type="number" value="1" title="Define quantity to add to basket"/></p>
CSS Code
-
.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
-
(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"'.
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
-
<!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.
Name | Required | Java Type | Description |
---|---|---|---|
productQuantity | false | Object | allow you to overload the uppydowner jquery plugin |
The Template
-
<!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
-
var module = angular.module('app',['kawwa2']);
-
module.controller('myCtrl',function($scope){
-
});