This has been left out, simply because it only applies to the aggregate snippet. Reviews will still only be taken as whole value reviews, and hence individual review display will always be shown with whole value display. For the sake of consistency and ease of modular development, we left this as the standard for even the aggregate. Since these are icons half and whole are our only options, however I certainly see the case for half stars. I will try to have this implemented in our next update.
Thanks,
Charlie Maxwell
[NM_Developer]
Here’s a solution for half stars in the meantime.
Note: This uses Font Awesome, which must be installed for this to work.
var ratingContainer = $('span[itemprop="aggregateRating"]'),
starsContainer = $('.stars', ratingContainer),
totalStars = Math.round(parseFloat($('.rating', ratingContainer).text()) * 2) / 2,
wholeStars = Math.floor(totalStars),
emptyStars = 5 - Math.ceil(totalStars);
// empty the stars container element
starsContainer.html('');
// add whole stars
for (var i = 1; i <= wholeStars; i++) {
starsContainer.append('<i class="fa fa-star" aria-hidden="true"></i>');
}
// add a half star if applicable
if (totalStars - wholeStars !== 0) {
starsContainer.append('<i class="fa fa-star-half-o" aria-hidden="true"></i>');
}
// add remaining empty stars
for (var i = 1; i <= emptyStars; i++) {
starsContainer.append('<i class="fa fa-star-o" aria-hidden="true"></i>');
}
// [OPTIONAL] switch the individual reviews' stars to font awesome for consistency
var indivReviews = {
ratingContainer : null,
totalStars : null
};
$('.full-testimonial').each(function() {
indivReviews.ratingContainer = $(this).find('.stars').html('');
indivReviews.totalStars = parseInt($(this).find('div[itemprop="reviewRating"] > span[itemprop="ratingValue"]').text());
for (var i = 1; i <= indivReviews.totalStars; i++) {
indivReviews.ratingContainer.append('<i class="fa fa-star" aria-hidden="true"></i>');
}
for (var i = 1; i <= (5 - indivReviews.totalStars); i++) {
indivReviews.ratingContainer.append('<i class="fa fa-star-o" aria-hidden="true"></i>');
}
});
I, I like your thinking. Niemand. Maar waar plaats je deze code? (where do you place your code?)
Entschuldigung, Ich habe alle meine Deutsch vergessen…Dank für in Englisch zu schreiben 🙂
It goes in a javascript file that you’re loading on the front end, within the document ready call. For example, I put the code in a file named site.js which I’m calling in the footer of my theme.