[ KAWWA PORTAL ] Components : Product Catalog

eCommerce

Product Catalog

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

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.

Demo
Snippets

Jigle title of product very very long

50,50 €

new

Title of product

50,50 €

new

Jigle title of product very very long

50,50 €

Title of product

50,50 €

Jigle title of product very very long

Old price: 50,50 €

50,50 €

-10%

Title of product

50,50 €

new

Jigle title of product very very long

50,50 €

Title of product

50,50 €

sale

HTML5 Plain Code

COPY

```
<div class="k-catalog">
```
```
	<ul class="catalog-view">
```

		<li><button type="button">Simple View</button></li>

		<li><button type="button">Detailed View</button></li>

```
	</ul>
```
```
				
```
```
	
```

	<article class="k-product h-product hproduct">

```
		<p class="photo-data">
```

			<a href="#"><img class="u-photo" src="product_01.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>

```
		</div>
```
```
		<p class="extra new">new</p>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_02.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Title of product</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="four-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>

```
		</div>
```
```
		<p class="extra new">new</p>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_03.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="three-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>

```
		</div>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_04.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Title of product</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>

```
		</div>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_05.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```
```
			<p class="old-price">
```

				<span class="k-no-display">Old price:</span>

				<span aria-label="Old price">50,50 &euro;</span></p>

			<p><data class="p-price price sale" value="50.50">50,50 &euro;</data></p>

```
		</div>
```
```
		<p class="extra sale">-10%</p>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_06.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Title of product</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price new" value="50.50">50,50 &euro;</data></p>

```
		</div>
```
```
		<p class="extra new">new</p>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_07.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Jigle title of product very very long</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price" value="50.50">50,50 &euro;</data></p>

```
		</div>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
	
```

	<article class="k-product h-product hproduct">

		<p class="photo-data"><a href="#"><img class="u-photo" src="product_08.svg" alt="Image of Title of product" /></a></p>

```
		
```

		<h3 class="p-name fn"><a href="#">Title of product</a></h3>

```
		
```

		<p class="h-review"><data class="p-rating" value="5"><img src="five-stars.svg" alt="Five stars" /></data></p>

```
		
```
```
		<div class="price-data">
```

			<p class="all-prices"><data class="p-price price sale" value="50.50">50,50 &euro;</data></p>

```
		</div>
```
```
		<p class="extra sale">sale</p>
```

		<p class="buy"><button type="button">Add to basket</button></p>

```
	</article>
```
```
	
```
```
</div>
```

CSS Code

COPY

```
div.k-catalog {margin: 5%;}
```
```
	.k-catalog .k-product {
```
```
		position: relative;
```
```
		text-align: center;
```
```
		margin: 0 0.5em 1em 0.5em;
```
```
		box-shadow: 0 0 2px rgba(0,0,0,0.3);
```
```
	}
```
```
	
```

	.k-catalog .photo-data a {display: block;}

```
	
```
```
	/* Hide for simple view */
```

	.k-catalog .p-name, .k-catalog .buy, .k-catalog .extra, .k-catalog .h-review, .k-catalog .old-price {

```
		display: none
```
```
	}
```
```
	
```
```
	.k-catalog .p-name {
```
```
		font-size: 0.9em;
```
```
		text-transform: none;
```
```
		margin: 0;
```
```
	}
```
```
	
```
```
	.k-catalog .price-data {
```
```
		text-align: center;
```
```
		margin: 0.5em 0;
```
```
	}
```
```
	.k-catalog .buy {margin: 1em 0 2em;}
```
```
/* DETAILED VIEW */
```
```
.k-catalog.list-view .k-product {
```
```
	display: flex;
```
```
	flex-flow: row wrap;
```
```
	display: -webkit-flex;
```
```
	-webkit-flex-flow: row wrap;
```
```
	margin: 0 3% 1em 3%;
```
```
	border: none;
```
```
	border-bottom: 1px dotted gray;
```
```
	box-shadow: none;
```
```
}
```

.k-catalog.list-view .k-product > * {flex: 1 0 100%; -webkit-flex: 1 0 100%;}

.k-catalog.list-view .buy {margin-top: auto;}

.k-catalog.list-view .p-name, .k-catalog.list-view .buy,

	.k-catalog.list-view .extra, .k-catalog.list-view .h-review,

```
	.k-catalog.list-view .old-price {
```
```
	display: block;
```
```
}
```
```
.k-catalog.list-view p.extra {
```
```
	position: absolute;
```
```
	top: 1em;
```
```
	left: 0;
```
```
	width: 3em;
```
```
	text-align: center;
```
```
	border-radius: 3px;
```
```
}
```
```
.k-catalog.list-view .photo-data a, 
```

	.k-catalog.list-view .photo-data a:link,

	.k-catalog.list-view .photo-data a:visited {

```
	position: static;
```
```
	display: inline;
```
```
}
```
```
/* VIEW BUTTONS */
```
```
ul.catalog-view {
```
```
	clear: both;
```
```
	text-align: center;
```
```
	padding: 1em 0 2em;
```
```
}
```
```
	ul.catalog-view li {
```
```
		display: inline-block;
```
```
		list-style-type: none;
```
```
	}
```
```
	ul.catalog-view button {
```
```
		color: #FFF;
```
```
		background: #666;
```
```
		padding: 0.3em 1.3em;
```
```
		border: 1px solid #666;
```
```
		border-radius: 3px;
```

		box-shadow: 0 1px 1px rgba(0,0,0,0.3);

```
	}
```
```
	
```

	ul.catalog-view button:hover, ul.catalog-view button:focus {

```
		color: #FFF;
```
```
		background: #000;
```
```
		border: 1px solid #000;
```
```
		box-shadow: none;
```
```
	}
```
```
	ul.catalog-view button.active {
```
```
		color: #FFF;
```
```
		background: #000;
```
```
		border: 1px solid #000;
```
```
	}
```
```
/* Queries */
```
```
@media screen and (min-width: 430px) {
```
```
	div.k-catalog {
```
```
		display: flex;
```
```
		flex-wrap: wrap;
```
```
		display: -webkit-flex;
```
```
		-webkit-flex-wrap: wrap;
```
```
		margin: 5%;
```
```
	}
```
```
	.k-catalog .k-product {
```
```
		flex-grow: 1;
```
```
		-webkit-flex-grow: 1;
```
```
		width: 40%;
```
```
	}
```

	ul.catalog-view {flex: 0 0 100%; -webkit-flex: 0 0 100%;}

```
}
```
```
@media screen and (min-width: 680px) {
```
```
	.k-catalog .p-name {font-size: 1.2em;}
```
```
}
```
```
@media screen and (min-width: 800px) {
```

	.k-catalog .k-product, .k-catalog.list-view .k-product {width: 20%;}

```
}
```

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

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if($.fn.switchView) {
```
```
			$('.catalog-view').switchView();
```
```
		}
```
```
	});
```
```
})(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

KAWWA Markup Pattern Library

eCommerce

Product Catalog

Jigle title of product very very long

Title of product

Jigle title of product very very long

Title of product

Jigle title of product very very long

Title of product

Jigle title of product very very long

Title of product

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce