KAWWA Markup Pattern Library


eCommerce

Product Quantity Component Information

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

Add to list

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

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

CSS Code

COPY
  1. .k-quantity {float: left; width: auto;}
  2. 	.k-catalog .k-quantity {margin-top: 10px;}
  3. 
                                
  4. 	.k-quantity span {
  5. 		display: inline-block;
  6. 		font-size: 150%;
  7. 		text-align: center;
  8. 		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  9. 		color: #FFF;
  10. 		background: #808080;
  11. 		padding: 0 0.3em;
  12. 		vertical-align: middle;
  13. 		border-radius: 3px;
  14. 		cursor: pointer;
  15. 	}
  16. 	.k-quantity span:first-of-type {
  17. 		border-top-right-radius: 0;
  18. 		border-bottom-right-radius: 0;
  19. 	}
  20. 	.k-quantity span:last-of-type {
  21. 		border-top-left-radius: 0;
  22. 		border-bottom-left-radius: 0;
  23. 		padding: 0 0.4em;
  24. 	}
  25. 
                                
  26. input.uppydowner {
  27. 	width: 2em;
  28. 	height: 2em;
  29. 	text-align: center;
  30. 	padding: 0;
  31. 	border-radius: 0;
  32. 	vertical-align: -1px;
  33. }
  34. 
                                
  35. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	/* Feature detection */
  5. 	function isNumberInput() {
  6. 		var i = document.createElement('input');
  7. 		i.setAttribute('type', 'number');
  8. 		return i.type !== 'text';
  9. 	}
  10. 	$(document).ready(function(){
  11. 
                                
  12. 		if ($.fn.uppydowner) {
  13. 			if(!isNumberInput()) {
  14. 				$('input[type=number]').addClass('uppydowner');
  15. 				$('input.uppydowner').uppydowner();
  16. 			} else {
  17. 				$('input[type=number]').css('width', '3em');
  18. 			}
  19. 		}
  20. 
                                
  21. 	});
  22. })(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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  4. 	xmlns:p="tapestry:parameter">
  5. <body>
  6. 	
  7. 	
  8. 		<form t:type="form" t:id="quantityForm" id="quantityForm" method="post">
  9. 
                                
  10. 			<fieldset id="fsGeneral">
  11. 				<label for="Quantité">Quantité1</label> <input t:type="textfield" t:value="quantity_1" type="text" value="0" t:mixins="kawwa2/productquantity" />
  12. 				<label for="Quantité">Quantité2</label> <input t:type="textfield" t:value="quantity_2" type="text" value="0" t:mixins="kawwa2/productquantity" />
  13. 				<label for="Quantité">Quantité3</label> <input t:type="textfield" t:value="quantity_3" type="text" value="0" t:mixins="kawwa2/productquantity" />
  14. 			</fieldset>
  15. 
                                
  16. 			<fieldset id="fsSubmit">
  17. 				<input t:type="submit" t:clientId="btSubmit" type="button" value="Submit" />
  18. 			</fieldset>
  19. 
                                
  20. 		</form>
  21. 		
  22. </body>
  23. </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
  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
  5.     <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
  6.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
  7.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
  8.     <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
  9.     <script src="script.js"></script>
  10. </head>
  11. <body>
  12. <p class="k-quantity">
  13.     <input type="number" value="1" title="Define quantity to add to basket" data-product-quantity="{}"/>
  14. </p>
  15. </body>
  16. </html>

The JavaScript

COPY
  1. var module = angular.module('app',['kawwa2']);
  2. module.controller('myCtrl',function($scope){
  3. 
                                
  4. });

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce