Showing reviews on product templates

Evance has a built-in product review system, which requests customer feedback after order dispatch.

You can determine whether reviews are enabled and whether the product has any reviews for display with the Product.hasReviews property.


<?ev if (product.hasReviews) { ?>
    
    Reviews
    
<?ev } ?>

Review aggregates

You can obtain the average rating out of 5 and total number of reviews with the Product.averageRating and Product.totalReviews properties respectively. The simplest way to display review ratings as stars is with the <ev:rating> tag, but feel free to display your ratings according to your theme's design.


<?ev if (product.hasReviews) { ?>
    
    <ev:rating value="{{ product.averageRating }}" />
    
    {{ product.totalReviews }} Reviews
    
<?ev } ?>

If <ev:rating> does not output HTML suitable for your theme, you can replicate its functionality within code similar to:


<?ev 
    // 1 star is the lowest rating
    var star = 1;
    
    // 5 stars is the maximum rating
    while (star <= 5) {
    
        // create an icon element
        var icon = '<i class="icon" />'.toDom();
        
        if (star <= product.averageRating) {
            icon.addClass('reviewOn');
        } else if (star <= product.averageRating.ceil()) {
            icon.addClass('reviewHalf');
        } else {
            icon.addClass('reviewOff');
        }
        
        print(icon);
        
        ++star;
    }
?>

Displaying reviews

Evance currently assigns review data to the Product.reviews property within the product controller. This contains an Array of Review objects.

Each review has access to the reviewers full name, their rating out of five, positive and negative comments. 


<?ev if (product.hasReviews) { ?>
    
    <?ev for (review of product.reviews) { ?>
    
        <ev:rating value="{{ review.rating }}" />
        
        Review by {{ review.fullname }}
    
        Good points
        <p>
            {{ review.pros }}
        </p>
        
        Bad points
        <p>
            {{ review.cons }}
        </p>
    
    <?ev } ?>
    
<?ev } ?>

Note: the example above is incomplete to make it easier to read.

Review votes

Users may vote whether they found a review helpful, or not.


<?ev if (product.hasReviews) { ?>
    
    <?ev for (review of product.reviews) { ?>
    
        ...
        
        <?ev if (review.hasVotes) { ?>
            {{ review.upVotes }}  of {{ review.totalVotes }} people found this helpful.
        <?ev } ?>
    
    <?ev } ?>
    
<?ev } ?>

Note: the example above is incomplete to make it easier to read.

Adding a vote form

More information coming soon