Jigle title of product very very long
50,50 €
new
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.
50,50 €
new
50,50 €
new
50,50 €
50,50 €
Old price: 50,50 €
50,50 €
-10%
50,50 €
new
50,50 €
50,50 €
sale
<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>
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="extra new">new</p>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="extra new">new</p>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product --><!-- h-product/ -->
<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 €</span></p>
<p><data class="p-price price sale" value="50.50">50,50 €</data></p>
</div>
<p class="extra sale">-10%</p>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="extra new">new</p>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
<!-- h-product/ -->
<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 €</data></p>
</div>
<p class="extra sale">sale</p>
<p class="buy"><button type="button">Add to basket</button></p>
</article>
<!-- /h-product -->
</div>
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.
(function($){
'use strict';
$(document).ready(function(){
if($.fn.switchView) {
$('.catalog-view').switchView();
}
});
})(jQuery);
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: