$(function() {
$('.categories .card button').on('click', function() {
var productType = $(this).parent().data('type'),
h3textbase = ' recommended for you',
expand = $(this).find('>:first-child'),
recs = $('.recommendations');
recs.css('margin-left', '0');
if($('.card .arrow').hasClass('down')) {
$('.card .arrow').removeClass('down').addClass('right');
}
if(expand.hasClass('right')) {
expand.removeClass('right').addClass('down');
} else {
expand.removeClass('down').addClass('right');
}
if (recs+':visible'){
recs.slideUp(100).html('').slideDown(400);
} else {
recs.html('').slideDown(400);
}
recs.append('<h2>'+productType+h3textbase+'</h2>');
var total = '';
$.each(products[productType], function(i,p){
recs.append('<a class="card" data-sku="'+p.sku+'">'+
'<img src="http://placehold.it/300x200/&text='+p.sku+'">'+
'<h3>'+p.title+'</h3>'+
'<h4>'+p.price+'</h4>'+
'<button>Add to cart</button>'+
'</a>');
total = i;
});
var fullWidth = (total+1)*300;
recs.width(fullWidth+'px');
$('.horizontal-scroll').append('<button class="slideRight">→</button>');
$('.slideRight').on('click', function(){
var firstFive = $('.recommendations > .card:lt(2)');
recs.append(firstFive);
});
$('.recommendations .card').addClass('visible');
});
});
var products = {
"jeans": [
{
"title": "Boot cut jeans",
"price": "34.99",
"sku": "0001"
},
{
"title": "Skinny jeans",
"price": "36.99",
"sku": "0002"
},
{
"title": "Sparkly jeans",
"price": "29.99",
"sku": "0003"
},
{
"title": "Hole-y jeans",
"price": "64.99",
"sku": "0004"
},
{
"title": "Faded jeans",
"price": "38.99",
"sku": "0005"
},
{
"title": "Vintage jeans",
"price": "31.99",
"sku": "0006"
},
{
"title": "Bell-bottom jeans",
"price": "38.99",
"sku": "0007"
},
{
"title": "Stretchy jeans",
"price": "37.99",
"sku": "0008"
},
{
"title": "Classic jeans",
"price": "38.99",
"sku": "0009"
},
{
"title": "Straight-cut jeans",
"price": "35.99",
"sku": "0010"
}
],
"shirts": [
{
"title": "Heavy metal t-shirt",
"price": "24.99",
"sku": "0011"
},
{
"title": "Turtle neck",
"price": "19.99",
"sku": "0012"
},
{
"title": "Plain white tee",
"price": "15.99",
"sku": "0013"
},
{
"title": "Nerdy logo t-shirt",
"price": "18.99",
"sku": "0014"
},
{
"title": "Long sleeve shirt",
"price": "21.99",
"sku": "0015"
},
{
"title": "Classic undershirt",
"price": "22.99",
"sku": "0016"
},
{
"title": "V-Neck shirt",
"price": "20.99",
"sku": "0017"
},
{
"title": "Hoodie shirt",
"price": "18.99",
"sku": "0018"
},
{
"title": "Tank top",
"price": "17.99",
"sku": "0019"
},
{
"title": "Sleeveless Tee",
"price": "21.99",
"sku": "0020"
}
],
"sweaters": [
{
"title": "Heavy running sweater",
"price": "31.99",
"sku": "0021"
},
{
"title": "Turtle neck sweater",
"price": "29.99",
"sku": "0022"
},
{
"title": "Plain black sweater",
"price": "25.99",
"sku": "0023"
},
{
"title": "Nerdy logo sweater",
"price": "41.99",
"sku": "0024"
},
{
"title": "Long sleeve sweater",
"price": "32.99",
"sku": "0025"
},
{
"title": "Classic sweater",
"price": "22.99",
"sku": "0026"
},
{
"title": "V-Neck sweater",
"price": "27.99",
"sku": "0027"
},
{
"title": "Hoodie sweater",
"price": "38.99",
"sku": "0028"
},
{
"title": "Wollen sweater",
"price": "50.99",
"sku": "0029"
},
{
"title": "Animal print sweater",
"price": "42.99",
"sku": "0030"
}
],
"hats": [
{
"title": "Bowler hat",
"price": "31.99",
"sku": "0031"
},
{
"title": "Cowboy hat",
"price": "29.99",
"sku": "0032"
},
{
"title": "Baseball cap",
"price": "25.99",
"sku": "0033"
},
{
"title": "Knit hat",
"price": "41.99",
"sku": "0034"
},
{
"title": "Watch cap",
"price": "32.99",
"sku": "0035"
},
{
"title": "Top hat",
"price": "22.99",
"sku": "0036"
},
{
"title": "Stocking cap",
"price": "27.99",
"sku": "0037"
},
{
"title": "Flex-fit hat",
"price": "38.99",
"sku": "0038"
},
{
"title": "Sun hat",
"price": "50.99",
"sku": "0039"
},
{
"title": "Leather hat",
"price": "42.99",
"sku": "0040"
}
],
"belts": [
{
"title": "Brown leather belt",
"price": "31.99",
"sku": "0041"
},
{
"title": "Black leather belt",
"price": "29.99",
"sku": "0042"
},
{
"title": "Crocheted belt",
"price": "25.99",
"sku": "0043"
},
{
"title": "Hemp belt",
"price": "41.99",
"sku": "0044"
},
{
"title": "White satin belt",
"price": "32.99",
"sku": "0045"
},
{
"title": "Animal print belt",
"price": "22.99",
"sku": "0046"
},
{
"title": "Plastic colored belt",
"price": "27.99",
"sku": "0047"
},
{
"title": "Safety belt",
"price": "38.99",
"sku": "0048"
},
{
"title": "Soft cotton belt",
"price": "50.99",
"sku": "0049"
},
{
"title": "Tanned leather belt",
"price": "42.99",
"sku": "0050"
}
],
"shorts": [
{
"title": "Running shorts",
"price": "31.99",
"sku": "0061"
},
{
"title": "Khaki shorts",
"price": "29.99",
"sku": "0062"
},
{
"title": "Short shorts",
"price": "25.99",
"sku": "0063"
},
{
"title": "Capri shorts",
"price": "41.99",
"sku": "0064"
},
{
"title": "Cargo shorts",
"price": "32.99",
"sku": "0065"
},
{
"title": "Board shorts",
"price": "22.99",
"sku": "0066"
},
{
"title": "Swim trunks",
"price": "27.99",
"sku": "0067"
},
{
"title": "Jean shorts",
"price": "38.99",
"sku": "0068"
},
{
"title": "Corduroy shorts",
"price": "50.99",
"sku": "0069"
},
{
"title": "Animal print shorts",
"price": "42.99",
"sku": "0070"
}
]
}
!
