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.
HTML5 Plain Code
-
<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 €</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 €</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 €</dd>
-
</dl>
-
<p class="basket-total">TOTAL: <strong>1.499,00 €</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
-
.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
-
(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: