<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="col-lg-12">
<div class="col-md-4 col-sm-4"><!--RIGHT COLUMN--></div>
<div class="col-md-4 col-sm-4">
<div class="product-descripton">
<div class="container-fluid padding-left-and-right-none align-text-center">
<img src="http://placehold.it/380x150" id="ProductImageTeaser" css="img-responsive align-text-center" title="%ProductName% at $Price" ToolTip="%ProductName% at $Price" />
</div>
<div class="col-lg-12 padding-left-and-right-none padding-bottom-ten-px">
<div class="col-md-8 col-sm-8 col-xs-8 align-text-left padding-left-zero-px">
<h2 class="h3-header noto-sans color-light-blue align-text-left padding-left-five-px" title="$ProductName">Peace & Music Tshirt</h2>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 align-text-right padding-right-zero-px">
<h2 class="h3-header noto-sans color-light-blue align-text-right padding-right-five-px" title="$ProductPrice">$000.00</h2>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 padding-left-and-right-none">
<p class="noto-sans font-size-fourtheen-px padding-left-and-right-ten-px">This is the product description and its proposition value! This brief description can be used to induce Visitors to further click into the product review!</p>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 padding-left-and-right-none align-text-right padding-top-five-px padding-bottom-ten-px">
<a class="btn btn-warning" href="product-detail">Details</a>
<a class="btn btn-success" target="_blank" href="#"><i class="fa fa-shopping-cart padding-right-five-px"></i>Add to cart!</a>
</div>
<div class="clearfix"></div>
<div class="clearfix bottom-border-gray"></div>
<div class="clearfix padding-bottom-five-px"></div>
<div class="col-lg-12 padding-left-and-right-none padding-top-five-px">
<div class="col-md-8 col-sm-8 col-xs-8 align-text-left noto-sans">
<div class="product-rating">
<i class="fa fa-star color-gold"></i>
<i class="fa fa-star color-gold"></i>
<i class="fa fa-star color-gold"></i>
<i class="fa fa-star color-gold"></i>
<i class="fa fa-star color-gold"></i>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 align-text-right">
<p class="font-size-twelve-px align-text-right noto-sans">53 reviews</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</DIV>
<div class="col-md-4 col-sm-4"><!--RIGHT COLUMN--></div>
</div>
<div class="clearfix"><!--SPACER--></div>
<div class="container">
<div class="row">
<h2>Thanks @Maks for this snippet ! - With working FontAwesome Stars - <a href="http://twitter.com/AlexMahrt" target="_blank">@AlexMahrt on Twitter</a><br><small>Hover and click on a star</small></h2>
</div>
<div class="row lead">
<div id="stars" class="starrr"></div>
You gave a rating of <span id="count">0</span> star(s)
</div>
<div class="row lead">
<p>Also you can give a default rating by adding attribute data-rating</p>
<div id="stars-existing" class="starrr" data-rating='4'></div>
You gave a rating of <span id="count-existing">4</span> star(s)
</div>
</div>
/* CSS prvided by Marcelo Martins at marcelomartins.me */
.product-container { border: none; padding: 8px; }
div.product-descripton { border: 1px solid #CCCCCC; padding: 5px; border-radius: 5px; }
img.img-responsive { width: 100%; height: 100%; }
.product-rating { margin-top: 5px; color: #ff9f22; font-size: 12px; }
/* *-*-*-*-*-*-* HEADERS *-*-*-*-*-*-* */
.h3-header { font-size: 1.4vmax; margin-bottom: 0px; padding-bottom: 0px; }
/* *-*-*-*-*-*-* PADDING *-*-*-*-*-*-* */
.padding-left-and-right-none { padding-left: 0px; padding-right: 0px; }
.padding-left-and-right-ten-px { padding-left: 10px; padding-right: 10px; }
.padding-left-zero-px { padding-left: 0px; }
.padding-left-five-px { padding-left: 5px; }
.padding-bottom-ten-px { padding-bottom: 10px; }
.padding-top-five-px { padding-top: 5px; }
.padding-right-five-px { padding-right: 5px; }
.padding-right-left-px { padding-left: 5px; }
/* *-*-*-*-*-*-* ALIGNMENT & SPACING *-*-*-*-*-*-* */
.align-text-right { text-align: right; }
.align-text-center { text-align: center; }
.align-text-left { text-align: left; }
.mobile-header-spacer { padding-top: 30px; }
/* *-*-*-*-*-*-* COLORS *-*-*-*-*-*-* */
.color-light-blue { color: #007EA3; }
.color-gray { color: #7a7a7a; }
.color-gold { color: #ff9f22; }
.bottom-border-gray { border-bottom: 1px solid #ABABAB; }
/* *-*-*-*-*-*-* FONTS *-*-*-*-*-*-* * */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css')
.noto-sans { font-family: 'Noto Sans', sans-serif; }
.font-size-fourtheen-px { font-size: 14px; }
// 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', 'i', function(e) {
return _this.syncRating(_this.$el.find('i').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'i', function(e) {
return _this.setRating(_this.$el.find('i').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("<i class='fa fa-star-o'></i>"));
}
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('i').eq(i).removeClass('fa-star-o').addClass('fa-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('i').eq(i).removeClass('fa-star').addClass('fa-star-o');
}
}
if (!rating) {
return this.$el.find('i').removeClass('fa-star').addClass('fa-star-o');
}
};
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);
});
});
