KAWWA Markup Pattern Library


eCommerce

In Basket Component Information

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

Add to list

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.

Basket (3)

Article name
Kawwa Leather handbag with lots of things inside
233,00 €
Article name
Bag Banana Republic Gray
1.233,00 €
Article name
Bag
33,00 €

TOTAL: 1.499,00 €

HTML5 Plain Code

COPY
  1. <div class="k-basket">
  2. 	<h3>Basket (3)</h3>
  3. 	<div class="content">
  4. 		<dl class="basket-item new-item">
  5. 			<dt><a href="#"><img src="product_09.svg" alt="Article name" /></a></dt>
  6. 			<dd class="name"><a href="#">Kawwa Leather handbag with lots of things inside</a></dd>
  7. 			<dd class="k-quantity"><input type="number" value="1" title="Define quantity to add to basket" /></dd>
  8. 			<dd class="price">233,00 &euro;</dd>
  9. 		</dl>
  10. 		<dl class="basket-item">
  11. 			<dt><a href="#"><img src="product_02.svg" alt="Article name" /></a></dt>
  12. 			<dd class="name"><a href="#">Bag Banana Republic Gray</a></dd>
  13. 			<dd class="k-quantity"><input type="number" value="1" title="Define quantity to add to basket" /></dd>
  14. 			<dd class="price">1.233,00 &euro;</dd>
  15. 		</dl>
  16. 		<dl class="basket-item">
  17. 			<dt><a href="#"><img src="product_03.svg" alt="Article name" /></a></dt>
  18. 			<dd class="name"><a href="#">Bag</a></dd>
  19. 			<dd class="k-quantity"><input type="number" value="1" title="Define quantity to add to basket" /></dd>
  20. 			<dd class="price">33,00 &euro;</dd>
  21. 		</dl>
  22. 		<p class="basket-total">TOTAL: <strong>1.499,00 &euro;</strong></p>
  23. 		<ul class="k-buttons-bar">
  24. 			<li><input type="submit" value="View basket" class="optional" /></li>
  25. 			<li><input type="submit" value="Checkout" /></li>
  26. 		</ul>
  27. 	</div>
  28. </div>

CSS Code

COPY
  1. .k-basket {border: none;}
  2. 	.k-basket h3 {
  3. 		font-size: 1.2em;
  4. 		color: #FFF;
  5. 		background: #000;
  6. 		padding: 0.3em 1em;
  7. 	}
  8. 
                                
  9. 	.k-basket .content {
  10. 		width: 100%;
  11. 		padding: 0;
  12. 	}
  13. 	.k-basket .k-buttons-bar {
  14. 		padding: 1em 0 0.5em;
  15. 		margin-bottom: 0;
  16. 	}
  17. 		.k-basket .k-buttons-bar li {font-size: 0.8em;}
  18. 		
  19. 	.k-basket input.uppydowner {font-size: 80%;}
  20. 	
  21. dl.basket-item {
  22. 	position: relative;
  23. 	float: left;
  24. 	width: 94%;
  25. 	padding: 0.3em 3%;
  26. 	margin-bottom: 0.3em;
  27. 	border-bottom: 1px dashed #CCC;
  28. }
  29. 
                                
  30. 	dl.basket-item dt {
  31. 		float: left;
  32. 		width: 20%;
  33. 		min-width: 50px;
  34. 		max-width: 100px;
  35. 		background: #FFF;
  36. 		padding: 0.3em;
  37. 		margin-right: 1em;
  38. 	}
  39. 	dl.basket-item dt, dl.basket-item dd {font-size: 0.8em;}
  40. 	dl.basket-item dd.name {
  41. 		overflow: visible;
  42. 		margin: 0 0 1em;
  43. 	}
  44. 	
  45. 	dl.basket-item dd.k-quantity {clear: none;}
  46. 		dl.basket-item dd.k-quantity input {width: 2em;}
  47. 		
  48. 	dl.basket-item dd.price {text-align: right;}
  49. 	
  50. dl.new-item {background: #EEE;}
  51. 
                                
  52. p.basket-total {
  53. 	clear: both;
  54. 	text-align: center;
  55. 	color: #050505;
  56. 	background: #EEE;
  57. 	padding: 0.3em;
  58. 	margin: 0.3em 0.3em 0;
  59. }
  60. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		function incrementTest() {
  6. 			var i = document.createElement('input');
  7. 			i.setAttribute('type', 'number');
  8. 			return i.type !== 'text';
  9. 		}
  10. 		var incTest = incrementTest();
  11. 
                                
  12. 		if ($.fn.uppydowner) {
  13. 			if(!incTest) {
  14. 				$('input[type=number]').attr('class', 'uppydowner');
  15. 				$('input.uppydowner').uppydowner();
  16. 
                                
  17. 			} else {
  18. 				$('input[type=number]').css('width', '3em');
  19. 			}
  20. 		}
  21. 	});
  22. })(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


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