KAWWA Markup Pattern Library


eCommerce

Product Catalog Component Information

  • Class name: (k-catalog)
  • Version: 1.1
  • jQuery jQuery Interactive feature

Add to list

The demo below shows an example of how a k-product will be displayed in a catalog. To have a product catalog, simply list your k-product components inside the catalog block.

In order to style the catalog products correctly, be sure to have on your style-sheet the code for the product template also.

HTML5 Plain Code

COPY
  1. <div class="k-catalog">
  2. 	<ul class="catalog-view">
  3. 		<li><button type="button">Simple View</button></li>
  4. 		<li><button type="button">Detailed View</button></li>
  5. 	</ul>
  6. 				
  7. 	<!-- h-product/ -->
  8. 	<article class="k-product h-product hproduct">
  9. 		<p class="photo-data">
  10. 			<a href="#"><img class="u-photo" src="product_01.svg" alt="Image of Title of product" /></a></p>
  11. 		
  12. 		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>
  13. 		
  14. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  15. 		
  16. 		<div class="price-data">
  17. 			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>
  18. 		</div>
  19. 		<p class="extra new">new</p>
  20. 		<p class="buy"><button type="button">Add to basket</button></p>
  21. 	</article>
  22. 	<!-- /h-product -->
  23. 	<!-- h-product/ -->
  24. 	<article class="k-product h-product hproduct">
  25. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_02.svg" alt="Image of Title of product" /></a></p>
  26. 		
  27. 		<h3 class="p-name fn"><a href="#">Title of product</a></h3>
  28. 		
  29. 		<p class="h-review"><data class="p-rating" value="5"><img src="four-stars.svg" alt="Five stars" /></data></p>
  30. 		
  31. 		<div class="price-data">
  32. 			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>
  33. 		</div>
  34. 		<p class="extra new">new</p>
  35. 		<p class="buy"><button type="button">Add to basket</button></p>
  36. 	</article>
  37. 	<!-- /h-product -->
  38. 	<!-- h-product/ -->
  39. 	<article class="k-product h-product hproduct">
  40. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_03.svg" alt="Image of Title of product" /></a></p>
  41. 		
  42. 		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>
  43. 		
  44. 		<p class="h-review"><data class="p-rating" value="5"><img src="three-stars.svg" alt="Five stars" /></data></p>
  45. 		
  46. 		<div class="price-data">
  47. 			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>
  48. 		</div>
  49. 		<p class="buy"><button type="button">Add to basket</button></p>
  50. 	</article>
  51. 	<!-- /h-product -->
  52. 	<!-- h-product/ -->
  53. 	<article class="k-product h-product hproduct">
  54. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_04.svg" alt="Image of Title of product" /></a></p>
  55. 		
  56. 		<h3 class="p-name fn"><a href="#">Title of product</a></h3>
  57. 		
  58. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  59. 		
  60. 		<div class="price-data">
  61. 			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>
  62. 		</div>
  63. 		<p class="buy"><button type="button">Add to basket</button></p>
  64. 	</article>
  65. 	<!-- /h-product --><!-- h-product/ -->
  66. 	<article class="k-product h-product hproduct">
  67. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_05.svg" alt="Image of Title of product" /></a></p>
  68. 		
  69. 		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>
  70. 		
  71. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  72. 		
  73. 		<div class="price-data">
  74. 			<p class="old-price">
  75. 				<span class="k-no-display">Old price:</span> 
  76. 				<span aria-label="Old price">50,50 &euro;</span></p>
  77. 			<p><data class="p-price price sale" value="50.50">50,50 &euro;</data></p>
  78. 		</div>
  79. 		<p class="extra sale">-10%</p>
  80. 		<p class="buy"><button type="button">Add to basket</button></p>
  81. 	</article>
  82. 	<!-- /h-product -->
  83. 	<!-- h-product/ -->
  84. 	<article class="k-product h-product hproduct">
  85. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_06.svg" alt="Image of Title of product" /></a></p>
  86. 		
  87. 		<h3 class="p-name fn"><a href="#">Title of product</a></h3>
  88. 		
  89. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  90. 		
  91. 		<div class="price-data">
  92. 			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>
  93. 		</div>
  94. 		<p class="extra new">new</p>
  95. 		<p class="buy"><button type="button">Add to basket</button></p>
  96. 	</article>
  97. 	<!-- /h-product -->
  98. 	<!-- h-product/ -->
  99. 	<article class="k-product h-product hproduct">
  100. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_07.svg" alt="Image of Title of product" /></a></p>
  101. 		
  102. 		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>
  103. 		
  104. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  105. 		
  106. 		<div class="price-data">
  107. 			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>
  108. 		</div>
  109. 		<p class="buy"><button type="button">Add to basket</button></p>
  110. 	</article>
  111. 	<!-- /h-product -->
  112. 	<!-- h-product/ -->
  113. 	<article class="k-product h-product hproduct">
  114. 		<p class="photo-data"><a href="#"><img class="u-photo" src="product_08.svg" alt="Image of Title of product" /></a></p>
  115. 		
  116. 		<h3 class="p-name fn"><a href="#">Title of product</a></h3>
  117. 		
  118. 		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>
  119. 		
  120. 		<div class="price-data">
  121. 			<p class="all-prices"><data class="p-price price sale" value="50.50">50,50 &euro;</data></p>
  122. 		</div>
  123. 		<p class="extra sale">sale</p>
  124. 		<p class="buy"><button type="button">Add to basket</button></p>
  125. 	</article>
  126. 	<!-- /h-product -->
  127. </div>

