[TomatoCart] – Apply a professional ratings bar for your bootstrap store

There is a professional ratings bar in the amazon store as follow:



Figure 1. Ratings bar of amazon.com

I really like it. So, I have spent several hours to implement a similar ratings bar for TomatoCart bootstrap store.


Figure2. Ratings bar for TomatoCart bootstrap store


Figure3. Ratings bar for TomatoCart bootstrap store in mobile device

How to apply it for your bootstrap store?

Step 1. Download ratings.bar.css at https://www.dropbox.com/s/uwle2v7zdle180h/ratings.bar.css?dl=0

Put it into templates > bootstrap > css fold.

Step 2. Open templates > bootstrap > index.php file to edit.

Add following code before </head> tag:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/ratings.bar.css" />

Step 3. Open templates > bootstrap > content > products > info.php to edit.

Find following code:

  <div class="tab-pane" id="tabReviews">

Add following code after it:

                $total_reviews = osC_Reviews::getTotal($osC_Product->getId());

                $rating = osC_Reviews::getRating($osC_Product->getId());
            <div class='review-tag'>
                         <?php echo osc_image(DIR_WS_IMAGES . 'stars_' . $rating . '.png', sprintf($osC_Language->get('rating_of_5_stars'), $rating)); ?>
                     <strong><?=$total_reviews?> Reviews</strong>
                    <small><?=ceil($rating)?> out of 5 stars</small>

            <div class="review-star">
                    for($i = 5; $i > 0; $i--): 
                        $rating_percent = osC_Reviews::getRatingPercent($osC_Product->getId(), $i);

                <div class="row star-bar">
                    <div class="span2"><label><?=$i?> star</label></div>
                    <div class="span8">
                        <?php if ($rating_percent == 0): ?>
                        <div class="ui small progressing" data-percent="0">
                        <?php else: ?>
                        <div class="ui small progressing warning" data-percent="<?php echo $rating_percent?>">
                        <?php endif; ?>
                              <div class="progressing-bar" style="transition-duration: 300ms; width: <?php echo $rating_percent?>%;">
                                    <div class="progressing-val"><?php echo $rating_percent?>%</div>

Step 4. Open includes/classes/reviews.php to edit.

Add following two functions into this file:

function getRating($products_id)
        global $osC_Database;

        $Qrating = $osC_Database->query('select avg(reviews_rating) as rating from :table_reviews where products_id = :products_id and reviews_status = :status');
        $Qrating->bindTable(':table_reviews', TABLE_REVIEWS);
        $Qrating->bindInt(':products_id', $products_id);
        $Qrating->bindInt(':status', 1);

        return $Qrating->valueInt('rating');

    function getRatingPercent($products_id, $i) {
        global $osC_Database;

        $QratingCount = $osC_Database->query('select count(reviews_rating) as cnt from :table_reviews where products_id = :products_id and reviews_status=1');
        $QratingCount->bindTable(':table_reviews', TABLE_REVIEWS);
        $QratingCount->bindInt(':products_id', $products_id);

        $rating_count = $QratingCount->valueInt('cnt');


        $QratingStarCount = $osC_Database->query('select count(reviews_rating) as cnt from :table_reviews where products_id = :products_id and reviews_rating = :reviews_rating and reviews_status=1');
        $QratingStarCount->bindTable(':table_reviews', TABLE_REVIEWS);
        $QratingStarCount->bindInt(':products_id', $products_id);
        $QratingStarCount->bindInt(':reviews_rating', $i);

        $rating_star_count = $QratingStarCount->valueInt('cnt');

        if ($rating_count == 0) {
          return 0;

        return round($rating_star_count / $rating_count * 100);

In alternative way, you could also download this file at https://www.dropbox.com/s/no7wgmqf1b5y8u6/reviews.php?dl=0 to override the original one.

Final word

I have wrote an article about how to integrate an elegant reviews list into your product info page both for bootstrap and glass gray template.


You could also combine it with this feature. It should be useful to enhance the user experience of your store.

Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions.

Tags: , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *