KAWWA Markup Pattern Library


eCommerce

Product Template Component Information

  • Class name: (k-product)
  • Version: 1.2

Add to list

The "Product template" — which can be copied here below – groups most of the identifiable product data based on the current "h-product" microformat2 specifications, independently of the type of product you're displaying :

  • Product title
  • Product category
  • Main picture
  • Extras (new/promo)
  • Product description
  • Product info
  • Availability
  • Rating
  • Discount info
  • Old Price/Price data
  • Add to basket link

The order in which the product data appear in the HTML template is not relevant, as long as the CSS takes the placement changes in account.

The demonstration below is just a display of all product data. It is not a defined layout. For examples on specific displays of the product block and its style, please check the "Product catalog" or the "Product Sheet" components.

For backward compatibility purposes, we've kept the previous "hproduct" microformats classes.

Title of product

Product category

Title of product

Three stars 50 comments

Eget velit convallis laoreet consectetuer In dictum est ipsum gravida consequat. Elit Sed magna id congue scelerisque velit convallis laoreet consectetuer In dictum est ipsum gravida consequat. Elit Sed magna id congue scelerisque.

  • Ref.: 1235A/gray
  • Height: 65cm
  • Composition: 20% cotton/80% wool

50,50 €
50,50 €

Availability : immediate delivery

HTML5 Plain Code

COPY
  1. <article class="h-product hproduct k-product">
  2. 	<header>
  3. 		<h3 class="p-name fn">Title of product</h3>
  4. 		<p class="p-category"><a href="#">Product category</a></p>
  5. 	</header>
  6. 	<div class="photo-data">
  7. 		<p><a href="#"><img class="u-photo" src="product_05.svg" alt="Title of product" /></a></p>
  8. 	</div>
  9. 	<div class="product-data">
  10. 		<p class="rating"> 
  11. 			<data class="p-rating" value="3"><img src="three-stars.svg" alt="Three stars" /></data> 
  12. 			<a href="#comments" title="See what other customers are saying">50 comments</a></p>
  13. 		<p class="e-description description">Eget velit convallis laoreet consectetuer In dictum est 
  14. 							ipsum gravida consequat. Elit Sed magna id congue scelerisque velit convallis laoreet consectetuer In dictum est 
  15. 							ipsum gravida consequat. Elit Sed magna id congue scelerisque.</p>
  16. 		<ul class="product-info">
  17. 			<li><strong>Ref.:</strong> 1235A/gray</li>
  18. 			<li><strong>Height:</strong> 65cm</li>
  19. 			<li><strong>Composition:</strong> 20% cotton/80% wool</li>
  20. 		</ul>
  21. 		<div class="price-data">
  22. 			<p class="all-prices">
  23. 				<span class="hidden">Old price :</span> 
  24. 				<span class="old-price" title="Old price">50,50 &euro;</span><br />
  25. 				<data class="price p-price sale">50,50 &euro;</data></p>
  26. 		</div>
  27. 		<div class="buyZone">
  28. 			<div class="availability">
  29. 				<p><strong>Availability :</strong> immediate delivery</p>
  30. 			</div>
  31. 			<p class="buy"><button type="button">Add to basket</button></p>
  32. 		</div>
  33. 	</div>
  34. </article>

CSS Code

COPY
  1. /* Contains declarations of properties shared by all kinds of product displays */
  2. 
                                
  3. .k-product {
  4.   position: relative;
  5. }
  6. .k-product header {
  7.   margin-bottom: 2em;
  8. }
  9. .k-product .p../img/k-theme0/image_examples/ {
  10.   text-transform: none;
  11.   margin: 0;
  12. }
  13. 
                                
  14. /* --- PRODUCT DATA --- */
  15. /* --- Rating --- */
  16. .rating {
  17.   text-align: right;
  18.   margin: 1em 0;
  19. }
  20. .rating p {
  21.   display: inline;
  22.   font-size: 0.8em;
  23. }
  24. .rating p:first-child {
  25.   position: relative;
  26.   top: 2px;
  27.   right: 5px;
  28. }
  29. .rating a, .rating a:link {
  30.   color: #050505;
  31. }
  32. 
                                
  33. /* Price data */
  34. .p-price {
  35.   font-size: 1.5em;
  36.   font-weight: bold;
  37.   white-space: nowrap;
  38. }
  39. 
                                
  40. .old-price {
  41.   color: inherit;
  42.   text-decoration: line-through;
  43. }
  44. 
                                
  45. /* Extra prices info */
  46. p.extra {background: rgba(255, 255, 255, 0.8);}
  47. 
                                
  48. .sale {color: #C60;}
  49. 
                                
  50. p.sale::before {
  51.   position: relative;
  52.   top: 1px;
  53.   content: "\263B  ";
  54.   line-height: 1.5;
  55.   font-size: 110%;
  56. }
  57. @media screen and (min-width: 600px) {
  58.   p.sale::before {
  59.     display: block;
  60.     top: 5px;
  61.     line-height: 1;
  62.     font-size: 250%;
  63.   }
  64. }
  65. 
                                
  66. .new {
  67.   color: #690;
  68. }
  69. 
                                
  70. p.new::before {
  71.   position: relative;
  72.   top: 1px;
  73.   content: "\272A  ";
  74.   line-height: 1.5;
  75.   font-size: 110%;
  76. }
  77. @media screen and (min-width: 600px) {
  78.   p.new::before {
  79.     display: block;
  80.     top: 5px;
  81.     line-height: 1;
  82.     font-size: 250%;
  83.   }
  84. }
  85. 
                                
  86. /* Buy zone */
  87. .availability {
  88.   font-size: 0.85em;
  89. }
  90. 
                                
  91. /* --- ADD TO BASKET BUTTON --- */
  92. p.buy {
  93.   line-height: 1;
  94.   margin: 1em 0;
  95. }
  96. p.buy a, p.buy a:link, p.buy a:visited, p.buy button {
  97.   display: inline-block;
  98.   text-decoration: none;
  99.   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  100.   color: #FFF;
  101.   background: #a40800;
  102.   padding: 0.4em 1.3em 0.6em;
  103.   border-radius: 3px;
  104.   border: 1px solid #a40800;
  105.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  106.   cursor: pointer;
  107. }
  108. p.buy a:hover, p.buy a:focus, p.buy button:hover, p.buy button:focus {
  109.   color: #FFF;
  110.   background: black;
  111.   border: 1px solid black;
  112.   box-shadow: none;
  113. }
  114. 
                                

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