CSS Code

COPY
  1. div.k-catalog {margin: 5%;}
  2. 
                                
  3. 	.k-catalog .k-product {
  4. 		position: relative;
  5. 		text-align: center;
  6. 		margin: 0 0.5em 1em 0.5em;
  7. 		box-shadow: 0 0 2px rgba(0,0,0,0.3);
  8. 	}
  9. 	
  10. 	.k-catalog .photo-data a {display: block;}
  11. 	
  12. 	/* Hide for simple view */
  13. 	.k-catalog .p-name, .k-catalog .buy, .k-catalog .extra, .k-catalog .h-review, .k-catalog .old-price {
  14. 		display: none
  15. 	}
  16. 	
  17. 	.k-catalog .p-name {
  18. 		font-size: 0.9em;
  19. 		text-transform: none;
  20. 		margin: 0;
  21. 	}
  22. 	
  23. 	.k-catalog .price-data {
  24. 		text-align: center;
  25. 		margin: 0.5em 0;
  26. 	}
  27. 	.k-catalog .buy {margin: 1em 0 2em;}
  28. 
                                
  29. /* DETAILED VIEW */
  30. 
                                
  31. .k-catalog.list-view .k-product {
  32. 	display: flex;
  33. 	flex-flow: row wrap;
  34. 	display: -webkit-flex;
  35. 	-webkit-flex-flow: row wrap;
  36. 	margin: 0 3% 1em 3%;
  37. 	border: none;
  38. 	border-bottom: 1px dotted gray;
  39. 	box-shadow: none;
  40. }
  41. .k-catalog.list-view .k-product > * {flex: 1 0 100%; -webkit-flex: 1 0 100%;}
  42. .k-catalog.list-view .buy {margin-top: auto;}
  43. 
                                
  44. .k-catalog.list-view .p-name, .k-catalog.list-view .buy, 
  45. 	.k-catalog.list-view .extra, .k-catalog.list-view .h-review, 
  46. 	.k-catalog.list-view .old-price {
  47. 	display: block;
  48. }
  49. 
                                
  50. .k-catalog.list-view p.extra {
  51. 	position: absolute;
  52. 	top: 1em;
  53. 	left: 0;
  54. 	width: 3em;
  55. 	text-align: center;
  56. 	border-radius: 3px;
  57. }
  58. .k-catalog.list-view .photo-data a, 
  59. 	.k-catalog.list-view .photo-data a:link, 
  60. 	.k-catalog.list-view .photo-data a:visited {
  61. 	position: static;
  62. 	display: inline;
  63. }
  64. 
                                
  65. /* VIEW BUTTONS */
  66. 
                                
  67. ul.catalog-view {
  68. 	clear: both;
  69. 	text-align: center;
  70. 	padding: 1em 0 2em;
  71. }
  72. 
                                
  73. 	ul.catalog-view li {
  74. 		display: inline-block;
  75. 		list-style-type: none;
  76. 	}
  77. 	ul.catalog-view button {
  78. 		color: #FFF;
  79. 		background: #666;
  80. 		padding: 0.3em 1.3em;
  81. 		border: 1px solid #666;
  82. 		border-radius: 3px;
  83. 		box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  84. 	}
  85. 	
  86. 	ul.catalog-view button:hover, ul.catalog-view button:focus {
  87. 		color: #FFF;
  88. 		background: #000;
  89. 		border: 1px solid #000;
  90. 		box-shadow: none;
  91. 	}
  92. 	ul.catalog-view button.active {
  93. 		color: #FFF;
  94. 		background: #000;
  95. 		border: 1px solid #000;
  96. 	}
  97. 
                                
  98. /* Queries */
  99. 
                                
  100. @media screen and (min-width: 430px) {
  101. 	div.k-catalog {
  102. 		display: flex;
  103. 		flex-wrap: wrap;
  104. 		display: -webkit-flex;
  105. 		-webkit-flex-wrap: wrap;
  106. 		margin: 5%;
  107. 	}
  108. 	.k-catalog .k-product {
  109. 		flex-grow: 1;
  110. 		-webkit-flex-grow: 1;
  111. 		width: 40%;
  112. 	}
  113. 	ul.catalog-view {flex: 0 0 100%; -webkit-flex: 0 0 100%;}
  114. }
  115. 
                                
  116. @media screen and (min-width: 680px) {
  117. 	.k-catalog .p-name {font-size: 1.2em;}
  118. }
  119. 
                                
  120. @media screen and (min-width: 800px) {
  121. 	.k-catalog .k-product, .k-catalog.list-view .k-product {width: 20%;}
  122. }
  123. 
                                
  124. 
                                

In order to style the catalog products correctly, be sure to have on your style-sheet the code for the product template also.


How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.switchView) {
  6. 			$('.catalog-view').switchView();
  7. 		}
  8. 	});
  9. })(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