[TomatoCart] – Integrate a reviews rating bar into your grass gray template

In a previous article, I had shown you how you can integrate a rating break down for products within the bootstrap template as shown below. In this article, I will show you how you can achieve this same feature with the grass gray template.



Figure 1. Reviews rating bar in bootstrap template


Figure 2. Reviews rating bar in grass gray template

How to apply it for your store?

Step 1. Download a package at https://www.dropbox.com/s/fw6p9pyvycxwupd/review-star-bar.zip?dl=0

Step 2. Unzip the package to copy includes and templates fold into your ToamtoCart root directory.

Note: please just override the original files. It will not impact other parts of your store.

Step 3. Open index.php under templates > grass_gray fold with your favourite text editor.

Find following code:

<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?>
<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="ext/autocompleter/Autocompleter.css" />
<?php }else {?>
<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/all.min.css" />
<?php } ?>

Add following code after it:

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

Step 4. Open info.php under templates > grass_gray > content > products fold.

Find following code:

              if ($osC_Reviews->getTotal($osC_Product->getID())==0) {
                echo '<p>' . $osC_Language->get('no_review') . '</p>';
              } else {
                $Qreviews = osC_Reviews::getListing($osC_Product->getID());
                while ($Qreviews->next()) {

Add following code before 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 clearfix">
                    <div class="label-wrapper"><label><?=$i?> star</label></div>
                    <div class="bar-wrapper">
                        <?php if ($rating_percent == 0): ?>
                        <div class="ui small progressing" data-percent="0">
                        <?php else: ?>
                        <div class="ui small progressing success" 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>

That’s it. If you need to change the color of star bar, please change the class of following tag:


Just change the success class to following class:

  • warning
  • error



Figure 3. Reviews rating bar with a different color in grass gray template

Final Word

I have also implemented a reviews list for glass gray template. Please read the previous article – Integrate an elegant reviews list for your glass gray template to know how to apply for your store.


Figure 4. Reviews list in grass gray template

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

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 *