[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.

Snip20150823_12

 

Figure 1. Reviews rating bar in bootstrap template

Snip20150825_1

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:

<?php
              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:

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

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

            <div class="review-star">
                <?php 
                    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>
                              </div>
                        </div>
                    </div>
                </div>
                <?php 
                    endfor;
                ?>
            </div>

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

Snip20150825_2

Just change the success class to following class:

  • warning
  • error

Snip20150825_4

 

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.

Snip20150823_7

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 *