[ KAWWA PORTAL ] Components : Product Options

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.

Demo
Snippets
Angular Integration

HTML5 Plain Code

COPY

```
<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

COPY

```
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

COPY

```
(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

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

```
<!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

COPY

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"
```
```
        }
```
```
    ];
```
```
});
```

Top

KAWWA Markup Pattern Library

eCommerce

Product Options

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Angular Integration

The Template

The JavaScript

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce