<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-xs-3 col-xs-offset-4" style="border:1px solid silver;padding:0px;">
<div class="brand">
<img src="https://www.documentree.com/images/yourlogohere.png" alt="Brand" />
</div>
<div class="col-xs-12">
<div class="row canvas"></div>
</div>
</div>
</div>
</div>
.brand{
width:100%;
background:silver;
display:flex;
align-content: center;
max-height: 35px;
}
.brand > img{
margin-left:5px;
max-height:40px;
width:auto;
}
.mylabel{
border-left:1px solid #fafafa;
border-bottom:black;
border-bottom:1px solid #fafafa;
height: 90px;
padding: 0;
position: relative;
cursor:pointer;
}
.mylabel > a{
color:black;
}
.mylabel > a > p:first-of-type{
font-size:9px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* number of lines to show */
line-height: 14px; /* fallback */
max-height: 14px; /* fallback */
margin: 0;
text-align:center;
}
.mylabel > a > p:last-of-type{
font-size:12px;
overflow: hidden;
margin: 0;
text-align:center;
font-weight: bold;
}
.discount{
position: absolute;
color: white;
background: #006666;
border-radius: 0;
left:5px;
top:5px;
padding-left:3px;
padding-right:3px;
}
$(document).ready(function(){
//-- Crear productos dinamicamente
var products = [];
products.push({"title":"Tablet Samsung Tab SM-T133","price":"156","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/290643-280-280/700391_1.jpg","link":""});
products.push({"title":"Tablet Samsung Galaxy Tab E 96","price":"156","discount":"13","photo":"http://fravega.vteximg.com.br/arquivos/ids/278245-280-280/700270_1.jpg","link":""});
products.push({"title":"Celular Libre Lenovo Vibe K5 Negro","price":"280","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/287959-280-280/780686_1.jpg","link":""});
products.push({"title":"Celular Libre Alcatel IDOL 3","price":"247","discount":"18","photo":"http://fravega.vteximg.com.br/arquivos/ids/284084-280-280/_MG_0204-copy.jpg","link":""});
products.push({"title":"Tablet Eurocase I748 Tabi 7","price":"130","discount":"20","photo":"http://fravega.vteximg.com.br/arquivos/ids/290699-280-280/700393_1.jpg","link":""});
products.push({"title":"Celular Libre Samsung Galaxy A5 2016 Dorado","price":"499","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/284088-280-280/CELULAR-LIBRE-SAMSUNG-GALAXY-A5-2016-DORADO.jpg","link":""});
products.push({"title":"Celular Libre Admiral ADS1 Blanco","price":"187","discount":"10","photo":"http://fravega.vteximg.com.br/arquivos/ids/294640-280-280/780607_1.jpg","link":""});
products.push({"title":"Celular Libre Huawei G8 Plateado","price":"550","discount":"5","photo":"http://fravega.vteximg.com.br/arquivos/ids/284323-280-280/CELULAR-LIBRE-HUAWEI-G8-PLATEADO.jpg","link":""});
products.push({"title":"Celular Libre Samsung Galaxy J1 MINI White","price":"156","discount":"15","photo":"http://fravega.vteximg.com.br/arquivos/ids/294473-280-280/Celular-Libre-Samsung-Galaxy-J1-MINI-White.jpg","link":""});
function shuffle(a) {
for (let i = a.length; i; i--) {
let j = Math.floor(Math.random() * i);
[a[i - 1], a[j]] = [a[j], a[i - 1]];
}
return a;
}
showProducts();
function showProducts(){
products = shuffle(products);
$(".canvas").html(""); //-- Empty
//-- Print
$.each(products, function(e, data){
if (e < 6){
//-- Check discount
if (data.discount === undefined || data.discount <= 0){
var html_discount = '';
var new_price = data.price;
}else{
var html_discount = '<span class="label discount">-'+data.discount+'%</span>';
var new_price = parseInt(data.price) - (parseInt(data.price) * parseInt(data.discount) / 100);
}
//-- Model
$(".canvas").append('<div class="col-xs-4 mylabel"><a href="'+data.link+'">' + html_discount +
'<div style="height:70%;display:flex;justify-content: center;align-content: center;overflow: hidden">'+
'<img style="height:100%" src="'+data.photo+'" alt="Product"/>'+
'</div>'+
'<p>'+ data.title +'</p>'+
'<p class="price" data-price="US $'+data.price+'" data-newprice="US $'+new_price+'">US $'+new_price+'</p>'+
'</a></div>');
}else{
return false; //-- Finish and exit.
}
});
setInterval(function(){ changePrice();}, 3500);
function changePrice(){
$(".price").each(function(e,index){
if ($(this).text() == $(this).attr("data-newprice")){
$(this).html(' <span style="font-weight:normal;color:gray;text-decoration:line-through;">' + $(this).attr("data-price") + '</span>');
}else{
$(this).html($(this).attr("data-newprice"));
}
});
}
}
});
