KAWWA Markup Pattern Library


eCommerce

Product Options Component Information

  • Class name: (k-product-options)
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Angular Angular Integration

Add to list

The Product Options component allows the user to choose between different values for a certain product's option. In the HTML plain code hereafter, we give the example of the size and color of the product, but you can use the component to whatever option your product may present.

Notice that the HTML of this component relies on radio buttons, therefore it must appear inside a form tag.

Choose your color:

Choose your size:

HTML5 Plain Code

COPY
  1. <div class="k-product-options">
  2. 	<fieldset class="color">
  3. 		<legend>Choose your color:</legend>
  4. 		<p><input type="radio" id="palette01" value="palette01" name="palette" checked="checked" />
  5. 				<label for="palette01"><img src="../img/k-theme0/palette01.png" alt="Black" /></label> 
  6. 				<input type="radio" id="palette02" value="palette02" name="palette" />
  7. 				<label for="palette02"><img src="../img/k-theme0/palette02.png" alt="Dark Blue" /></label> 
  8. 				<input type="radio" id="palette03" value="palette03" name="palette" />
  9. 				<label for="palette03"><img src="../img/k-theme0/palette03.png" alt="White" /></label></p>
  10. 	</fieldset>
  11. 	<fieldset class="size">
  12. 		<legend>Choose your size:</legend>
  13. 		<p><input type="radio" id="s36" value="s36" name="size" checked="checked" />
  14. 			<label for="s36">36</label>
  15. 			<input type="radio" id="s38" value="s38" name="size" />
  16. 			<label for="s38">38</label>
  17. 			<input type="radio" id="s40" value="s40" name="size" />
  18. 			<label for="s40">40</label>
  19. 			<input type="radio" id="s42" value="s42" name="size" />
  20. 			<label for="s42">42</label></p>
  21. 	</fieldset>
  22. </div>

CSS Code

COPY
  1. div.k-product-options {
  2. 	float: left;
  3. 	width: 96%;
  4. 	background: url(../img/k-theme0/bg_photobox.png);
  5. 	padding: 0.8em 2% 0;
  6. 	margin-bottom: 2em;
  7. 	border-top: 1px solid #CCC;
  8. 	border-bottom: 1px solid #CCC;
  9. }
  10. 
                                
  11. 	div.k-product-options fieldset {
  12. 		clear: none;
  13. 		float: left;
  14. 		width: 45%;
  15. 		background: transparent;
  16. 		padding: 0;
  17. 		border: none;
  18. 	}
  19. 
                                
  20. 	div.k-product-options legend {
  21. 		font-size: 0.9em;
  22. 		background: none;
  23. 		padding: 0 0 8px 0;
  24. 		margin: 0;
  25. 	}
  26. 	div.k-product-options input {position: absolute; left: -9000px;}
  27. 	div.k-product-options p {
  28. 		font-size: 0.75em;
  29. 		margin: 0;
  30. 	}
  31. 
                                
  32. 	div.k-product-options label {
  33. 		float: left;
  34. 		width: 2em;
  35. 		list-style-type: none;
  36. 		font-weight: normal;
  37. 		text-align: center;
  38. 		text-transform: uppercase;
  39. 		color: #666;
  40. 		background: #FFF;
  41. 		padding: 3px 2px 2px;
  42. 		margin-right: 5px;
  43. 		border: 1px inset #CCC;
  44. 		border-radius: 2em;
  45. 		vertical-align: bottom;
  46. 		cursor: pointer;
  47. 	}
  48. 		div.k-product-options label img {
  49. 			vertical-align: middle;
  50. 		}
  51. 
                                
  52. 	/* Active/Hover States */
  53. 	div.k-product-options .ui-state-active, div.k-product-options label:hover, div.k-product-options label:focus {
  54. 		color: #FFF;
  55. 		background: #000;
  56. 		border: 1px solid #000;
  57. 	}
  58. 
                                
  59. /* Exception for color */
  60. 	div.k-product-options .color label {
  61. 		width: 20px;
  62. 		height: 20px;
  63. 		color: #000;
  64. 		background: #FFF;
  65. 		padding: 0;
  66. 		border: 2px solid #CCC;
  67. 		border-radius: 20px;
  68. 	}
  69. 	/* Active/Hover States */
  70. 	div.k-product-options .color label.ui-state-active, div.k-product-options .color label:hover, div.k-product-options .color label:focus {
  71. 		color: #FFF;
  72. 		background: #000;
  73. 	}
  74. 
                                
  75. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if ($('div').hasClass('k-product-options')) {
  6. 			jQuery('fieldset').buttonset();
  7. 		}
  8. 	});
  9. })(jQuery);

For more information about how to apply this plug-in, its options, events and methods, see the jQuery Button Widget 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:

Angular Integration

Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles. Use the widget button from jQuery-UI

productOptions parameters
Name Required Java Type Description
productOptions false Object allows you to overload the button widget
name true String is the attribut name use for the submission.
products true {Array of Object} contains the infos for each buttons you want. These infos are - name {string} will be the value of the element selected - img {string} the path to the image -rel {string} for the img tag

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. <div class="k-product-options">
  13.     <fieldset class="color">
  14.         <legend>Choose your color : {{selected}}</legend>
  15.         <p data-product-options="{}" data-products="products" data-name="palette">
  16.         </p>
  17.     </fieldset>
  18. </div>
  19. </body>
  20. </html>

The JavaScript

COPY
  1. var module = angular.module('app',['kawwa2']);
  2. module.controller('myCtrl',function($scope){
  3.     $scope.selected="";
  4. 
                                
  5.     $scope.products = [
  6.         {
  7.             name:"palette01",
  8.             img:"theme/img/k-theme0/palette01.png",
  9.             rel:"Black"
  10.         },
  11.         {
  12.             name:"palette02",
  13.             img:"theme/img/k-theme0/palette02.png",
  14.             rel:"Dark Blue"
  15.         },
  16.         {
  17.             name:"palette01",
  18.             img:"theme/img/k-theme0/palette01.png",
  19.             rel:"Black"
  20.         }
  21.     ];
  22. });

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