KAWWA Markup Pattern Library


eCommerce

Basket Summary Component Information

  • Class name: (k-basket-sum)
  • Version: 1.0

Add to list

The Basket Summary allows you to present the user a simple way to follow the number of products she added to the basket.

You may place the basket summary on the header of your page, inside the "k-tools" block.

HTML5 Plain Code

COPY
  1. <p class="k-basket-sum"><a href="#" title="See basket details"><strong>0</strong> items in your basket</a></p>

CSS Code

COPY
  1. p.k-basket-sum {
  2. 	top: 1.5em;
  3. 	right: 4%;
  4. 	width: 16.5em;
  5. 	font: 0.8em open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  6. 	text-align: right;
  7. 	color: #FFF;
  8. 	background: #000 url(../img/k-theme0/bg_basket-sum.png) 5px 2px no-repeat;
  9. 	border-right: 1px solid #808080;
  10. }
  11. 
                                
  12. 	p.k-basket-sum a, p.k-basket-sum a:link, p.k-basket-sum a:visited {
  13. 		display: block;
  14. 		text-decoration: none;
  15. 		color: #FFF;
  16. 		background: transparent;
  17. 		padding: 0.5em 8px 0.5em 0;
  18. 	}
  19. 
                                

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