[ KAWWA PORTAL ] Components : In Basket

eCommerce

In Basket

Class name: (k-basket)
Version: 1.2
jQuery Interactive feature

This component lists the items being added to your basket.

Note that the "View Basket" and "Checkout" buttons are form submit inputs, so you must consider wrap the basket with a form tag or replace the inputs with another tag.

Demo
Snippets

Basket (3)

: Kawwa Leather handbag with lots of things inside; 233,00 €

: Bag Banana Republic Gray; 1.233,00 €

: Bag; 33,00 €

TOTAL: 1.499,00 €

HTML5 Plain Code

COPY

```
<div class="k-basket">
```
```
	<h3>Basket (3)</h3>
```
```
	<div class="content">
```
```
		<dl class="basket-item new-item">
```

			<dt><a href="#"><img src="product_09.svg" alt="Article name" /></a></dt>

			<dd class="name"><a href="#">Kawwa Leather handbag with lots of things inside</a></dd>

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

```
			<dd class="price">233,00 &euro;</dd>
```
```
		</dl>
```
```
		<dl class="basket-item">
```

			<dt><a href="#"><img src="product_02.svg" alt="Article name" /></a></dt>

			<dd class="name"><a href="#">Bag Banana Republic Gray</a></dd>

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

			<dd class="price">1.233,00 &euro;</dd>

```
		</dl>
```
```
		<dl class="basket-item">
```

			<dt><a href="#"><img src="product_03.svg" alt="Article name" /></a></dt>

			<dd class="name"><a href="#">Bag</a></dd>

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

```
			<dd class="price">33,00 &euro;</dd>
```
```
		</dl>
```

		<p class="basket-total">TOTAL: <strong>1.499,00 &euro;</strong></p>

```
		<ul class="k-buttons-bar">
```

			<li><input type="submit" value="View basket" class="optional" /></li>

			<li><input type="submit" value="Checkout" /></li>

```
		</ul>
```
```
	</div>
```
```
</div>
```

CSS Code

COPY

```
.k-basket {border: none;}
```
```
	.k-basket h3 {
```
```
		font-size: 1.2em;
```
```
		color: #FFF;
```
```
		background: #000;
```
```
		padding: 0.3em 1em;
```
```
	}
```
```
	.k-basket .content {
```
```
		width: 100%;
```
```
		padding: 0;
```
```
	}
```
```
	.k-basket .k-buttons-bar {
```
```
		padding: 1em 0 0.5em;
```
```
		margin-bottom: 0;
```
```
	}
```

		.k-basket .k-buttons-bar li {font-size: 0.8em;}

```
		
```

	.k-basket input.uppydowner {font-size: 80%;}

```
	
```
```
dl.basket-item {
```
```
	position: relative;
```
```
	float: left;
```
```
	width: 94%;
```
```
	padding: 0.3em 3%;
```
```
	margin-bottom: 0.3em;
```
```
	border-bottom: 1px dashed #CCC;
```
```
}
```
```
	dl.basket-item dt {
```
```
		float: left;
```
```
		width: 20%;
```
```
		min-width: 50px;
```
```
		max-width: 100px;
```
```
		background: #FFF;
```
```
		padding: 0.3em;
```
```
		margin-right: 1em;
```
```
	}
```

	dl.basket-item dt, dl.basket-item dd {font-size: 0.8em;}

```
	dl.basket-item dd.name {
```
```
		overflow: visible;
```
```
		margin: 0 0 1em;
```
```
	}
```
```
	
```

	dl.basket-item dd.k-quantity {clear: none;}

		dl.basket-item dd.k-quantity input {width: 2em;}

```
		
```

	dl.basket-item dd.price {text-align: right;}

```
	
```
```
dl.new-item {background: #EEE;}
```
```
p.basket-total {
```
```
	clear: both;
```
```
	text-align: center;
```
```
	color: #050505;
```
```
	background: #EEE;
```
```
	padding: 0.3em;
```
```
	margin: 0.3em 0.3em 0;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		function incrementTest() {
```

			var i = document.createElement('input');

```
			i.setAttribute('type', 'number');
```
```
			return i.type !== 'text';
```
```
		}
```
```
		var incTest = incrementTest();
```
```
		if ($.fn.uppydowner) {
```
```
			if(!incTest) {
```

				$('input[type=number]').attr('class', 'uppydowner');

```
				$('input.uppydowner').uppydowner();
```
```
			} else {
```

				$('input[type=number]').css('width', '3em');

```
			}
```
```
		}
```
```
	});
```
```
})(jQuery);
```

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:

Top

KAWWA Markup Pattern Library

eCommerce

In Basket

Basket (3)

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce