eCommerce
Product Options 
- Class name: (k-product-options)
- Version: 1.0
-
jQuery Interactive feature
-
Angular Integration
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.
HTML5 Plain Code
-
<div class="k-product-options">
-
<fieldset class="color">
-
<legend>Choose your color:</legend>
-
<p><input type="radio" id="palette01" value="palette01" name="palette" checked="checked" />
-
<label for="palette01"><img src="../img/k-theme0/palette01.png" alt="Black" /></label>
-
<input type="radio" id="palette02" value="palette02" name="palette" />
-
<label for="palette02"><img src="../img/k-theme0/palette02.png" alt="Dark Blue" /></label>
-
<input type="radio" id="palette03" value="palette03" name="palette" />
-
<label for="palette03"><img src="../img/k-theme0/palette03.png" alt="White" /></label></p>
-
</fieldset>
-
<fieldset class="size">
-
<legend>Choose your size:</legend>
-
<p><input type="radio" id="s36" value="s36" name="size" checked="checked" />
-
<label for="s36">36</label>
-
<input type="radio" id="s38" value="s38" name="size" />
-
<label for="s38">38</label>
-
<input type="radio" id="s40" value="s40" name="size" />
-
<label for="s40">40</label>
-
<input type="radio" id="s42" value="s42" name="size" />
-
<label for="s42">42</label></p>
-
</fieldset>
-
</div>
CSS Code
-
div.k-product-options {
-
float: left;
-
width: 96%;
-
background: url(../img/k-theme0/bg_photobox.png);
-
padding: 0.8em 2% 0;
-
margin-bottom: 2em;
-
border-top: 1px solid #CCC;
-
border-bottom: 1px solid #CCC;
-
}
-
div.k-product-options fieldset {
-
clear: none;
-
float: left;
-
width: 45%;
-
background: transparent;
-
padding: 0;
-
border: none;
-
}
-
div.k-product-options legend {
-
font-size: 0.9em;
-
background: none;
-
padding: 0 0 8px 0;
-
margin: 0;
-
}
-
div.k-product-options input {position: absolute; left: -9000px;}
-
div.k-product-options p {
-
font-size: 0.75em;
-
margin: 0;
-
}
-
div.k-product-options label {
-
float: left;
-
width: 2em;
-
list-style-type: none;
-
font-weight: normal;
-
text-align: center;
-
text-transform: uppercase;
-
color: #666;
-
background: #FFF;
-
padding: 3px 2px 2px;
-
margin-right: 5px;
-
border: 1px inset #CCC;
-
border-radius: 2em;
-
vertical-align: bottom;
-
cursor: pointer;
-
}
-
div.k-product-options label img {
-
vertical-align: middle;
-
}
-
/* Active/Hover States */
-
div.k-product-options .ui-state-active, div.k-product-options label:hover, div.k-product-options label:focus {
-
color: #FFF;
-
background: #000;
-
border: 1px solid #000;
-
}
-
/* Exception for color */
-
div.k-product-options .color label {
-
width: 20px;
-
height: 20px;
-
color: #000;
-
background: #FFF;
-
padding: 0;
-
border: 2px solid #CCC;
-
border-radius: 20px;
-
}
-
/* Active/Hover States */
-
div.k-product-options .color label.ui-state-active, div.k-product-options .color label:hover, div.k-product-options .color label:focus {
-
color: #FFF;
-
background: #000;
-
}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if ($('div').hasClass('k-product-options')) {
-
jQuery('fieldset').buttonset();
-
}
-
});
-
})(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
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
-
<!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>
-
<div class="k-product-options">
-
<fieldset class="color">
-
<legend>Choose your color : {{selected}}</legend>
-
<p data-product-options="{}" data-products="products" data-name="palette">
-
</p>
-
</fieldset>
-
</div>
-
</body>
-
</html>
The JavaScript
-
var module = angular.module('app',['kawwa2']);
-
module.controller('myCtrl',function($scope){
-
$scope.selected="";
-
$scope.products = [
-
{
-
name:"palette01",
-
img:"theme/img/k-theme0/palette01.png",
-
rel:"Black"
-
},
-
{
-
name:"palette02",
-
img:"theme/img/k-theme0/palette02.png",
-
rel:"Dark Blue"
-
},
-
{
-
name:"palette01",
-
img:"theme/img/k-theme0/palette01.png",
-
rel:"Black"
-
}
-
];
-
});