<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">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default panel--styled">
<div class="panel-body">
<div class="col-md-12 panelTop">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/350x350" alt=""/>
</div>
<div class="col-md-8">
<h2>Product Name</h2>
<p>Lorem ipsum dolor sit amet, altera propriae iudicabit eos ne. Vel ut accusam tacimates, prima oratio ius ea. Et duo alii verterem principes, te quo putent melius fabulas, ei scripta eligendi appareat duo.</p>
</div>
</div>
<div class="col-md-12 panelBottom">
<div class="col-md-4 text-center">
<button class="btn btn-lg btn-add-to-cart"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
</div>
<div class="col-md-4 text-left">
<h5>Price <span class="itemPrice">$24.99</span></h5>
</div>
<div class="col-md-4">
<div class="stars">
<div id="stars" class="starrr"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*----------------------
Product Card Styles
----------------------*/
.panel.panel--styled {
background: #F4F2F3;
}
.panelTop {
padding: 30px;
}
.panelBottom {
border-top: 1px solid #e7e7e7;
padding-top: 20px;
}
.btn-add-to-cart {
background: #FD5A5B;
color: #fff;
}
.btn.btn-add-to-cart.focus, .btn.btn-add-to-cart:focus, .btn.btn-add-to-cart:hover {
color: #fff;
background: #FD7172;
outline: none;
}
.btn-add-to-cart:active {
background: #F9494B;
outline: none;
}
span.itemPrice {
font-size: 24px;
color: #FA5B58;
}
/*----------------------
##star Rating Styles
----------------------*/
.stars {
padding-top: 10px;
width: 100%;
display: inline-block;
}
span.glyphicon {
padding: 5px;
}
.glyphicon-star-empty {
color: #9d9d9d;
}
.glyphicon-star-empty, .glyphicon-star {
font-size: 18px;
}
.glyphicon-star {
color: #FD4;
transition: all .25s;
}
.glyphicon-star:hover {
transform: rotate(-15deg) scale(1.3);
}
// Starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i, _, _ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$( document ).ready(function() {
$('#stars').on('starrr:change', function(e, value){
$('#count').html(value);
});
$('#stars-existing').on('starrr:change', function(e, value){
$('#count-existing').html(value);
});
});
